How to custom header height or size with CSS?
-
Hi everyone, sorry to have to do this! Have trawled the forums many times to find a way to custom my header height/SIZE.
Theme I am using: The Morning After by WooThemes
“A classic magazine theme featuring a custom menu, header and background”The images I am planning to use as my header over the next 1 year – uploaded into my wordpress media library Landscape example – http://loveyouwrongtime.files.wordpress.com/2011/04/img_3157.jpg
Portrait example – http://loveyouwrongtime.files.wordpress.com/2011/04/what-smells-e1302111164670.jpg“Just remember that after you get the paid CSS upgrade, you can no longer use the custom header uploader. You size your header to the exact size you need and then upload your image to the media library, get the URL of that image and then put that URL into the correct location in the CSS.”
*******************
The closest answer I have found informs that I cannot use the custom header uploader – ok cool – but I can’t find the right spot in my CSS code to paste the image URL into.
My problem: My theme’s CSS has many #header parts – #header #search_menu, #topbanner, etc.
1) Can anyone advise specific steps where exactly in The Morning After’s CSS sheet I should be pasting my new header URL,
2) is it done in the context of background image
ie change > background: url(images/bg/readon.png)
to > background: url(“http://loveyouwrongtime.files.wordpress.com/2011/04/img_3157.jpg”)
3) and do I need to change the dimensions anywhere after this?Really hope someone can help. Thanks!
The blog I need help with is: (visible only to logged in users)
-
The area for the header image is 960 x 70 px as designed, and your images are 640px wide and 330px wide respectively. They are not going to fill the entire space and in the case of the second one, only about a third of the space, which is going to look kind of funny. With the narrower image, you could tile it and have three copies of the image in the topbanner area. With the first image though, you would have about a third of the area that would just be blank.
#topbanner { background: url("URL of image here") no-repeat scroll 0 0 transparent !important; height: 70px; }The above would be what you would add to the CSS edit window and then adjust the height accordingly. If you wanted the image to repeat, then you would take “no-” off the front of “no-repeat” .
-
Hi sacredpath, thank you so much for the prompt reply. I managed to use your advice to make the change I was looking for – although it needs to be changed at 2 points and not only the 1 point as mentioned above. Thanks so much again!
(You’re right, the size is not ideal, I will get something designed at approx 960×400 which might look better but this will have to do in the meantime.)
BTW for anyone who is going through the same situation as I – for my theme, I had to play around with the code and make the changes at 2 portions before the picture showed up.
This is where I tweaked my CSS code –
#topbanner {
background: url(“http://loveyouwrongtime.files.wordpress.com/2011/04/img_3157.jpg”) no-repeat scroll 0 0 transparent !important;
height: 500px;}#topbanner {
border: solid #dadada;
border-width: 1px 0;
height: 500px;
}********************
Following this topic, I would also like to custom different headers to appear on the different pages. I searched “custom different headers for pages” on wordpress forum with no luck, can you advise how to do this or share a link if I missed a thread?
Do I need to change the individual parts of the CSS again to embed the different image url links? Hope I’m not out of line by asking a slightly different question. Thank you so much!
-
You have to target each individual page by page ID and create CSS for that page something like this:
.page-id-2 #topbanner { background: url("URL of image here") no-repeat scroll 0 0 transparent !important; }Here is a very important tip for you when doing CSS at wordpress.COM. Never paste the entire stylesheet into the CSS edit window. It will in most cases cause you nothing but grief and in some cases you end up losing a bunch of stuff that have relative URLs in the CSS.
Put only the specific selector, and then only the specific declaration you are actually adding or changing into the CSS edit window and make sure that “add to existing…” is selected.
-
The reason you had to put the height in in two places is due to the fact you pasted the entire stylesheet.
-
-
- The topic ‘How to custom header height or size with CSS?’ is closed to new replies.
WordPress.com Forums 
