I am having so much trouble wrapping my head around the control panels and interpreting them in an intuitive manner.
To my mind, when clicking on an H1 element I expect to see the existing properties for that element populating the appropriate panel fields.
For example:
If the newly imported / opened html document contains custom css for an H1 element giving it a size of 32px, padding on all sides of 15px, and a text color of blue … my brain expects to see those properties displayed in the panels when I click on the H1 element. This doesn’t happen - all of the panels remain blank and seem to defy what I’ve come to expect from typical UI/UX conventions. The visual editor seems especially troublesome in this regard. I need your help.
I understand CSS. I understand HTML. However, I am having a mountain of a time trying to find a way to interpret the controls of Pinegrow.
Can anyone offer any insights on navigating the interface in a proficient way?
What is the easiest way you’ve discovered for editing existing css?
the first thing to do is stop picking elements from the preview window until you become more familiar with how things are presented there. Instead get used to picking them from the Tree tab (ur gonna want to keep that one open all the time anyway).
the next most important tab is the Style tab, and it comes in two parts. The upper part will show you the CSS rules sort of how they appear in the file, and the lower part is the VISUAL EDITOR… that’s where the money is.
if you want to style something like your H1, then pick it from the Tree and set the upper half of your Style tab to show the ACTIVE rules. Also be aware that this display will change as you change viewport size, if you have any media query’s operating. It will even show you what’s being overridden and by what.
you can see and edit the parameters right there… or you can select the rule you want to edit (highlight blue) and then drop down into the VISUAL EDITOR to see and manipulate the settings on the fly.
all the sections that have applicable parameters defined will be highlighted across the top of the VISUAL EDITOR, and you can click on them to take you down into that specific section. learn these groupings.
ALL the rotary selectors (up and down arrows) can be fiddled with in real time by either the mouse [click + hold and drag up/dn], or by the keyboard [click in box, then use the up/dn keys to adjust the number one increment at at time]
tip, you can even put in a decimal like 2.5px and the keys will adjust the number by 0.1 with each key press.
this is great for dialing in exactly what you want and watching how it affects the rest of the layout.
it does take some getting used to… i liken it to being dropped into the cockpit of a 777.