CSS Ocean Mist theme trying to change colour of header
-
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?
-
-
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.
-
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;} -
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…
-
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.
-
Are you starting from scratch or adding to the existing stylesheet (i.e. which button do you have clicked)?
-
-
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?
-
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.
-
-
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?
-
And once you modify it you will have to upload it to the media library and then use the full URL.
-
what are you doing after you enter the code, are you previewing it or saving changes? And did you actually buy the CSS upgrade?
-
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.
-
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?
-
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.
-
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.
WordPress.com Forums 
