Hi again! I’m getting further with PageBuilder and very impressed overall.
I have a few questions I couldn’t find the answers by myself, perhaps you can help?
Here I go:
– how best can I reuse PB’s CSS ? Is it based on a Framework (custom or 3rd-party) ?
I’ve designed my templates using purecss.io (very lightweight) but I’d rather remove it and use PB’s Grid system to keep the css total bytesize to a minimum.
– what CSS classes does PB inject that I can style?
Perhaps a bit of documentation on PB CSS structure would be helpful.
So far, I’ve only had to add this to my CSS:
.panel-grid > ul{
list-style: none;
margin:0;
padding:0;
}– how can I have a full-width row (with a background color) contain a constrained width row with columns ? It would be nice to be able to put rows inside rows.
– I can’t seem to use the “ratio” dropdown correctly, except for “even”. Any other option turns the columns into a one 100%-width column. I’ve set a classname “.maximum-width” as value for the “fullwidth container” option, but that didn’t change that behavior.
Thank you!!!
Alexandre.
Hi Alexandre
Page Builder generates layout CSS specifically for a given layout. This allowed us to create some highly optimized CSS without any of the overhead that comes with more generic frameworks. This makes it a little difficult for layouts outside Page Builder. Technically you could do this, but it would take a lot of work to integrate with Page Builder’s CSS generation.
To get an idea of what classes Page Builder uses, I’d suggest using something like the Chrome Inspector to view the code and pick out any CSS classes you could target. If you’re feeling really adventurous, then you could hook into Page Builder’s filters to add your own classes. There are a few of these filters available:
https://github.com/siteorigin/siteorigin-panels/blob/develop/siteorigin-panels.php#L977
https://github.com/siteorigin/siteorigin-panels/blob/develop/siteorigin-panels.php#L1002
https://github.com/siteorigin/siteorigin-panels/blob/develop/siteorigin-panels.php#L1036
A little more documentation on these might be helpful, but you might be able to figure things out from the source code.
Hrmm, and that ratio dropdown issue you’re having sounds like some sort of bug or plugin conflict. Not too sure what’s going on there. Are you running Page Builder on a fairly fresh install of Page Builder or are there a lot of extra plugins running?
Hello Greg,
I played around with the siteorigin_panels_row_classes filter but it does not go high enough in the DOM.
Are there filters that can be used to add classes to the generated wrapper div (such as these <div id="pl-11331">) ? If not, would it be possible for
SO to add a class (for example <div id="pl-11331" class="pb-row-wrapper"> )
that we can then use in our CSS / JS ?
Thank you,
A.