How to align social icons horizontally and remove border?

[djw2]

How can I align these social icons horizontally and also remove the image border just for these icons, while keeping the border for all other images still intact?

The social icons I am referring to are in the sidebar here, http://darlingchampagne.com/

 

Here is the css I am using;

ul#social-networking{

margin: 0px 0 0 0;
text-align:center;
display:block;
float:left;
padding:0px 0px 0px 0px;
font-size:12px;
}

#social-networking li {
margin: 0;
padding: 0;
list-style: none;
}

#social-networking li, #social-networking a {
width: 55px;
height: 55px;
display: block;
float: left;
}

Thanks.

[Riavon]

Are you using a plugin to generate those styles? I looked at your site with Firebug and your style code isn't there. The icons are being generated as a regular sidebar list and images using the child theme's defaults.

---

Twitter: @riavonentprises

[Brian Bourn]

This will probably work.


#social-networking ul {
display: inline-block;
}
#social-networking img {
border: none;
}


---

Bourn Creative | bourncreative.com | Twitter

[djw2]

I am using the Scribble theme and not using plugins to generate the code. I've added a text widget in the sidebar with a div. The images were added to the media library and I've added the img src in the text widget.

Brian, I tried the style you gave me, but they didn't help. Still have border around the images and icons are still vertical. I have tried every conceivable variation and 'tweak', but nothing will change, for some reason.

[AnitaC]

Where have you placed the CSS you have above? I cannot see that code using Firebug.

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

Did you add a class to the social icons that leads them back to the CSS? Or did you merely add the src to the images?

---

Need help with customization or troubleshooting? Reach out to me.

[djw2]

I placed the css code in the style.css (via ftp) file.

[AnitaC]

How did you code the text in the text box? Can you paste it here?

---

Need help with customization or troubleshooting? Reach out to me.

[djw2]

Here is the code I have in the text box;

 

<div id="social-networking">
<ul>
<li><a href="https://twitter.com/DarlingChampagne" target="_blank" /><img src="http://darlingchampagne/files/2012/12/twitter-icon.png" /></a> </li>
<li> <a href="https://www.facebook.com/pages/Darling-Champagne/461867817203453" target="_blank"><img src="http://darlingchampagne/files/2012/12/fb-icon.png"></a> </li>
<li> <img src="http://darlingchampagne/files/2012/12/pint-icon.png"> </li>
<li> <img src="http://darlingchampagne/files/2012/12/yt-icon.png"> </li>
</ul>
</div>

[AnitaC]

Here are instructions you can use to create a custom menu to place your icons. This might work better for you.

Insert this into your CSS. Note - these are examples - replace the URLs to the location of your own social media icons. You should also adjust the margins, paddings, etc., to work exactly how you need them in your theme, but this will give you a start.

/* Social Media Icons
------------------------------------------------------------ */

.widget-area .social {
float: left;
margin: 0 0 10px;
width: 88px;
}

.widget-area .subscribe {
background: url(images/subscribe.png) no-repeat left center;
padding: 4px 5px 4px 37px;
}

.widget-area .twitter {
background: url(images/twitter.png) no-repeat left center;
padding: 4px 5px 4px 37px;
}

.widget-area .facebook {
background: url(images/facebook.png) no-repeat left center;
padding: 4px 5px 4px 37px;
}

.widget-area .contact {
background: url(images/contact.png) no-repeat left center;
padding: 4px 5px 4px 37px;
}
}

Go to Dashboard -> Menus, look at the top right corner for Screen Options. Check the box "CSS Classes".

Click the (+) sign to create a new tab/menu - label it Social Media and Save.

Now let's begin to add each social icon.

We'll start with Facebook. On the left - Click the Custom Menu. Add the URL to your Facebook account and add Facebook to the Label. Save, then drag over to the new custom menu.

Open up that entry and look for CSS Classes. In that box type the two words - social facebook - then save.

Now repeat these steps for each one of your accounts, replacing the url, label and css (i.e., social twitter, social subscribe, social contact, etc.).

Once you have completed them - Go to Appearance-> Widgets, drag over the Custom Menu -> select the Social Media menu and save.

Credit for this instruction goes to the developer of the Studiopress theme "Pretty Young Thing". I tweaked it a little bit.

---

Need help with customization or troubleshooting? Reach out to me.

[Riavon]

Or, you could use the handy Genesis Social Profiles Menu plugin.

---

Twitter: @riavonentprises

[djw2]

@anitac, that worked, sort of, except for my spacing issues. The custom menu doesn't create a box in the sidebar like the other widgets.  I haven't yet figured out how to make it appear with the grey box like the others. Thanks for the help with the code and custom menu idea.

The only thing I am left wondering is if this can be done without the custom menu 'label'. I tried removing it, but it then deleted the entire menu contents, so apparently labels are important for this to work with WordPress. I do like the look a little better without the words along with the social media icons, but at least the icons are now aligned properly and no longer have the image border.

@Riavon, I might give that plugin a try, just to see how it works on a different blog.

Thank you.

[Author]

Posts