Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I’m testing your page builder plugin and it is a great tool. One feature that would be really useful is to be able to differentiate between the rows.
For example on a page where the row has a single column and a large image, I want to stretch it full width and make the background color black.
For this I think when you add the row initially, you would select a row type, or an option to add a row classname? it would output something like this:
Should be pretty easy to add, but thought I would see if you had implemented this before I try and customise it myself :)
Hi Kim
Thanks for your feedback. It’s something we’ve implemented in our own themes. Vantage for example has a built in row style called Wide Grey as well as a row style builder that allows users to set things like row background color and row border. It’s unfortunately a little tricky to go put this onto themes we didn’t design and leave it up to theme developers to add row style support for their themes: https://siteorigin.com/page-builder/theme-integration/.
So for a once off case Custom CSS as you’ve suggested, would be the way to go.
Ok thanks for your quick response, will check out the custom themes css!
Sorry I missed your subject line a little. Page Builder does already output custom ID’s so using your browser’s developer tool you can inspect the source and use what you need to output specific styles.
Check out my plugin http://nyinker.com/siteorigin-panels-class.zip it adds classes to Page Builder without modifing the original plugin. If you like it, spread the word ;)
I actually managed to achieve this by using custom siteorigin_panels_row_styles and siteorigin_panels_row_classes functions:
function mytheme_panels_row_styles($styles) { $styles['full'] = __('Full width', 'alley'); $styles['fit'] = __('Fit width and height', 'alley'); $styles['wide'] = __('Wide aspect ratio', 'alley'); return $styles; } function mytheme_panels_row_classes($grid_classes, $row_classes) { if (!empty($row_classes)) { if (!empty($row_classes['style']['class'])) { $grid_classes[0] = $grid_classes[0] . ' panel-grid-style-' . $row_classes['style']['class']; } else { $grid_classes[0] = $grid_classes[0] . ' panel-grid-style-default'; } } return $grid_classes; } add_filter('siteorigin_panels_row_styles', 'mytheme_panels_row_styles', 10, 1); add_filter('siteorigin_panels_row_classes', 'mytheme_panels_row_classes', 10, 2);