Using the Visual Style Editor in Pinegrow v3

[Rob]

The correct way to use the Visual Styles Editor to add styles in my opinion is using this approach.

Let’s start with a page using Bootstrap framework and add a row and then a column to the container.

Select the container element in the tree or directly on the page and then change to the Element Properties tab.

Add a new class by clicking on Add class, give your class a name (e.g. newstyle) then click create.

Click on Styles (CSS) tab and then click Create new rule, select the .newstyle selector (or whatever you named it) and check you have the correct stylesheet selected, e.g. style.css then click create.

Now what you will see it is that the .newstyle rule is selected and you can use the visual style editor to change the container style and the css will be written in the styles.css for the .newstyle rule and not as inline styles

[Simmo]

Nice one Rob

[greyguru]

I had some problems using the visual style editor on my first try (in a Wordpress theme)

To begin with, I was searching all along the top icons for something which would invoke it (the short teaser video didn’t help me) and eventually found the words “VISUAL EDITOR” near the bottom - in case you’re still looking, any one, that’s what you click. (Obvious once you find it!)

So I got to play and created the new look I wanted - great functionality - but I couldn’t see how to save it. I wanted to modify an existing css rule but I could only see a way to create a new rule. My next challenge was to edit the actual css to copy the lines I had just saved up to the existing rule. I’ve now found how to edit the rules directly, but when I was doing this yesterday, I gave up and used an external editor. (Incidentally, the css produced by visual editor isn’t formatted nicely, the way it was from Pinegrow 2.)

My next problem was that Pinegrow 3 doesn’t appear to refresh when CSS is edited externally and saved, at least not for me. When I finally went to save in Pinegrow I got this message:

which I find confusing - the question is “Do you want to overwrite” and the possible actions are “cancel” and “save selected” and I ended up with save selected which blew away my changes. Luckily, Sublime Text" had the previous version available, Maybe “Overwrite Selected” would be better.

It’s also confusing that even when the only thing that I’m changing is in a css file, the thing that gets tagged as “changed” was (in my case) home.html and the only messages after the save name home.html.

I should note that I was getting some of these results in PineGrow 2 and I had thought it was because I was changing style.css which apparently gets special treatment. I’ve now separated out theme-specific rules into stylemods.css based on a suggestion in this forum, but it may not have helped.

It would be nice if after duplicating a css file which is enqueued, the new one is also enqueued, and there was some simple way to attach the new style to multiple pages, rather than doing it one at a time…

If all of this sounds negative, it’s not. I’m hoping that my feedback will affect the revised documentation for September, and just possibly initiate some changes in the interface. And it’s very possible that many of my problems are stemming from an inadequate grasp of how to use the product, and that someone will point out my error!!

[greyguru]

I found out what I was doing wrongly in Visual Editor where I couldn’t save it - it seems that if you click on an element in a page (e.g. a DIV) and then invoke VE you get an “empty slate” to play with, which you save as a new rule. However, if you click on an existing CSS rule, the VE shows the current rule parameters, and saving updates the rule. Makes sense once you figure it out. And works well - nice feature, thanks!!

[mfg]

I’m finding the Visual Style Editor very cumbersome and not at all intuitive.

I do want to to thank you both @greyguru and @Rob for starting this post and continuing with it. These small bits have helped a lot in guessing how the functionality of it works.

However, I’m again and again having to abandon PG to manually edit css to accomplish very basic things. I realize that every new interface requires some time and learning, and of course the manual isn’t even out yet, but I don’t think it bodes very well for a GUI that it is so natively difficult to accomplish very basic things. I spend a lot of times switching between uninformative menus, back and forth, back and forth, circling around.

From the few moments of success I know this has a lot of potential, and of course I’m here asking questions because I believe in PG, but surely this can’t just be me. That said, maybe it is! Does anyone have any other suggestions? Tips? Ways to sift through the interface? Would be much appreciated!