inserting social media icons below header in Forever theme

  • Author
    Posts
  • #889066

    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.

    #889238

    oh – and the blog I need information for is

    http://loverlyshe.com/

    NOT katieoverbeek.com That’s a separate one:)

    #889425

    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:

    #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.

    #889426

    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.

    #889459

    Thankyou SO much! this was so helpful:))

    #889463

    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.

    #889466

    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;
    }

The topic ‘inserting social media icons below header in Forever theme’ is closed to new replies.