WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
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.
To adjust the space above the site title in the Twenty Eleven theme, try this:
designsimply#site-title {
padding-top: 1em;
}Adjust the 1em to the spacing you want.
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?
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
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.
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
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.
Is this what I'm looking for?
#branding hgroup {
margin:0 4.6%;
}
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?
I got the left margin by changing the following:
From:
#branding hgroup {
margin:0 4.6%
To:
#branding hgroup {
margin:0 0.6%
:) happy ..
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
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...
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.
This topic has been closed to new replies.
