Title: CSS styles within rows and widgets Last modified: August 22, 2016 --- # CSS styles within rows and widgets * [nialltm](https://wordpress.org/support/users/nialltm/) * (@nialltm) * [11 years, 4 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/) * This may seem like a very simple question but I’m having trouble inserting CSS styles within the row or individual widgets. * It states ‘CSS Styles, given as one per row.’ but no matter how I format the styles it doesn’t seem to work. * This is on the dialogue box that appears when using pagebuilder. * Any examples or help would be appreciated! * [http://s30.postimg.org/vjufe3ijl/demo.png](http://s30.postimg.org/vjufe3ijl/demo.png) * [https://wordpress.org/plugins/siteorigin-panels/](https://wordpress.org/plugins/siteorigin-panels/) Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/page/2/?output_format=md) [→](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/page/2/?output_format=md) * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [11 years, 4 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688368) * 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; ``` * [chrisram](https://wordpress.org/support/users/chrisram/) * (@chrisram) * [11 years, 4 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688547) * 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](http://cl.ly/image/0S101R02370A) * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [11 years, 4 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688558) * Hi chrisram * If you can perhaps send through a link to that page we can check the output. * [chrisram](https://wordpress.org/support/users/chrisram/) * (@chrisram) * [11 years, 4 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688569) * 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? * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [11 years, 4 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688575) * Can you please link to a screenshot of the source code of that section of the page. Thanks. * Thread Starter [nialltm](https://wordpress.org/support/users/nialltm/) * (@nialltm) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688604) * 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! * [chrisram](https://wordpress.org/support/users/chrisram/) * (@chrisram) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688611) * Here is the code from the site: [http://pastebin.com/6XZDaanL](http://pastebin.com/6XZDaanL) * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688627) * Thanks [@chrisram](https://wordpress.org/support/users/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. * [chrisram](https://wordpress.org/support/users/chrisram/) * (@chrisram) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688628) * 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. * [Chris Borgman](https://wordpress.org/support/users/chrisborgman/) * (@chrisborgman) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688642) * 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. * [Chris Borgman](https://wordpress.org/support/users/chrisborgman/) * (@chrisborgman) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688643) * Sorry… [http://cb.profoliolive.com/siteorigin-test/](http://cb.profoliolive.com/siteorigin-test/) * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688647) * Sorry [@chrisram](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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. * [Chris Borgman](https://wordpress.org/support/users/chrisborgman/) * (@chrisborgman) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688657) * 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? * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688668) * 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. * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/#post-5688669) * 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: * `
` * 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: * ```
``` * 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: * ```
``` * Now we can see all three row Attributes in play. Our row class, cell class and inline CSS Styles. Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/page/2/?output_format=md) [→](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/page/2/?output_format=md) The topic ‘CSS styles within rows and widgets’ is closed to new replies. * ![](https://ps.w.org/siteorigin-panels/assets/icon.svg?rev=2556869) * [Page Builder by SiteOrigin](https://wordpress.org/plugins/siteorigin-panels/) * [Frequently Asked Questions](https://wordpress.org/plugins/siteorigin-panels/#faq) * [Support Threads](https://wordpress.org/support/plugin/siteorigin-panels/) * [Active Topics](https://wordpress.org/support/plugin/siteorigin-panels/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/siteorigin-panels/unresolved/) * [Reviews](https://wordpress.org/support/plugin/siteorigin-panels/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [row](https://wordpress.org/support/topic-tag/row/) * 16 replies * 4 participants * Last reply from: [Andrew Misplon](https://wordpress.org/support/users/misplon/) * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/css-styles-within-rows-and-widgets/page/2/#post-5688670) * Status: not resolved