We need a CSS “guide” of how the author names and assigns classes and rules to his style sheet. I have a HELL of a time trying to style menus and drop down menus because the system they use to identify styles is completely foreign to me and makes hardly any sense at all. Anyone else fell like Sherlock Holmes trying to discover the code?
Hi @batman 
. Here’s a quick write up on how I would suggest working with CSS in Pinegrow.
#Editing and adding CSS
Pinegrow has a very useful feature for working with CSS.
Simply selecting the element, in this example the Bootstrap navbar dropdown, you want to change the style of and right clicking to bring up the contextual menu.
Here you will be shown a list of options relative to the option you have selected.
After that click on Show CSS Rules and it will open the Element Rules Panel and displays any CSS rules used by the currently selected item.
N.B. If you’re working with Bootstrap and nothing is displaying then make sure that bootstrap.css is ticked on in the list of stylesheets, then it will display any bootstrap css that the selected element is using.
From here, unless you’re very familiar with Bootstraps styles, there might be a little bit of experimentation as you try to figure out which is the correct style to change.
Once you have established the correct one I’d recommend adding it to the style.css file and making any changes to the style there. This will prevent any issue where you might lose your custom styles if bootstrap.css is overwritten, e.g. as a result of an upgrade to Bootstrap.
Tip: By clicking on the name of the style it will open the css editor panel. Copy the name of the element from here then click “Back to Rules”. After that add new rule in style.css and paste the rule name into the field. This will ensure you don’t mistype the name and waste time trying to figure out why it mightn’t be adding the style to elements correctly._
Edit your style, making sure you click the choose button if you are editing the colour because it won’t apply the selected value otherwise.
###Congratulations you’ve edited/created a new style.
Hope this was helpful. I’m sure there are other way of doing this and I’d love to hear how others approach editing stylesheets in Pinegrow.
2 Likes
Thanks Rob… but my confusion is over which “style” controls what part of the menu:) And to complicate it I am using drop down menus.
I did finally find what I wanted but I had to search Blocks CSS for colors and experiment to find which style does what.
The Names of these Classes are not apparent to me. I wish the Naming scheme was more defined… somewhere:)
Don’t know if what I am doing will show either:)
Example:
@batman using the same method as above but with the page set to something like 320px you can Show the Rules used and make changes to the css, again I’d suggest adding them to style.css
You will see a style with a media query as per image below:
