Make Social Media Icon Widgets Horizontal

• 

  ohchanti · Member · Nov 6, 2012 at 2:01 pm

  • Copy link
  • Add topic to favorites

  How can I make my social media icons go horizontal vs vertical? I added them as an “image” under my widgets. Should I have used another method to include these on my sidebar?

  http://ohchanti.wordpress.com/

  The blog I need help with is: (visible only to logged in users)

• 

  mrstevehyde · Member · Nov 7, 2012 at 3:33 pm

  • Copy link

  It’s a pain that single widgets create dead space… for wordpress.org there is a plugin called the “social sharing toolkit”, you can see a good example here

  I suppose another way would be to use a single text box widget and create the HTML that links to the self hosted images that themselves link to the social network pages, I think you are hosting them yourself anyway, stick them in your block and set up the images to link to the extrenals

• 

  mrstevehyde · Member · Nov 7, 2012 at 3:57 pm

  • Copy link

  Here is a copy of the code that I used, edit this and put it in a single text box widget

  LINKTOEXTERNALSERVICEFACEBOOKANDWHATNOT” target=”_blank”>
  <img src=”http://LINKTOIMAGE.png” border=”0″ style=”border:none;max-width:100%;” alt=”BLA” />
  
    < This puts a nice space between the icons
  Copy the above again, and repeat it for each service

• 

  mrstevehyde · Member · Nov 7, 2012 at 3:58 pm

  • Copy link

  ” ” < This puts a nice space between the icons

• 

  mrstevehyde · Member · Nov 7, 2012 at 3:59 pm

  • Copy link

  BALLSSSSSSSSSSSSSSSS

  & n b s p ; (remove spaces)

• 

  designsimply · Member · Dec 6, 2012 at 4:14 pm

  • Copy link

  To make the social icons you’ve added as image widgets to the right sidebar in the Comet theme, add this to your Appearance → Custom Design → CSS editor:

  #c3 .widget_image {
  	background: none;
  	float: left;
  	padding: 8px;
  }
  #c3 .widget:first-child {
  	margin-top: 10px;
  }

  Note that this will adjust all image widgets in the right sidebar, if you want to add more image widgets later and you don’t want the new ones to have collapsed spacing, then you can adjust the CSS to only affect specific image widgets. For now though, the CSS example above is quick and easy based on the content you’ve added so far.