Frontpage: change background color around text box


#1

I’m looking for a way to make the background surrounding a frontpage text box a different shade, such as light grey, while keeping the text box background white. Any suggestions?

http://arbor-pacific.com


#2

First, go to the row options and change full width to default for the row containin g the text (in the Page Builder).
Then add this in a custom CSS plugin:


.home.page .site-content {
   background-color: #D8D8D8;
}


#3

That’s great, I added it. However, it looks as if there’s about 5px of padding that leaves a thin white stripe between header image and page content. Can I make that go away? Alternatively, could I add padding above and below the text box in the background color so that the grey frames it all around? Not sure which way I want to go…


#4

Use this and adjust to your needs:


.home.page .site-content {
   padding-top: 50px;
   padding-bottom: 50px;
}
img {
   vertical-align: middle;
}


#5

Following up on this request: I would now like to apply this same appearance to all the other pages.

http://arbor-pacific.com

I used the Front Page template for all pages, and the Page Builder for all page content, so how would I modify the CSS to get the gray background and text box around the text? Thanks!