Hi, new to Pinegrow but liking what I see…just trialling at the moment, but looks promising. (I have to say that I’m using v2.951 and CAN NOT upgrade due to running older Mac OS for vital legacy software for my job)
However, having some difficulty with Drag & Drop from the Lib pane. I’ve got a div called div.site-logo into which I’m trying to drag an IMG from the Lib pane. There’s no way I can drop it in the div! It just places itself on the page roughly near where I’m dropping it, but never in the div. If I click on the div and get the actions, there is unfortunately no ‘insert image’ function.
It’s the devils own job to drop an image into a div, especiually as by default the drag&drop IMG button lands a bloomin great pic of a flower on the page - not helpful!
Any tips for a noobie on how to place a small image within a div?
Many thanks
Locate the div in the tree view, you can then drag and drop directly into the div in the tree.
Hi Sureweb, thanks for the tip - that kind of worked, I managed to place a logo image within the existing div.site-logo
I say ‘kind of’ because it’s still the devil’s own job to understand the size of the div that’s been placed there. There’s a full width div called div.center, and within that div, aligned right, are 5x ‘a’ links as menu items (each ‘a’ containing text and a href link etc.)
The div-site-logo is aligned left, and between it and the first of the navigation 'a’s is a wide space of nothingness. But if I replace the text in the div.site-logo with an image, and the logo image is slightly bigger than the original text box, it throws all the navigation onto a new row…even though there is some 300px gap between the div.site-logo and the navigation div.
Frankly, I’ve no idea how, why or where the divs are sized and structured.
This would be a lot easier to understand with a screenshot, but doesn’t seem any way to attach one here…
regards
You can attach images by clicking on the upload icon (looks like a rectangular block with an arrow pointing up, and says “Upload” when you hover over it.
BTW, are you using a Framework like Bootstrap?
I have been a drag and drop kind of guy and that has MOSTLY worked.
super
Ah…thanks for putting me right on that one!
I thought I had downloaded a Bootstrap theme to work on, but a glance in the Javascript folder shows no bootstrap js, although there are global js and jquery files.
Attached is a composite pic of the header showing the ‘nested’ elements inside the larger container element (not named in the screenshot but it’s called div.center). I’ve arrowed the gap between site logo and navigation.
Also, I have to admit I don’t understand what ‘CSS Rules’ are in Pinegrow. I know what IDs, classes and selectors are, but I don’t understand Pinegrow’s CSS rules. ??
Hi @dowlassmoss,
Pinegrows css rules are just… the standard css…stye…rules. in your page.
Listed together in Pinegrow’s Styles css viewer tab and editor
So, nothing funky, or extra or new.
so, as you know ID’s and classes,
a class can be composed of any number of style rules from 0 to…a big number.
0 is pointless but handy when setting up your page. fill it in later.
an ID is a specific one off thing … a label which is applied to an element to make it unique…for styling for instance.
so, the styling you create… which targets that specific ID is a collection of css rules.
which when viewed in Pinegrow could be called…Pingrow’s css rules.
its just a matter of semantics. if you were viewing it in cough dreamweaver, you could say they were DreamHeavers Style Rules.
so colour, font, size.
each one of these things is a css rule.
and when you create a class, it is a collection of css rules.
which if you view in Pinegrow, you could call… Pinegrows Style rules
they are actually the pages and yours.
Hi schpengle, thanks for the response.
OK, so ‘rules’ are the selector(s) + attributes. Like p.intro {font-family:arial; font-size:12px; color:#666;}
I tried to create a new rule but Pinegrow doesn’t seem to have saved it (or written it to the stylesheet) - it’s not happening either in Pinegrow or when published.
In this case I might be better off just delving into the stylesheet ina text editor, methinks. Pinegrow’s useful for identifying exisiting rules, though.
have you checked this out @dowlassmoss?
