Adding a Tagline to Blog Title

Here is what I did to accompolish this, see if this helps. I have the out-of-the-box installation of wordpress and have not change either the stylesheet or the templates. So if you have changed any of that, your css and index.php may be different from what i have shown here. But the concept is still true, if you can understand it 🙂
First of all, the problem is with the style sheet definition for the blog title header. It occupies the entire block of space at the top of the page. No matter what you add after the tag <h1….>…</h1> its only going to appear after that block looking awkward.
First step, is to edit the header css definition, add a new “tagline” definition and then finally add the html entry for the blog description.
You need to edit your wp-layout.css file to accompolish this! Open that file and scroll down and locate the #header definition. You may have to ftp it out, edit it, save it and then ftp it in.
My original header css definition looks like this :
#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}
DO THIS : Remove border-bottom, change the 3rd “15 px” padding to 0px.
WHY? removing border-bottom will take off the unnecessary line between tagline and blog title. changing 15px to 0px gives the right amount of space between the tagline and blog title.
New header css definition :
#header {
background: #90a090;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 0px 60px;
}
———————-End of Step 1—————–
Add a new “tagline” definition thats exactly the same as the header with a small difference. Add this after the #header definition [ after the end braces and before the next definition starts ]
#tagline {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
font: italic normal 100% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 0px 10px 15px 60px;
}
WHY? This is to style the tagline. Here I changed the first 15px to 0px. I also removed the unnecassary border-top line between the tagline and blog title.
SAVE THE FILE wp-layout.css. SAVE THE FILE wp-layout.css. SAVE THE FILE wp-layout.css
———————-End of Step 2—————–
Open your index.php. Locate the following line about 30 lines down from the beginning of the file.
<h1 id=”header”>“><?php bloginfo(‘name’); ?></h1>
Just add/paste the following right next to it.
<h2 id=”tagline”><?php bloginfo(‘description’); ?></h2>
WHY? It defines a new line below the title and puts the blogs description as you have defined in your blog profile page. Simple.
SAVE THE FILE index.php. SAVE THE FILE index.php. SAVE THE FILE index.php.
—————–END—————————
Hit refresh/reload. Remember to close all browser windows and reopen them. The css file sometimes is cached. Your tag line should be displayed fine now. Check http://www.sudhar.com, I have done exactly as above. Hope this helps!

I tried this on the default template and got it to work just fine. Now I have changed to Alex King’s Dot template and I am only getting partial success. I can get the additional tagline space to show below my header with the proper color, but I can’t get my tagline to show. I have modified my index as mentioned.

My weblog is: http://www.memoriafoto.net

My CSS code now is (snip of relivant parts):
#header {
background: url(wp-images/memoriafoto.jpg) no-repeat;
background-position: bottom;
border: 1px solid #4B5340;
border-width: 0 1px 0px 1px;
color: #fff;
font-size: 24px;
height: 150px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
text-align: left;
top: 0;
width: 808px;
background-color: #346699;
}
#header a {
color: #fff;
letter-spacing: 0.2em;
display: block;
padding: 10px 10px 10px 10px;
text-decoration: none;
}
#header a:hover {
text-decoration: underline;
}
#tagline{
border: 1px solid #4B5340;
border-width: 0 1px 2px 1px;
color: #fff;
font-size: 18px;
height: 30px;
left: 0;
margin: 0;
padding: 0px 0px 150px 0px;
text-align: left;
width: 808px;
background-color: #346699;
}

Any suggestions appreciated…