Background Color of Text Area (17 posts)

  1. Anonymous
    Posted 7 years ago #

    I have installed a background image for the entire page, but I would like to have the text area background a plain off-white color.

    WordPress Classic 1.5 by Dave Shea

    body {
    background: #fff;
    border: 2px solid #565;
    border-bottom: 1px solid #565;
    border-top: 3px solid #565;
    color: #000;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    margin: 0;
    padding: 0;

  2. chaoskaizer
    Posted 7 years ago #

    add the below css code at the bottom most of your stylesheet.

    textarea{background-color:#fff !important}
  3. Bragoon
    Posted 6 years ago #

    I too would like to do this and the codex seems to be lacking. I don't understand what chaoskaizer is trying to say. Could you clarify? Thanks!!

  4. artbizness
    Posted 6 years ago #

    Hello people!

    Well, I've solved most things on my own so far with the help from this excellent forum, but this issue finally made me register so I could post something! :-D

    Yep, I've got the same problem, as 'Anonymous', and chaoskaizer's code didn't work for me.

    Here's my website:


    As you can see, the text is unreadable. I'd like some white blocks just behind the text blocks and sidebars only, so that I can retain the main background image overall.

    Anyone got any ideas?

    Thank you :-)

  5. selfmade64856
    Posted 6 years ago #

    - artbizness -
    Not sure I follow, I can read your text just fine....could you elaborate on your problem? Or did you already solve the issue?

  6. artbizness
    Posted 6 years ago #

    I've been trying to put background color code in the right place for the past half hour, so you may have caught it in one of those moments.

    But it still doesn't look right.

    I've put it back to how it was. You can read the text, but it's hard because of the background image. So what I would like is some white behind the text, headers, and sidebars, to block out the background image just in the places where there is text.

  7. selfmade64856
    Posted 6 years ago #

    gotcha...taking a look now ;)

  8. selfmade64856
    Posted 6 years ago #

    almost have it all...few more minutes

  9. selfmade64856
    Posted 6 years ago #

    ok, so you have to add a couple of attributes to your style.css file. Here it goes,
    Starting at line 170, just add or edit the bold line and add whatever color in the #000000 value -

    #contentleft {
    background: #000000;
    float: left;
    width: 476px;
    padding-left: 10px;
    margin-bottom: 30px;

    Starting at line 260, just add or edit the bold line and add whatever color in the #000000 value -

    #sidebarleft ul li a, #sidebarright ul li a, #footer ul li a {
    background-color: #000000;
    display: block;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    padding: 10px 0px 10px 5px;
    border-bottom: 1px solid #e1e1e1;
    Starting at line 294, just add or edit the bold line and add whatever color in the #000000 value -

    ul li h2 {
    background-color: #000000;
    font-size: 1.4em;
    margin-top: 2.1em;
    margin-bottom: 0;
    padding: 0 0 0.7em 5px;
    border-bottom: 1px solid #e1e1e1;

    Let me know if that helps ;)

    Courtney Bostdorff

  10. artbizness
    Posted 6 years ago #

    AH! Badabing!

    You're a complete star. :-)

    Take a look - that's much more what I want. The only thing I can't work out is why the headers in the sidebars have that space above them - it looks a little weird.

    Also wondering if I add a little padding at the top and the right hand side of the text blocks, will I create more problems for myself (*cough* IE6 *cough*)?

  11. artbizness
    Posted 6 years ago #

    Also wondering - I'm happy to do as much tweaking as it takes to get it to look right, but at what point do you give up and look for a better template?!?

    It was the best one I could find, but I think I'm seeing why most of it was white. LOL

  12. selfmade64856
    Posted 6 years ago #

    ok.....one sec

  13. selfmade64856
    Posted 6 years ago #

    so add the following:

    after line 74 in 75 spot

    and remove the first 0 from line 301

    that should do it ;)

  14. selfmade64856
    Posted 6 years ago #

    Lol..just saw your other post....sometimes it's definitely better to find a different template. You can go through my templates here http://premium-wordpress-themes.sitesires.com/ to see the ones that we've basically debloggified and decrypted the footers and made all the themes widget ready and are now in the process of XHTML and CSS Validating. Let me know if you like one and I'll send you the files ;)

  15. selfmade64856
    Posted 6 years ago #

    I'm off to sleep! Ciao!

  16. artbizness
    Posted 6 years ago #

    OK, thanks for the help, but I think I've decided not to use a background image after all.

    I think that's the problem sometimes you want to try something just to see if it will look right, and you can't know until you've tried it.

    But thanks again - I think this will be useful for others who have the background text issue.

  17. t31os
    Posted 6 years ago #

    It's just a matter of applying the right CSS. The reason the codex doesn't really cover this is because CSS is soo widely documented already it would seem silly for WP to be teaching CSS.

    CSS is fairly simple though, so all i'd suggest for anyone having a problem is to make a detailed post with the problem and ALWAYS a link to your site. Most web developers or hobbists like myself have extensions that allow us to examine CSS on a page very easily, so finding the solution is a matter of peaking at the page for a few minutes, of course dependant on what you're trying to archieve...

    Nice to see all the solution was posted to... :) ...

Topic Closed

This topic has been closed to new replies.

About this Topic