Content Background Color

Hey,

Are you wanting to set the background of your boxed layout to be an image, while the background of the content is somewhat transparent?

You can set this up in Theme Options> Advanced Styling. Your Main Content background will control what you see inside of the margins, while the Body Background will control what you see to the right and left of your boxed layout.

If you want to change anything that can’t be set in Advanced Styling, let me know and I can help with CSS.

-Kevin

Yes. Thanks for clarifying that. I was always confused about which one was which.
Okay, I uploaded the same photo with a semi-transparent layer to the Main Content Background, and I almost got what I was looking for, but the only thing is that I’d like it to be fixed, rather than the photo scrolling to where it doesn’t match the Body Background photo.

Also, is there a way to remove the main content lines on the home page?

Rather than assign the image to your main content, perhaps it would work better for you to set it as transparent. That way you will be able to see the background without any scrolling.

does that work for you?

As for the second part, are you wanting to remove the lines on the side that differentiate the main content from the body background?

You should be able to do that by adding CSS to Theme Options> Advanced Settings:

.home #wrapper.container {
    -webkit-box-shadow: none;
    box-shadow: none !important;
}

Let me know if this is helpful!

-Kevin

Okay, I removed the photo from the Main Content and made the color white and set it to transparent. Then I added your CSS to the custom CSS box, and now the lines are removed from the front page and are visible on other pages like I wanted, but there is no semi-transparent white in the Main Content on the other pages.

Hi Tessila,
I think this css will do what you want:

.boxed #wrapper.container {
    background: rgba(255,255,255,.4);
}

Hope it helps!

Hannah

Yes, that’s what I wanted. The only thing is that I didn’t want it on the front page. I’m not sure how to remove it.
Thank you, by the way!

Because your homepage is not boxed, the css should not have an effect on it.

Hannah

Okay. How do I only box it, and no other pages?

Right now it looks like your homepage is not boxed, and all your other pages are. Are you wanting to reverse this?

Hannah

Oh, I didn’t realize that. Then yes. Thanks!

• This reply was modified 6 years, 5 months ago by Tessila.

How can I reverse them? I searched everywhere for an option, but I couldn’t find one. How are they as they are in the first place?

Hey,
I think I know what you want but I’m not sure. Here is some css I would like you to try, you can remove the previous and add this instead:

.boxed #wrapper.container {
    background: rgba(255,255,255,.4);
}
.home.boxed #wrapper.container {
    background: transparent;
    box-shadow: none !important;
}

Let me know if that is what you are wanting.

Ben

Yes, that’s it. Thank you so much! Thank you all for your help. I really appreciate it.

Okay, I just came upon a problem. The background worked for my browser, but when I went to my site on another computer, it was completely blank. So I cleared my cache on the computer I’ve been using, and now it’s blank.