Adding space above Site Title – Twenty Eleven

  • Author
    Posts
  • #826773

    monaleasaa
    Member

    I would like to reduce the space between the top of the page and the site title… I have read numerous related subjects but can’t find the code, would you mind helping me out? Thanks,

    Reducing the spacing between page and site header

    The blog I need help with is monaleasaa.wordpress.com.

    #826993

    To adjust the space above the site title in the Twenty Eleven theme, try this:

    #site-title {
      padding-top: 1em;
    }

    Adjust the 1em to the spacing you want.

    #827043

    monaleasaa
    Member

    Sorry , but that didn’t work…. question.. do I paste the code at the top of the page or down near the firs “site” reference?

    #827050

    monaleasaa
    Member

    FOUND it ….

    changed this:

    #site-title {
    margin-right:0;
    padding:4.95625em 0 0;
    }

    to this:

    #site-title {
    margin-right:0;
    padding:1.95625em 0 0;
    }
    ;) happy

    #827058

    Nice work!

    padding: 1.95625em 0 0; and padding-top: 1.95625em; should do the exact same thing by the way. The rule that I added should also work.

    #827070

    monaleasaa
    Member

    now I want to move the site title a little more to the left, so my question is:

    am i looking for the reference

    #site-title{
    margin-left:VALUE
    padding:VALUE
    }

    LOL… don’t tell me, i just need a hint as to what I’m looking for and then I want to try to take it from there…lol

    #827072

    In the case of your theme, Twenty Eleven, that particular space to the left of the site title is actually set on the “#branding hgroup” selector, and it’s using the shorthand version of the margin property.

    See http://www.w3.org/TR/CSS2/box.html#propdef-margin

    #827082

    monaleasaa
    Member

    Is this what I’m looking for?

    #branding hgroup {
    margin:0 4.6%;
    }

    #827083

    monaleasaa
    Member

    I’m confused… In the box model it states that the example shows 3 values yet it states that they refer to 4 values:

    body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

    I don’t understand where the 4th value comes from?

    #827084

    monaleasaa
    Member

    I got the left margin by changing the following:

    From:

    #branding hgroup {
    margin:0 4.6%

    To:

    #branding hgroup {
    margin:0 0.6%

    :) happy ..

    #827105

    This is just one example showing what happens if there are three values. You can actually have one, two, three, or four values.

    When there are three values, then the 2nd value is used for right and left:

    body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

    If there are four values, then the values work clockwise like this:

    body { margin: 1em 2em 3em 4em } /* top=1em, right=2em, bottom=3em, left=4em */

    You might like this site where you can test out changes on the page:
    http://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides

    #827132

    monaleasaa
    Member

    Perfect… thanks… So, if I understand it, it doesn’t matter where the code is located as long as the instructions are “correct” it will go where its coded to go! (If that makes sense) lol

    I will use this w3schools a lot… cheers…

    #827145

    It does matter what order the code is in. If you add two rules that are the same specificity (meaning the same level), then the latest one is used. So, adding new CSS to the very end of your custom CSS edits is probably the best way to do it.

The topic ‘Adding space above Site Title – Twenty Eleven’ is closed to new replies.