WordPress.org

Support

Support » How-To and Troubleshooting » WordPress › Support » Plugins and Hacks Icons/Links to social networking site

WordPress › Support » Plugins and Hacks Icons/Links to social networking site

  • Hi

    am so sorry if this is not in the right part of the forum, this is my first time here.

    I have built my site and am relatively happy.. I am trying to add some social networking icons to my header area (either in it or below it).. all the widgets I try seem to put them in a side bar.. but I want them vertically across, like a lower menu below my header or even better in my header.. can anyone help?

    My site is http://www.avocadochip.com/test

    Thank you so much if you can help me!

Viewing 15 replies - 1 through 15 (of 15 total)
  • Chris Olbekson

    @c3mdigital

    Level 12 Bug Squasher & Forum Moderator

    Instead of using <dl> tags use <ul> and <li> like this:

    <ul id="social_icons">
    <li class="twitter"><a href="http://twitter.com/your_username">Twitter</a></li>
    <li class="facebook"><a href="http://facebook.com/your_username">Facebook</a></li>
    <li class="myspace"><a href="http://myspace.com/your_username">MySpace</a></li>
    </ul>

    Then in your css

    #social_icons {
       display: inline;
       text-indent: -999em;
    }
    
    #social_icons li a {
       float: left;
       margin-right: 10px; /* adjust margins to your liking */
       list-style: none;
       height: 80px; /* use whatever height your icons are */
    }
    
    li.twitter a {
       background: url('path_to_twitter_icon.jpg') no-repeat;
    }
    li.facebook  a {
       background: url('path_to_facebook_icon.jpg') no-repeat;
    }
    li.myspace a {
    background: url('path_to_myspace_icon.jpg') no-repeat;
    }

    Thank you for the reply!

    Where abouts do I put the CSS coding? All very new to this!

    Moderator James Huff

    @macmanx

    Support Team Rep.

    Go to Appearance/Editor in you admin panel and select the Stylesheet.

    And when I get there where abouts should I enter the code?

    Moderator James Huff

    @macmanx

    Support Team Rep.

    Anywhere in the file. I recommend adding it to the bottom of the files, so you don’t lose track of it in case you need to alter it later.

    Thank you so much… when it says path_to_twitter_icon.jpg etc .. where do/how do I get these I cons.. and do I just take the URL and insert it?

    Moderator James Huff

    @macmanx

    Support Team Rep.

    url('path_to_twitter_icon.jpg') would probably be something like:

    url('http://www.avocadochip.com/test/path/to/your_twitter_icon.jpg')

    or:

    url('/path/to/your_twitter_icon.jpg')

    The same goes for the rest. It depends on where your image is located, it’s filename, etc.

    and should I download the icons I want then host them somewhere?

    Moderator James Huff

    @macmanx

    Support Team Rep.

    Find the images you want and upload them via an FTP or SFTP client (as long as they aren’t copyrighted).

    Im really sorry but I’m not sure what that means… do I need to host them on my site somewhere? I’m using cpanel to upload my site but its all done through wordpress… should I upload the images to my wordpress site?

    Moderator James Huff

    @macmanx

    Support Team Rep.

    Yes, you should probably upload them to your site. You can upload them via FTP, cPanel, WordPress, or whatever method of your choosing, as long as the files exist on your server and you can link to the via a URL.

    Thanks so much for your help!

    Moderator James Huff

    @macmanx

    Support Team Rep.

    You’re welcome!

    I’ve just tested this…

    #social_icons {
    display: inline;
    text-indent: -999em;
    }

    #social_icons li a {
    float: left;
    margin-right: 50x; /* adjust margins to your liking */
    list-style: none;
    height: 80px; /* use whatever height your icons are */
    }

    li.twitter a {
    background: url(‘path_to_twitter_icon.jpg’) no-repeat;
    }
    li.facebook a {
    background: url(‘http://avocadochip.com/test/?attachment_id=693’) no-repeat;
    }
    li.myspace a {
    background: url(‘path_to_myspace_icon.jpg’) no-repeat;
    }

    but the display still looks like this http://avocadochip.com/test/… ahhhh!! What am I doing wrong?

    Chris Olbekson

    @c3mdigital

    Level 12 Bug Squasher & Forum Moderator

    Here is the CSS that works. I just tested it with Firebug.

    #social_icons  {
    display:block;
    text-indent:-999em;
    list-style:none;
    }
    #social_icons li a {
    display:inline;
    float:left;
    height:60px;
    list-style:none;
    margin-right:10px;
    width:60px;
    }
    li.twitter a {
    background:url("http://xxxxxx.com/wp-content/uploads/2010/07/twitter.png") no-repeat;
    height:60px;
    }
    li.facebook a {
    background:url("http://xxxxxx.com/wp-content/uploads/2010/07/facebook.png") no-repeat;
    }
    li.myspace a {
    background:url("http://xxxxxx.com/wp-content/uploads/2010/07/myspace.png") no-repeat;
    }

    This was using The 60px x 60px Aquatis Social Icons licensed under Creative Commons available at: http://www.iconspedia.com/pack/aquaticus-social-1367/

    Use the WordPress media up-loader and copy and past the file url for each icon into your css.

    Here is a screenshot of what it looks like http://bit.ly/b3mTfT

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘WordPress › Support » Plugins and Hacks Icons/Links to social networking site’ is closed to new replies.