Tagline

[slappo]

I understand that to add the tagline, you add:
<?php bloginfo(‘description’); ?>
to the index.php. What I’d like to know is how to I make that description an object of the css so I can position it where I want, etc., etc.? I’m guessing from my extremely limited understanding of php that I need to add something like this:
<h1 id=”description”><?php bloginfo(‘description’); ?></h1>
but the problem with this is that it references the header (I think that’s what the h1 is doing)…I’m not a php programmer, so I don’t really know. Do I make a
#description
tag in the css? Or, is there a standard convention for this.
Thanks!

[lute]

You’re mixing PHP and CSS, but you’re on the right track. Keep this line in your template:
<h1 id="description"><?php bloginfo('description'); ?></h1>
And in your CSS file (wp-layout.css), change or add your h1 element to position and style your tagline. Keep in mind that you are styling and positioning all occurences of the h1 header tag, not just your tagline.

[lute]

EDIT to my advice: You can leave out the id="description" from that line. Styling h1 will take care of it by itself.

[slappo]

So, if I want to just make a distinct style for the tagline, do I do this:
<h(x) id=”description”><?php bloginfo(‘description’); ?></h(x)>
and then in css do this:
#h(x) {
blah blah blah
}
or
#description {
blah blah blah
{
This is where I get confused.

[Beel]

With a slight edit you could do it either way:
hx {} styles all hx’s
#description {} styles just the tag with the id=”description”

[skchary]

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!

[Beel]

Glad you got it to work. I went a simple route:
<h1 id="header">"><?php bloginfo('name'); ?>

<span><?php echo bloginfo('description'); ?></span></h1>
#header span { color: #F9F5E7; margin-top:-5px; font-size:14px;}