Adding semi Transparent Layer to text area

  • sid5427

    (@sid5427)


    12 years, 4 months ago

    Hi guys

    I recently started using this theme – http://wordpress.org/themes/spun

    It’s quite nice and it has the option of adding a background image.
    I like using a black and white image. However this poses an issue since the text in blog posts and pages seem ineligible and overshadowed by the image.

    I want to either – change the color of the text as it is displayed on the pages (to maybe white ?)

    OR (best option)

    add a nice semi transparent dark background to the text area. to highlight the text

    any help as to how to do this ? I just can’t figure out where to start in the CSS file (if thats the correct way! )

    thanks !

Viewing 4 replies - 1 through 4 (of 4 total)
  • CrouchingBruin

    (@crouchingbruin)

    12 years, 4 months ago

    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.

    Thread Starter sid5427

    (@sid5427)

    12 years, 4 months ago

    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 !

    Thread Starter sid5427

    (@sid5427)

    12 years, 4 months ago

    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.

    CrouchingBruin

    (@crouchingbruin)

    12 years, 4 months ago

    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.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding semi Transparent Layer to text area’ is closed to new replies.