CSS styles within rows and widgets

Hi nialltm

Whether for rows or widgets, styles will be added to the containing div inline. So an example of a properties inserted would be:

color: red;
font-size: 20px;

I’m having the same issue. No matter what CSS code I use, it doesn’t show in the rendered HTML. I’m using the Vantage theme, so it shouldn’t be the theme.

Screenshot

Hi chrisram

If you can perhaps send through a link to that page we can check the output.

It’s not online. I’m using a local development environment (DesktopServer).

Is there something I could copy or screenshot that would get you what you need?

Can you please link to a screenshot of the source code of that section of the page. Thanks.

FYI, its working fine for me now.
I have no idea what I was doing before but I tried it straight after misplon replied and it worked no problem.
Probably just me doing a duhhh.
P.S. love siteorigin and sitebuilder, made my life and wordpress a million times easier!

Here is the code from the site: https://pastebin.com/6XZDaanL

Thanks @chrisram. Not sure that’s the same output as your initial screenshot. I can see the classes unique1 and unique2 as well as inline styles from the CSS Styles field being outputted.

Yes, you are correct. It does show the classes. It also does show inline styles, but not the ones in the screenshot.

What I am looking for in the ones labeled “CSS Styles” in the screenshot. Those are not in the code.

Oh wow, yeah I am having the same problem.

New to Page Builder, I’m working in the Visual Editor module. Yes, no matter where I put my CSS is has no effect on the class I gave the row. I’m trying to style some text.

Also, at the bottom of Widget Style, the Font Color option has no effect on the text. Of course I removed the class before testing.

Would LOVE to see this work out. I’m looking for a less bloated tool, VC has just gone to far for me.

Sorry… https://cb.profoliolive.com/siteorigin-test/

Sorry @chrisram, you’re right. Row and cell classes are being printed by inline row styles aren’t. In the case of widget classes, those are being printed by widget inline styles, only the last line looks to be rendering, so if you have more than style, only the last line prints. We’ll get into this ASAP and have a resolution in the next PB release. Thanks for your effort here.

@chris Borgman, hopefully that helps explain the issues for your build right now too. Just a quick point of row, cell and widget classes are meant for targeting using a Custom CSS plugin or a child theme style.css file. In summary, you can either insert a class name and target that elsewhere OR insert inline styles. The design is not meant to be such that you insert a class name and styles below that for that class. Inspecting the source will hopefully clear this up for you.

We should have documentation out on this soon.

Yes, I did also try putting CSS in my child themes file. I’m using Genesis and Dynamik Website Builder child theme which has a dedicated place for CSS.

Sure, first I tried setting the class then right under add the CSS for that class, but when it didn’t work I added it to my theme’s CSS file, still did not work.

I’m a little confused on the explanation, but it seems you are aware there is a problem and it’s not just end users doing it wrong, am I correct?

We’re nearly on the same page here. I’ll try explain how the classes vs styles works in a bit more detail a little later today.

With regards to rows. Row Class, Cell Class and CSS Styles are not linked, they do three separate things.

Row Class

I’ve added a row class and called it:

test-row-class

If we now go inspect the page source we see that the very first div in the row looks like this:

<div class="panel-row-style-test-row-class test-row-class panel-row-style">

So now we have a custom row class that we can target in our own CSS, be it theme stylesheet, child theme stylesheet or Custom CSS.

Note that there is no period before test-row-class when I add it to the Page Builder field. However when I target that class in my CSS I do need a period in front of it.

.test-row-class {
/* My styles for test row class go here */
}

Cell Class

I’ve added a test cell class:

test-cell-class

Now let’s go inspect the page source and see where this is being applied:

<div class="panel-row-style-test-row-class test-row-class panel-row-style">
	<div class="panel-grid-cell" id="pgc-1459-0-0">
		<div class="test-cell-class panel-cell-style">

Now we can see both our row class and cell class being applied. As with our row class before we can now target this cell class in our own stylesheet, wherever that may be:

.test-cell-class {
/* My styles for test row class go here */
}

CSS Styles

Lastly let’s take a the CSS Styles field. This field will add inline styles to the row div. Not the cell div the row div. You can add one per line and don’t need a semi-colon at the end, for example:

color: red

Let’s take a look and see how that looks in the page source:

<div class="panel-row-style-test-row-class test-row-class panel-row-style" style="color: red;">
	<div class="panel-grid-cell" id="pgc-1530-0-0">
		<div class="test-cell-class panel-cell-style">

Now we can see all three row Attributes in play. Our row class, cell class and inline CSS Styles.