Need help? Check out our Support site, then


CSS Ocean Mist theme trying to change colour of header

  1. I am using the Ocean Mist theme, and there is a big grey block at the centre top of the page, over which the blog name appears. I want to change the colour of this block, but can't find the right place in the CSS. Can anyone tell me how to do this?

  2. we need a link to your blog.

  3. Although in my blog I haven't got the blog name in the usual place. They grey block I'm referring to is the one over which the words 'Imagine the set of all possible worlds… Which world do you want to create?' appear.

  4. the background is an image url so you'll have to change the background class in this part of the CSS.

    #header {position: relative; float: left; display: block; width: 750px; background: url(images/bg_header.gif) top no-repeat; min-height: 355px; padding: 0;}
    * html #header {height: 355px;}
  5. Thanks. I had tried this and just tried it again, using the following instead in my personal style sheet:
    #header {position: relative; float: left; display: block; width: 750px; background-color: white; top no-repeat; min-height: 355px; padding: 0;}

    But this doesn't change anything, the block is still grey...

  6. Ah, just noticed that this change creates small white extensions to the line just below the tabs, a few mm long, but this isn't what i want.

  7. Are you starting from scratch or adding to the existing stylesheet (i.e. which button do you have clicked)?

  8. I'm adding to the existing stylesheet.

  9. Hmm, just tried starting from scratch with a copy with only that HTML edited, and I end up losing a lot - all of the central column design. Perhaps I need to get hold of that image bg_header.gif and see if I can edit it graphically to replace only that panel, if it is one big image for the entire page background? Where would I find it?

  10. If you're adding to the stylesheet (which is by far the easiest thing to do), you probably don't need all that stuff in the code.

    Try this:

    #header {
    background-image:none;
    background-color:white;
    }

    But be aware that because the image is probably what gives the nice rounded corners and so on, it'll look messy. Probably what you'll need to do is create a replacement image file in the colours you want, upload that and stick the link in.

  11. I just changed background in #header to the following and the grey gif image disappears.

    #header {
            background:none;
    }
  12. Ros beat me to it.

  13. Thanks all, but for some reason it's still not working. I tried both Ros' and thesacredpath, but it didn't work for me (i.e., the grey box is still there).

    In any case, I do want a nice rounded image - do you know how I can get a copy of the image that is currently used so that I can edit it myself?

  14. http://s3.wordpress.com/wp-content/themes/pub/ocean-mist/images/bg_header.gif

    And once you modify it you will have to upload it to the media library and then use the full URL.

  15. what are you doing after you enter the code, are you previewing it or saving changes? And did you actually buy the CSS upgrade?

  16. Also, it may be worth clearing your browser's cache and cookies. It's possible that your browser is showing you an older version of the page.

  17. Thanks for the useful comments. I have only been using the preview at this stage, not saving the changes. I haven't bought the upgrade yet, but plan to. Does this affect how it looks?

  18. no cause the point of the preview function is to see what you were getting before you actually save it...I was just curious. I suggest you do what rosclarke said.

  19. It's still not working. I took the image, changed the grey part to white and then used the following css:
    #header {position: relative; float: left; display: block; width: 750px; background: url(http://allworlds.wordpress.com/files/2009/01/bg_header.gif) top no-repeat; min-height: 355px; padding: 0;}
    (applied on top of the original css).

    I also emptied the cache.

    It's still grey!

  20. I just did this using Firebug:

    #header {
    background:transparent url('http://allworlds.wordpress.com/files/2009/01/bg_header.gif') no-repeat scroll;
    }

    And got this: http://opposablethumbz.files.wordpress.com/2009/01/header1.png

  21. With wordpress.com CSS, you have to put the single quote marks at the beginning and end of the actual URL. I left the rest of the background definition the same as the original CSS (transparent, no-repeat and scroll).

  22. tsp is right. Also notice that in his code he doesn't repeat all the things you're not changing (position, float etc.) Sometimes problems occur when the same CSS is applied twice (from the edit box and the original stylesheet). It's safer only to include the things you are actually changing.

  23. Argghhh! I don't understand. I think I've done exactly what you said, but it makes no difference.

    I past the following in the css stylesheet editor (I'm also changing the colour of the tabs, that bit works):

    /*making the header a different colour...
    #header {
    background:transparent url('http://allworlds.wordpress.com/files/2009/01/bg_header.gif') no-repeat scroll;

    /* page tabs */
    #pagetabs li {float: left; border-bottom: 1px solid #9BC3D5; margin: 0 5px 0 0; padding: 0;}
    #pagetabs a {float: left; display: block; padding: 5px 5px 3px 5px; background: #9BC3D5; color: #fff; font-weight: bold; border-bottom: 2px solid #87CEFA;}

    Then I check 'Add this to Ocean Mist theme's CSS stylesheet.
    Then I delete temporary internet files in IE.
    Then I click Preview.

    And it's just the same!

    What am I don't wrong?

  24. btw, it pretty much always says 'Done but with errors on the page' when I do the preview.

  25. Eureka! Can you believe that it was because I hadn't closed the comment...

    Now it's all working - many thanks to you all.

    Kristin.

  26. Yup, that'll do it every time. Glad you got it fixed.

Topic Closed

This topic has been closed to new replies.

About this Topic