Need help? Check out our Support site, then


Changing layout of social media icons on sidebar

  1. I've managed to get social media icons onto my blog using the image widget. What I don't like it the layout - they are in one long vertical line (in position 1, 2, 3, etc). I'd like to have them clustered together in the first position of the sidebar. (Changing the alignment doesn't help). Is this possible? Thanks in advance.

    Blog I need help with - http://behind-the-hedgerow.com

    The blog I need help with is behind-the-hedgerow.com.

  2. The sidebar width in Twenty Twelve is sidebar width is 250 pixels and the 7 images must be reduced in size to fit side by side in the sidebar.

    Use a text widget http://en.support.wordpress.com/widgets/text-widget/ and copy and paste the code below into it:

    <a href="http://www.bloglovin.com/blog/4869697"><img class="alignnone" title="Bloglovin'" alt="Bloglovin'" src="http://behindthehedgerowdotcom.files.wordpress.com/2013/06/03_bloglovin.png?w=48&h=25" width="25" height="25" /></a><a href="https://mail.google.com/mail/u/0/#inbox"><img title="Email" alt="Email" src="http://behindthehedgerowdotcom.files.wordpress.com/2013/06/03_email.png?w=48&h=25" width="25" height="25" /></a><a href="https://www.facebook.com/pages/Behind-the-Hedgerow/492232940822747?ref=hl"><img title="Facebook" alt="Facebook" src="http://behindthehedgerowdotcom.files.wordpress.com/2013/06/03_facebook.png?w=48&h=25" width="25" height="25" /></a><a href="http://www.flickr.com/photos/laurajanesharp/"><img title="Flickr" alt="Flickr" src="http://behindthehedgerowdotcom.files.wordpress.com/2013/06/03_flickr.png?w=25;h=25" width="25" height="25" /></a><a href="http://pinterest.com/laurajanefisher/"><img title="Pinterest" alt="Pinterest" src="http://behindthehedgerowdotcom.files.wordpress.com/2013/06/03_pinterest.png?w=25;h=25" width="25" height="25" /></a><a href="http://instagram.com/behindhedgerow"><img alt="" src="http://behindthehedgerowdotcom.files.wordpress.com/2013/06/03_instagram.png?w=48&h=25" width="25" height="25" /></a><a href="https://twitter.com/BehindHedgerow"><img alt="" src="http://behindthehedgerowdotcom.files.wordpress.com/2013/06/03_twitter.png?w=48&h=25" width="25" height="25" /></a>

  3. Thank you so much for your quick reply!! Amazing! I've done what you said and it's worked but they just look so teeny tiny! Is this the biggest they can be? Could you send me a similar code which spreads them out over two lines so therefore each icon is a bit bigger (and I think I'll take out the Email icon because I can't figure out what url to link it to)?
    Again, thanks in advance.
    x

  4. You can chnage the size of the images in the code and increase them. Fiddle around with increasing the numbers until you get the size you want that still fits in the sidebar in one line.

  5. Yes! I've done it! I can't thank you enough! It's exactly what I wanted but never thought I'd figure out.

  6. Hooray! That's great news. Best wishes with your blog.

  7. I'm having the same issue with my blog - thefundamentalalchemist.com

    At first I was trying to arrange by 4 social media icons in a square, 2 on top and 2 at the bottom, but one of them was always out of sinc. Now I've reduced the size to try and to get them in a single horizontal row but I still can't get it to work and I don't really want to go too much smaller than I already have.

    I'd be really grateful for any help.

  8. Your problem isn't the size, it's the alignment: you need to use image codes without alignment classes. If you want the images to be as large as possible, as close together as possible, and the whole group centered, use this:

    <div style="text-align:center;">
    <a href="https://www.facebook.com/TheFundamentalAlchemist" target="_blank"><img alt="Facebook Icon" src="http://fundamentalalchemist.files.wordpress.com/2013/07/facebook.png" /></a><a href="YOUTUBE_URL_HERE" target="_blank"><img alt="youtube5" src="http://fundamentalalchemist.files.wordpress.com/2013/07/youtube5.png" /></a><a href="https://twitter.com/fundalchemy" target="_blank"><img alt="Twitter Icon" src="http://fundamentalalchemist.files.wordpress.com/2013/07/twitter.png" /></a><a href="http://thefundamentalalchemist.com/feed/" target="_blank"><img alt="RSS Icon" src="http://fundamentalalchemist.files.wordpress.com/2013/07/rss.png" /></a>
    </div>

    • I corrected some other mistakes too.
    • Don't forget to add the YT URL where I'm showing.
    • The four images don't come from the same set. They're all 64x64, but the RSS icon will look larger, because it has a grey border around it while the others have white space.

  9. That was quick! Thank you very much.

    Is there any way to align the icons to the left without losing the square? At the moment it isn't in line with the rest of my widgets because it's centered. If there's no way to change this could you tell me the image code to have my icons in arranged horizontally instead?

    Thank you again.

  10. You're welcome.
    If you want the left aligned, remove this from the beginning:
    <div style="text-align:center;">
    and this from the end:
    </div>

    If you want them all in one row, turn each image URL from this:
    httpETCETC.png
    to this:
    httpETCETC.png?w=40

  11. Wonderful! I've been trying to figure that out all day and it was solved within a couple of hours of asking here.

    Have a great day!

Topic Closed

This topic has been closed to new replies.

About this Topic