Changing layout of social media icons on sidebar

  • Author
    Posts
  • #1310554

    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.

    #1310661

    timethief
    Member

    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>

    #1310663

    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

    #1310667

    timethief
    Member

    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.

    #1310668

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

    #1310671

    timethief
    Member

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

    #1310910

    bookellie
    Member

    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.

    #1310911

    justpi
    Member

    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 64×64, but the RSS icon will look larger, because it has a grey border around it while the others have white space.

    #1310913

    bookellie
    Member

    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.

    #1310915

    justpi
    Member

    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

    #1310916

    bookellie
    Member

    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!

The topic ‘Changing layout of social media icons on sidebar’ is closed to new replies.