CSS Ocean Mist theme trying to change colour of header

  • Author
    Posts
  • #318124

    kmstock
    Member

    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?

    #318294

    aw1923
    Member

    we need a link to your blog.

    #318300

    kmstock
    Member
    #318301

    kmstock
    Member

    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.

    #318302

    aw1923
    Member

    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;}

    #318306

    kmstock
    Member

    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…

    #318308

    kmstock
    Member

    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.

    #318310

    rosclarke
    Member

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

    #318317

    kmstock
    Member

    I’m adding to the existing stylesheet.

    #318318

    kmstock
    Member

    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?

    #318322

    rosclarke
    Member

    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.

    #318323

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

    #header {
            background:none;
    }
    #318324

    Ros beat me to it.

    #318361

    kmstock
    Member

    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?

    #318366

    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.

    #318368

    aw1923
    Member

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

    #318377

    rosclarke
    Member

    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.

    #318406

    kmstock
    Member

    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?

    #318412

    aw1923
    Member

    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.

    #318486

    kmstock
    Member

    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!

The topic ‘CSS Ocean Mist theme trying to change colour of header’ is closed to new replies.