Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Content Panels

Home Forums Support Content Panels

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #40530
    Atomonfire

    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

    #40549
    Tom
    Lead Developer
    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!

    #40649
    atomonfire

    dive-to.com

    Thanks

    #40659
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #41331
    Atomonfire

    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?

    #41456
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #41494
    atomonfire

    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?

    #41662
    atomonfire

    Got it. Thanks.

    #41664
    Tom
    Lead Developer
    Lead Developer

    Figured it out? Mind sharing what you did?

    Thanks! 🙂

    #41796
    atomonfire

    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. 🙂

    #41812
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.