CSS guide, chart, map please

[Rob]

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.