When you install Pinegrow and open it on your computer, you first play with the built-in templates, like perhaps every user will do. But I opened a template, started to play with it, changed some color here, change some text over there, but suddenly I realized that I was changing the source css files from bootstrap. To prevent that, I clicked undo, undo, undo and so on, until there was nothing to undo anymore.
I realized two things:
the source css file from bootstrap, the original that came with Pinegrow, was changed and I lost the original css codes (don’t know anymore) - this might mean that every user of Pinegrow has this issue, since everyone will pick a template soon or later and starts to change the css?
I could not undo css changes, which means an important part of edits in Pinegrow can not be undone? And this means that after you played with a template, you don’t know what was the original css code, since changes can not be undone, and they will be saved in the external css file? Changing a template and closing it without saving will also be no solution, since css changes are still not undone, but saved in the original css file?
This issue went through my head as a beginning ‘Pinegrower’ and any clarity would be much appreciated . . . before I make any more changes . . .
Hi @LowerSaxony. When you are working with a framework it is best practice to make any changes to the built-in css of the framework in a different stylesheet to avoid any issues, e.g. changes you’ve made to the css getting overwritten when the framework gets upgraded. That is why Pinegrow has a style.css added by default. This allows you to change any of the framework styles without actually changing the default framework styles.
So by rewriting the framework styles in style.css you get to change the look of the framework style without the worry of messing up the original css file. Hope this helps make sense of it all.
Any further questions feel free to reply and I’ll do my best to help.
Thanks for the tip about style.css. It seems to solve my issue to keep original css files unchanged, but it still seems that css changes can not be undone. That many templates in my Pinegrow have no style.css together with the fact that the documentation and video tutorials invite users to play with all features / libraries / resources, without mentioning this overwriting issue, created some confusion in my case.
How do you do it?
Selecting the css rule you want, copy its code and paste it in an empty (style.)css?
Do you do that for every original css file / original rule, if you want to use that original one for your custom project / page?
Hi @LowerSaxony. If I am working with Bootstrap and I want to change the colour of all links in the project I would add a new rule to my style.css file and change only the relevant parts, e.g.
default style in bootstrap:
a
{
color: #337ab7;
text-decoration: none;
}
my custom style:
a
{
font-weight: bold;
}
This would result in my link changing to display as #337a7, bold without underline. So if I decided I didn’t want the default color I would also add color: custom color; to my new rule for link elements like this:
a
{
color: #e55555; /* Orange Red */
font-weight: bold;
}
You only need to to this for the rules you want to change and you would be surprised how you can change the look of a framework just by changing a few rules.
I’ve previously posted about how I find the css rule that I want to change and how I change it in this post.
Dear @Rob, thank you for the CSS guide. Nice to see a real example of Pinegrow in action. And because the style.css is placed under bootstrap.css it will overrule bootstrap rules. You made me able to go back to work with Pinegrow. I first wanted some info, before I changed any more things. Thanks, I know something more about the program.
P.S. I don’t know why, but now undo is also working for changes in CSS. For some reason this was not working previous time…
