I just posted pretty much the same question – mods feel free to delete the post titled “Another iNove Title Query”. If someone can answer this thoroughly then my thread will be redundant.
I’ve been able to remove the title & tagline (don’t ask me how, it was one of those things where I kept trying stuff until I got results.) Only the results are starting to bug me. There’s a little line of underscores that separates the title & tagline, and it still shows a tiny bit in my header.
So, answering the OP’s question will probably answer mine too. How can I find what’s generating that little line?
Look at your blog in a browser, and view the source code. You will see that the header and tagline and the div that holds them have named classes and IDs. If I remember, I think it’s #caption, .tagline, and .title. Just use the source code as a referance. Then go into your style.css and find the header section. You will see the list of rules for the class and IDs. Add this:
font-size:0px;
Delete or change any previous font-size rules for those selectors that might be there.
Put it all three spots.
Then scroll up in the css a bit and find the rule that says something like border-top: #fff 1px. I removed the title but then couldn’t figure out what the line was, then I saw that rule. Just change it to 0px.
I did this last night on mine, http://www.chchng.com.
I hope that helps. Let me know.
Heres my css for the header section. The outlined text is what I edited.
/* header START */
#header {
background:url(img/header.gif) 0 0 no-repeat;
height:90px;
border-bottom:1px solid #A6A6A6;
}
#caption {
padding:25px 30px 0;
text-decoration:none;
font-size:0px;
}
#title a {
text-decoration:none;
font-size:0px;
/* color:#FFF; */
height:30px;
display:block;
font-family:”Trajan Pro”;
/* letter-spacing:0; */
}
/* image blog title */
/*
#title a {
background:url(img/title.gif) no-repeat;
text-decoration:none;
color:#FFF;
width:250px;
height:30px;
text-indent:-999em;
display:block;
}
*/
#tagline {
border-top:0px;
text-decoration:none;
font-size:0px;
float:left;
padding:0 3px;
}
#header .banner {
float:right;
padding:15px 15px 0;
color:#999;
}
/* header END */
Since posting here I’ve begun using Comicpress for a theme, so I no longer have that problem.
Thanks for posting anyway though. I’m just starting to understand certain elements of CSS like classes and IDs, so I found what you posted very helpful.
Will the above changes still leave the header as clickable, though?
I too have an image I’d like to use as a header, and I’ve set up “toggle text display” under “Customer Header”, but it’s driving me nuts not to be able to click on the header to go home.
Any suggestions, or should I start a new thread?
Thanks!
I am trying to simply relocate where the title and caption are located within the header, i.e. aligned to the left and at the bottom of the background image, is this possible?
