Custom header via CSS
-
I’ve seen times when the system did not put the single quote marks, and I’ve seen times it has. The system will scan for and fix some syntax errors when you save. If the syntax is correct you should not have to upload a new image. As long as the image exists in the media library – or somewhere on the net, and the URL is correct, it should work just fine.
There must be something else going on. Either a syntax error, or a glitch in the system. I tested on my test blog with your theme and with the code I gave you and then added some other code with changes, and did not have an issue.
You aren’t pasting all the CSS are you? You are just adding the bits you are actually changing, right?
-
Right, I’m not pasting all the CSS, only using the specific bits that need to be changed. The image is there in the library, I verified by using the image URL in the browser, it retrieves fine that way (http://groksurf.files.wordpress.com/2009/12/logo24.png). It just doesn’t want to work again from the blog if the CSS is subsequently edited. I don’t even have to subsequently edit it…I can simply open the editor and it automatically displays the specific edits that I made before before, click preview, and it won’t show it anymore.
Maybe it IS a glitch in the system, because I just made another discovery: I made a copy of the image available on the web at a different address and referenced that in the CSS. With that URL outside of WP, there’s no problem. So, it seems only when I get it from the WP image library does the problem crop up.
-
I simply cannot reproduce what you are describing. I put the following in (minus the last bit for “a”, saved and everything was fine. I then add the “a” color declaration, saved and it was fine. I then edited it and added the text-decoration declaration and it was fine. I then went back and added the #leftside/rightside stuff with the color declaration, saved and everything was fine.
#sitename { background:transparent url('http://groksurf.files.wordpress.com/2009/12/logo24.png') no-repeat scroll; } #sitename h1 a { color:transparent; } #sitename h2 { color:transparent; } a { color:red; text-decoration:underline; } #leftside h2, #rightside h2 { color:green; } -
I guess it just doesn’t like me.
On mine, the system also removes “scroll” from the end of the background declaration. That doesn’t seem to affect anything though.
The only other thought that comes to mind is that on the second edits that I’m talking about, I’m only talking about the preview. I was afraid to save it after the preview wouldn’t display it, and that’s where I resorted to uploading a fresh copy and referencing that, after which the preview would show it. Maybe if I save it even if the preview won’t show it, it would work. I guess the only way to find out is to try!
-
Come to think of it, there are times when working with regular posts, that preview misbehaves, sometimes opening up the page without showing the changes, sometimes not opening up in a new tab, that kind of stuff.
-
If I may interject, you don’t need the scroll value if you’re not repeating the background. Also, it’s of good practice to initialize the image background positions. I would write your #sitename selector definition like this:
#sitename { background: transparent url('http://groksurf.files.wordpress.com/2009/12/logo24.png') 0 0 no-repeat; }Also, the correct way to write the URL value is without single quotes. WP is the one that adds them… guess it’s because those values are stored in the DB.
I just skim through the thread, so excuse me if I’m repeating something that TSP already said.
-
I just discovered that Internet Explorer (using 8.0) ignores the CSS instruction to make h1 and h2 transparent and displays them in black over the image text. Ugly, and probably nothing to do about it, right?
-
-
Well, I should have thought of this before: in order to use an image in my title banner instead of the text there, it seemed I needed to make h1 (blog title) and h2 (tagline) transparent so that the image would display over them without interference…but that wasn’t necessary. All I needed to do is make the title and tagline fields empty in the dashboard settings!
Firefox, Opera, Chrome, and Flock had all correctly rendered those h settings transparently as specified, but discovering IE’s problem led me to this step which eliminates any chance of conflict, which seems the best way.
Thanks again.
-
Taking the title and tagline out at settings > general is not recommended. The search engines don’t like it very well and will not show the blog title in any search results (because it doesn’t exist where they can read it. If you look at the browser window title bar, all you will see is the URL for your blog.
Try replacing the “color:transparent;” with “display:none;” . Perhaps I was giving MS too much credit thinking that they would understand and correctly interpret that.
-
Good point about title in settings. After editing CSS per your suggestion I checked display with IE and now it obeys.
Every time you write something, I learn something new!
BTW, regarding the image appearing only once business…I confirmed that’s only an issue with preview. Once I do a save, there’s no problem.
Cheers, and happy new year!
- The topic ‘Custom header via CSS’ is closed to new replies.
WordPress.com Forums 
