Not signed in (Sign In)

Categories

Welcome, Guest

Want to take part in these discussions? Sign in if you have an account, or apply for one below

RecentTags

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

This discussion has been inactive for longer than 90 days, and is thus closed.

Forum: [Closed] Remove extra white space between title and tagline

Bottom of Page

1 to 7 of 7

  1.  
    • CommentAuthorjcb86
    • CommentTimeOct 9th 2006
     permalink
    I just upgraded a blog to RC 4.2, and now there's extra white space between the title and tagline that wasn't there previously. I have the tagline below the title (with both aligned left).

    Inside custom.php, I have...

    <?php
    remove_action('display_tagline', 'display_tagline');
    remove_action('display_sitename', 'display_sitename');

    add_action('display_tagline', 'display_sitename');
    add_action('display_sitename', 'display_tagline');
    ?>

    How do I get rid of the extra white space between the title and tagline? I want the tagline directly below the title.
    • CommentAuthorDenis
    • CommentTimeOct 10th 2006
     permalinkBuy a Drink

    I recently changed the header's css to address a recurring question whereby the header image had some extra space below it. <g>

    add the following to your custom.css file:

    #header h1,
#header h2
{
  padding: 0px;
}

    D.

    • CommentAuthorjcb86
    • CommentTimeOct 10th 2006 edited
     permalink
    Thanks Denis. Problem solved.

    Just out of curiosity why not

    .custom #header h1,
    .custom #header h2
    {
    padding: 0px;
    }

    How do you know when to use ".custom" ?

    //Sorry for the ignorant question, but my knowledge of CSS is very limited.
    • CommentAuthorDenis
    • CommentTimeOct 10th 2006
     permalinkBuy a Drink

    It's an excellent question, rather than an ignorant one.

    Long story short, the Semiologic theme is css-based and controlled by a couple of classes that are placed in the body tag. This allows to select the font, for example, with a single class, e.g.

    <body class="verdana">

    would make the font verdana everywhere because of a declaration like:

    .verdana p
{
  font-family: Verdana, Hevetica, Sans-Serif;
}

    If you attempt to override the above using something like this:

    p
{
  font-family: Tahoma, Hevetica, Sans-Serif;
}

    Both the '.verdana p' declaration and the 'p' declaration apply everywhere. Of the two, the 'p' declaration is less specific, and is never applied as a result of this.

    If you add '.custom' to the 'p' tag declaration, you can override the default, i.e.:

    .custom p
{
  font-family: Tahoma, Hevetica, Sans-Serif;
}

    In the case of our h1 and h2 tags in the header, the same style applies for all layouts, all skins, all fonts. They are declared as '#header h1' and '#header h2', so there is no need to precede them with a '.custom'.

    I hope it all makes more sense to you now.

    D.

    • CommentAuthorjcb86
    • CommentTimeOct 10th 2006 edited
     permalink
    Much clearer now. Thank you Denis.
    • CommentAuthorjcb86
    • CommentTimeOct 11th 2006
     permalink
    Update: I wanted some space between the title and top of the browser (and also a small amount of space between the title and tagline), so I started playing around with the CSS.

    I have...

    .custom #header h2
    {
    text-align: left;
    padding:20px;
    font-size:14px;
    }


    .custom #header h1
    {
    padding:5px;
    margin-top: 10px;
    font-family: Times New Roman, Times, serif;
    font-size:24px;
    font-weight:bold;
    text-align:left;
    }

    Problem is, the left margin is not equal for both title and tagline. In fact, the tagline is further to the right than the title (just slightly--maybe 6 pixels or so?).

    What is causing the slight indentation of the tagline? How do I get the title and tagline to have the **same** left margin?
    • CommentAuthorjcb86
    • CommentTimeOct 11th 2006 edited
     permalink
    I figured it out! I had to use "text-align: left" for the skin, and that got rid of the left margin differences.

    Here's what worked for me (just in case anybody else is struggling)...

    .skin #header h1
    {
    text-align: left;
    }

    .skin #header h2
    {
    text-align: left;
    }


    .custom #header h2
    {
    padding-top:5px;
    font-size:14px;
    }

    .custom #header h1
    {
    font-family: Times New Roman, Times, serif;
    padding-bottom:10px;
    font-size:24px;
    font-weight:bold;
    }

    Problem solved. :-)

1 to 7 of 7

  1.  

This discussion has been inactive for longer than 90 days, and is thus closed.