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
Hi,
So, I know NOTHING about CSS :p
I am currently using the Forever theme.
I would like to put a line of social media icons centred right below the header on my blog, between the header and the line of text that lists my pages.
If possible, I'd also like to increase the size of the header and remove the border around it.
Help!
The blog I need help with is loverlyshe.com.
oh - and the blog I need information for is
NOT katieoverbeek.com That's a separate one:)
Welcome!
One way to approach adding social media icons would be to place them in a widget and then use absolute positioning to move them to another location on the page. Note that when using this method, if you adjust anything about the height of the header area later, you may also need to adjust the numbers in this block at that time too.
I noticed you already added some social icons in a text widget at the top of your sidebar. Here is one example of targeting that specific text widget, #text-3 in this case, and moving it higher up on your blog:
designsimply#text-3 {
position: absolute;
top: 420px;
overflow: visible;
}
#text-3 .textwidget {
margin-left: -465px;
}
#text-3 .textwidget a img {
border: none;
}This example pretty much overlaps the site description area on your blog, and so if you added a site description or tagline later, then you would also need to adjust the spacing for the social media icons to move them into a spot that fits better.
If possible, I'd also like to increase the size of the header and remove the border around it.
To remove the border from the header image, you can add this to your Appearance → Custom Design → CSS page:
#masthead img {
border: none;
}Coming in the next release of the core WordPress software, there will be a new way to adjust header sizes, but currently the only way to do that is to manually replace the header image with CSS. Here is an example for how to do that in the Forever theme:
First, create the header image with the proper dimensions you'd like to use on your computer, upload it to your media library, and copy down the image URL.
#masthead a img {
display: none;
}
#masthead {
padding-top: 30px;
}
#site-title + a {
display: block;
width: 885px;
height: YOUR_IMAGE_HEIGHT;
background: url(YOUR_IMAGE_URL) no-repeat;
}Replace YOUR_IMAGE_URL with your image URL, and replace YOUR_IMAGE_HEIGHT with your image height.
Note that whatever value you decrease the height by, you should also decrease the "top" value in the #text-3 block by the same amount if you used the previous example in this thread to move your social media icons.
Thankyou SO much! this was so helpful:))
One more question -
is there a way to put a bit more padding/space at the top of my blog posts?
The amount of space at the top of each post (between the header and the post title) is less than it is on the home page, causing my social media icons to squish into the post a bit.
Is there a way to put a bit more padding/space at the top of my blog posts?
Sure. To add extra space above the main content and sidebar on pages only, try adding this to the bottom of your Appearance → Custom Design → CSS:
#page #main {
margin-top: 40px;
}I also reviewed the "#text-3" and "#text-3 .textwidget" blocks and I think centering may work better (automatically) if you switch them to this:
#secondary #text-3 {
position: absolute;
top: 400px;
left: 0;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
#secondary #text-3 .textwidget {
display: inline-block;
margin-right: -1.615em;
}This topic has been closed to new replies.
