Adding space above Site Title – Twenty Eleven

monaleasaa · Member · Feb 17, 2012 at 5:59 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
designsimply · Member · Feb 17, 2012 at 10:37 pm
Copy link
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.
monaleasaa · Member · Feb 17, 2012 at 11:34 pm
Copy link
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?
monaleasaa · Member · Feb 17, 2012 at 11:38 pm
Copy link
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
designsimply · Member · Feb 17, 2012 at 11:46 pm
Copy link
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.
monaleasaa · Member · Feb 18, 2012 at 12:06 am
Copy link
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
designsimply · Member · Feb 18, 2012 at 12:11 am
Copy link
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
monaleasaa · Member · Feb 18, 2012 at 12:53 am
Copy link
Is this what I’m looking for?

#branding hgroup {
margin:0 4.6%;
}
monaleasaa · Member · Feb 18, 2012 at 1:02 am
Copy link
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?
monaleasaa · Member · Feb 18, 2012 at 1:06 am
Copy link
I got the left margin by changing the following:

From:

#branding hgroup {
margin:0 4.6%

To:

#branding hgroup {
margin:0 0.6%

:) happy ..
designsimply · Member · Feb 18, 2012 at 1:26 pm
Copy link
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
monaleasaa · Member · Feb 19, 2012 at 12:25 am
Copy link
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…
designsimply · Member · Feb 20, 2012 at 7:43 pm
Copy link
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.

No items found.