How to align social icons horizontally and remove border?

Community Forums Forums Design Tips and Tricks How to align social icons horizontally and remove border?

This topic is: not resolved

This topic contains 11 replies, has 4 voices, and was last updated by  djw2 1 year, 10 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #8242

    djw2
    Participant
    Post count: 31

    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.

    #8249

    Riavon
    Participant
    Post count: 95

    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

    #8264

    Brian Bourn
    Participant
    Post count: 98

    This will probably work.


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


    Bourn Creative | bourncreative.com | Twitter

    #8290

    djw2
    Participant
    Post count: 31

    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.

    #8292

    AC
    Blocked
    Post count: 7712

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

    #8293

    AC
    Blocked
    Post count: 7712

    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?

    #8298

    djw2
    Participant
    Post count: 31

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

    #8299

    AC
    Blocked
    Post count: 7712

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

    #8308

    djw2
    Participant
    Post count: 31

    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>

    #8330

    AC
    Blocked
    Post count: 7712

    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.

    #8383

    Riavon
    Participant
    Post count: 95

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


    Twitter: @riavonentprises

    #8526

    djw2
    Participant
    Post count: 31

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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.