Custom header via CSS
-
I’m a WP-hosted blog w/edit CSS ability using Andreas09 theme.
My theme doesn’t support customizable headers through WP’s available tools but I have experimented with the CSS trying to use an image to replace the text that goes there by default. I can’t find a CSS rule that would place the image in the header area. Do you by chance know if that’s even possible on this theme?
The blog I need help with is: (visible only to logged in users)
-
First off you need to read this: http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/ and heed what it says. Never paste the entire CSS into the edit window at wordpress.COM.
The text for the header is in #sitename
#sitename { background: transparent url(URL_of_image) no-repeat scroll; }Do realize that with a flexible width theme header images are going to break at some point when the visitor’s browser window is set narrow, and the image will remain aligned with the left side as the theme is designed to float left.
-
@thesacredpath Thank you sir, good advice. I’m aware of the distinction between adding to the theme and starting from scratch and I suspected it should be in #sitename but didn’t figure out the syntax (background: …) that you’ve supplied. That gives me something to experiment with (clearly will need to play with it to minimize the width issue).
I appreciate your assistance!
-
-
I selected “resolved” too soon!
This technique works for getting the image in the banner all right, but making it transparent means the underlying text header w/color background also displays, makes a nice mess! I tried deleting all remaining #sitename rules but that didn’t help.
Is there a way to suppress display of the original header so that the image replaces it?
-
The following will turn the text transparent.
#sitename h1 a { color:transparent; }As far as the blue banded background in that area, that is part of the main background image, http://s3.wordpress.com/wp-content/themes/pub/andreas09/images/bodybg-isecore.jpg , which is 1px wide and 800px tall and declared in #container. If you hide it, then the theme completel falls apart and the background of the top and the sidebars become a medium grey.
Add the following to your CSS (or edit it) and preview to see what I mean.
#container { background:none; }Andreas09 is difficult to work with and it takes more photoshop work than actual CSS work to customize it.
-
Oops, you will have to add the following also to turn the tagline transparent as well
#sitename h2 { color:transparent; } -
Interesting!
Here’s what I came up with. The reason I wanted to do this is I desired the Matisse font for my title, but I know many people’s computers may not support that font. So I wanted to create an image of that banner showing the Matisse font and substitute the image for the original banner…it would otherwise look the same.
Using your technique above, I was able to do that, although the alignment is slightly off so you can see where the image is. I can probably get that even closer. I imagine it STILL may not look right on some browsers, depending on the resolution they’re viewing at.
I saved it for now so it’s viewable to the public when you visit my blog. What do you think?
-
You know, if you make the header image with a transparent background, then there won’t be the alignment issues since the blue banded background will show through.
With text and such (as long as their are no photographic elements or complex gradients or blends) save as PNG instead of JPG and the text will look cleaner since PNG does not anti-alias.
-
I’ll try that. I’m running into another problem though. Even though it’s displaying now after having saved the change, if I go back into edit CSS and run Preview before changing anything, the preview won’t show the image anymore. Don’t understand that.
-
If that happens, can’t you select “start from scratch” and paste in the original style sheet that has a link right there? Then after saving that, go in and “add to existing” with only the snippets you want to change?
-
If you use “add to existing…” you do NOT want to have the entire stylesheet pasted.
If you paste in the entire stylesheet and choose “start from scratch…” then all relative image links declared in the stylesheet will be broken and the images will disappear – the entire background will likely disappear for one. Each of those then have to be corrected so that they are “absolute.”
-
That’s confusing all right.
Okay, what I did was open the CSS editor, which showed the style changes I had made to get this far. Next, I deleted everything, then with “add to existing” selected, clicked Preview. I figure that should have shown me what I had previously saved. But it showed me the page as if I had never added the image, like the original stylesheet.
So I added in the changes again, hit Preview, and it still showed as if it was the original stylesheet.
Keep in mind I haven’t saved anything yet, other than the first one I wrote you about where it now displays the slightly offset image. But I’m hesitant to make any further saves until I get a handle on what’s going on with the preview business.
-
If there is nothing in the edit box, then there is nothing applied and the original stylesheet is applied with no changes.
With “add to existing…” selected, your changes are added loaded after the original stylesheet and override the original. That is why you want to add only your changes and not the entire stylesheet. Otherwise the browser has to go through and compare the stylesheet line by line to see what has changed, and in some instances that can cause things to blow up, not to mention it slows page loading times and wastes a good pile of processor cycles.
Paste only the things you have changed into the edit window. For what we have discussed above, that would be this:
#sitename { background: transparent url(URL_of_image) no-repeat scroll; } #sitename h1 a { color:transparent; } #sitename h2 { color:transparent; }Make sure to insert the URL for the image in the top background declaration.
-
Hmm. I THOUGHT that’s what I did but I must have messed something up, because it’s working this time! Interesting though…I made .jpg and .png versions just to see the difference, and the .jpg wouldn’t display as a transparent image in WP, even though I created both versions in Photoshop as transparent. It wanted to be white background. So thanks for the tip on .png too!
G’night, and thanks for bearing with me. Good karma on ya!
-
-
-
Sigh…another glitch has surfaced. Although this method works, it only works on the first edit. If I make any further additions to the CSS, the image in the header will no longer display. After pulling my hair trying to find out why, I discovered that if I upload a new image into the media library and point to that, it works again. ONE TIME ONLY. So for now, every time I edit the CSS, I also have to upload a new header image and change the URL in the CSS.
What in the world could cause that?
-
One thing I noticed, in the rule for the image, the system adds a single quote around the URL, so when I enter it as
#sitename {
background: transparent url(URL_of_image) no-repeat scroll;
}after I save it the system displays it as
#sitename {
background: transparent url(‘URL_of_image’) no-repeat scroll;
}but it doesn’t matter if I then save it with or without the quote, it won’t work a second time unless I upload a fresh image and use the new URL.
- The topic ‘Custom header via CSS’ is closed to new replies.
WordPress.com Forums 
