[DHall_DesignerParticipant]

Hello,
I have the site background set to transparent so you can see the patterned background on certain sections of the website. However, because it’s transparent, the blog page shows the transparent background. Link here – http://cfwashco.shamoonadvertising.com/2017/01/11/hello-world/

Is there a way to change ONLY the blog page background back to white?

[DHall_DesignerParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for posting in.

Yes, that’s possible. But, is it the blog page or post page? Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.single-post .x-header-landmark {
background: #fff;
}
.single-post .site > .x-container {
    background: #fff;
    position: relative;
    width: 100%;
    padding: 0 7%;
}
.single-post .site > .x-container:before {
    content: "";
    background: #fff;
    display: block;
    position: absolute;
    top: -2.71em;
    width: 100%;
    bottom:-2.7em;
    left: 0;
}
.single-post .x-colophon.top {
padding-top: 0;
}
.single-post .x-colophon.top:before {
content: "";
display: block;
width: 100%;
height:0;
padding-bottom:27%;
background: url(https://s3.amazonaws.com/community-themeco/app/uploads/2017/03/11104424/FOOTER_09_WHITE-1.png);
background-size: 100% auto;
margin-bottom: 2.7em;
}

Just change the image URL.

Cheers!

[DHall_DesignerParticipant]

This reply has been marked as private.

[DHall_DesignerParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please find this CSS:

.single-post .site > .x-container:before {
    content: "";
    background: #fff;
    display: block;
    position: absolute;
    top: -2.71em;
    width: 100%;
    bottom: -2.7em;
    left: 0;
}

And change to this:

.single-post .site > .x-container:before {
    content: "";
    background: #fff;
    display: block;
    position: absolute;
    top: -2.71em;
    width: 100%;
    bottom: -2.7em;
    left: 0;
    z-index: -1;
}

Hope it helps 🙂

[DHall_DesignerParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

You can add this under Custom > CSS in the Customizer.

body.blog,
.blog .site {
	background-color: #fff !important;
	background-image: none;
}

Thanks.

[DHall_DesignerParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for updating in! Sorry if it didn’t quite worked out. Please update the custom css and make use of this code instead:

.blog .site {
	background-color: #fff !important;
	background-image: none;
}

You should have something like this: http://prntscr.com/ekjk97

Please let us know how it goes.

[DHall_DesignerParticipant]

This reply has been marked as private.

[DHall_DesignerParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

You can update this css block:

.single-post .x-colophon.top:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 27%;
    background: url(https://s3.amazonaws.com/community-themeco/app/uploads/2017/03/11104424/FOOTER_09_WHITE-1.png);
    background-size: 100% auto;
    margin-bottom: 2.7em;
}

To this:

.single-post .x-colophon.top:before,
.blog .x-colophon.top:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 27%;
    background: url(https://s3.amazonaws.com/community-themeco/app/uploads/2017/03/11104424/FOOTER_09_WHITE-1.png);
    background-size: 100% auto;
    margin-bottom: 2.7em;
}

However, blog page footer can’t have the transparent background because of the white background we just added on the boxed container.

Thanks.

[DHall_DesignerParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

If that is the case, then we need make the boxed container to have a transparent background. Please update the code provided above to this:

.blog .site {
	background-color: transparent !important;
	background-image: none;
}

Then lets apply a white background on the content container and header landmark only, so the footer will remain transparent.

.blog .x-header-landmark,
.blog .x-container.offset {
	background-color: #fff;
}
.blog .x-container.offset {
	width: 100%;
	margin: 0;
	padding: 2.75em 7%;
}

Hope it helps, Cheers!

[Author]

Posts