Change background color and opacity of blog page

Hi support,

I would like to change:

  1. the blog page standard background color
  2. the blog page background opacity
  3. the background color of individual blog posts
  4. the background opacity of individual blog posts

Is there a way to achieve this? At the moment the default seems white and non-transparant. I was unable to find an existing article about this topic.

Thanks!

Hello,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

This is for blog page:

body.blog div#content {
    background-color: rgba(204, 255, 204, 0.5);
}

body.blog div#content div.container.content-wrapper,
body.blog div#content div.container.content-wrapper div#secondary {
    background-color: transparent;
}

This is for single posts:

body.single-post div#content {
    background-color: rgba(204, 255, 204, 0.5);
}

body.single-post div#content div.container.content-wrapper,
body.single-post div#content div.container.content-wrapper div#secondary {
    background-color: transparent;
}

You can replace rgba(204, 255, 204, 0.5) with your own color code. You can use a color picker, for example this:
http://www.w3schools.com/colors/colors_picker.asp
rgba color code includes transparency, you can learn more about it here:
http://www.w3schools.com/cssref/css_colors_legal.asp

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thanks Roman,

  1. It worked for the general background worked. However now the full page width has that color, instead of just the row width. Can I apply this setting also to just the row (as the original white color did) ?

  2. With your code I did not manage to change the background of individual posts. Any ideas?

Thanks

Hello,

Can you please provide some explanatory screenshots and a link to your website?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

Hello,

My website is now live/online. You find my blog page here.

I managed to changed the background color, but the color is applied to the full width of the page whereas I want it to be applied to the row width only (as the original white background did).

Can that be done?

Hello,

I’m still not sure what exactly you want to achieve. Can you please provide explanatory screenshots?

Kind Regards, Roman.

OK, see the attached screen shot here.

On the top you see the blog page with the light blue background all the way from left to right.

At the bottom you see any other page, where the light blue background is limited to the row width only. I like to have the same effect on the blog page, as well as on the page for individual post display. Is that possible?

Hello, please try to use this CSS code instead of previous:

body.blog div#content div.container.content-wrapper,
body.blog div#content div.container.content-wrapper div#secondary {
    background-color: rgba(204, 230, 255, 0.8)
}

body.single-post div#content div.container.content-wrapper,
body.single-post div#content div.container.content-wrapper div#secondary {
    background-color: rgba(204, 230, 255, 0.8)
}

.widget_search form.search-form input.search-field {
    width: 100%;
    margin-top: 15px;
}

Kind Regards, Roman.

Thanks,

It works for the blog page, but funny enough not for the single posts.

For single posts, the background has now disappeared completely…

René

It happens because you have left this CSS code:

body.single-post div#content div.container.content-wrapper,
body.single-post div#content div.container.content-wrapper div#secondary {
    background-color: transparent;
}

Kind Regards, Roman.

Sorry about that, all perfect now, thanks!

That’s okay, you are welcome!

Kind Regards, Roman.

Hi,
I would like to change the background color of my site http://www.bonolloingegneria.it/

Thanks

done