WordPress.org

Ready to get started?Download WordPress

Forums

Adding a Tagline to Blog Title (5 posts)

  1. wildapple
    Member
    Posted 9 years ago #

    In General Options, I added a tagline to my title, but it doesn't seem to come through on my blog. I have no trouble writing to blog...any suggestions.

  2. lane
    Member
    Posted 9 years ago #

    Put this in your index.php file where you want the tagline to appear:
    <?php bloginfo('description'); ?>
    Reference:
    http://wiki.wordpress.org/bloginfo

  3. skchary
    Member
    Posted 9 years ago #

    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!

  4. Anonymous
    Unregistered
    Posted 9 years ago #

    Hi, Skchary,
    thanks for your explanation for the tagline. That worked fine. I deeply appreciated to have that precise instruction. I would just like to add one further note
    I did one modification as my colour and font for the tagline clashed with the colour for the date. So I created headline 4 in wp-layout.css
    h4 {
    border-bottom: 1px dotted #ccc;
    font: 80% verdana, arial, sans-serif;
    letter-spacing: 0.2em;
    margin: 20px 0 2px 0;
    padding-bottom: 2px;
    text-align: left;
    color: #ffc;
    }
    (in case anyone needs this too, just add it under h2 and h3 and change the font and color according to your needs)
    In index.php, locate <h1 id="header">" a ?></h1> and
    add/paste into the next line
    <h4 id="tagline"><?php bloginfo('description'); ?></h4>
    If you want to see how it looks like check http://www.visioform.com/wpde/index.php
    That's it
    Thanks for the support
    Ulla at visioform

  5. MichaelD
    Member
    Posted 9 years ago #

    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...

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.