- This topic has 10 replies, 2 voices, and was last updated 9 years, 1 month ago by
.
-
Posts
-
Hey,
Just having some trouble here. I’m using PageBuilder for my page content and the content is not organizing into separate panels when in a row. So each row shares the same background color essentially. All the element spacing still applies but I’d like the background to be separated by the panel instead of by row. Is there any way to set this up?
Thanks
Lead Developer
Hi there,
Not sure if this is the plugin doing it or GP – can you post your link so I can look at it?
Thanks!
dive-to.com
Thanks
So I’m assuming you want the two columns in the content to be in separate boxes?
This isn’t happening because you have your content background set to #F9F9F9.
A solution would be to make your content background #FFFFFF, and then add this CSS so the boxes are separated:
.panel.widget { background: none repeat scroll 0 0 #f9f9f9; padding: 30px !important; }Of course, you probably want #f9f9f9 to be the background color of all of your other pages not using PageBuilder, so you can leave that setting, and add this CSS:
.home .inside-article { background: transparent; }That will remove the content background color from your homepage only.
Of course, if you want to apply this to other pages as well, you’ll have to find the unique class of that page in the
<body>element and use that instead of “.home”.Hope this helps 🙂
Thanks Tom.
This is definitely helping I just need to adjust one thing. Since pagebuilder is using each panel as a separate widget, it’s adding a double layer of padding to the panels as you can see when you look now. I need to adjust this accordingly:
.separate-containers .inside-article { padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; }But this needs to change only on the home page. I have tried using everything from .home to every other class being used in the <body> and it will not work at all. Any ideas?
Hi there,
Is adjusting the padding in the following code not altering the widget padding in PageBuilder?
.panel.widget { background: none repeat scroll 0 0 #f9f9f9; padding: 30px !important; }It’s adjusting the padding inside the panel, which just causes there to be no space between the background borders and the text. I need the padding outside the panels to be adjusted to remain consistent with the rest of the page.
Maybe there’s an easier way to put the content into separate panels without using pagebuilder?
Got it. Thanks.
Figured it out? Mind sharing what you did?
Thanks! 🙂
Sure!
I changed up this:
.home .inside-article { background: transparent; }to this:
.home .inside-article { background: transparent; padding: 0px 0 0 10px; }And adding this:
.home .panel-grid-cell { padding: 0 15px 0 0px; }This fixed the padding issue, then there was a margin being set between each row which I had to adjust via this:
#pg-117-0, .panel-grid-cell .panel { margin-bottom: 15px !important; }And voila, nicely evened columns and rows on the home page in separate panels. 🙂
Perfect! Great job 🙂
- You must be logged in to reply to this topic.