Adding semi Transparent Layer to text area

If you post a link to your site, it would be easier to offer suggestions.

Also, I would suggest learning how to use a web debugging tool like Firebug (a free extension for Firefox) or Chrome Developer Tools, which comes built-in with Chrome. Those tools will help you see what CSS rules are being applied to different elements on the page, and you can interactively make changes before deciding on your final CSS.

Unfortunately, the Spun theme doesn’t have a custom CSS option, so if you have not yet created a child theme, then I would use a custom CSS plugin like Custom CSS Manager. Otherwise, you can add your custom CSS to the end of your child theme’s style.css file.

Assuming that you set the background image of the body element, the main elements that you want to alter are the page DIV (which holds the header, the main content area, and the footer) and the hentry DIV (holding the post/page content, contained several levels deep within the page DIV). So play around with the following combination of CSS rules:

#page {
   background-color: rgba(185, 185, 185, 0.7);
}
.hentry {
   background-color: rgba(250, 250, 250, 0.7);
}

You can use either or both rules for page and hentry. The parameters for the rgba function are red, green, blue, and opacity. The color values range from 0 to 255, with white being 255, 255, 255 and black being 0, 0, 0. This color picker will help you pick the correct values for the color/transparency that you want.

Lastly, other questions about the Spun theme can be posted on their support page.

hmm wow ! thats a lot of information ! thank you for that. Its quite daunting to customize themes.

I’ll have a look into it and get back here !

Right,

I am more concerned about the main body of the blog, i.e. the text within the posts/page content.

So from what I understand, the CSS rules ( code ? am from a OOPs background) can be directly written to the end of the CSS file. with modified variables of course ?

This would control the text background colouration. and it so holds true for other themes which don’t have this piece of rules written in the CSS file.

So from what I understand, the CSS rules ( code ? am from a OOPs background) can be directly written to the end of the CSS file. with modified variables of course ?

Yes. As long as you use a selector with a specificity that is equal to or greater than the CSS rule that’s in effect for an element, your CSS will override the other CSS rule as long as it comes after the other CSS rule.

This would control the text background colouration. and it so holds true for other themes which don’t have this piece of rules written in the CSS file.

Not necessarily for other themes, it just depends on what classes and IDs the theme developer has assigned to different elements in their web page. Some developers might assign an ID of sidebar to their sidebar, others might assign an ID of secondary; that’s why it’s important to become familiar with one of the web debugging tools I mentioned earlier.