WordPress.org

Ready to get started?Download WordPress

Forums

WordPress › Support » Plugins and Hacks Icons/Links to social networking site (16 posts)

  1. avocado1
    Member
    Posted 3 years ago #

    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!

  2. 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;
    }
  3. avocado1
    Member
    Posted 3 years ago #

    Thank you for the reply!

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

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

  5. avocado1
    Member
    Posted 3 years ago #

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

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

  7. avocado1
    Member
    Posted 3 years ago #

    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?

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

  9. avocado1
    Member
    Posted 3 years ago #

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

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

  11. avocado1
    Member
    Posted 3 years ago #

    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?

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

  13. avocado1
    Member
    Posted 3 years ago #

    Thanks so much for your help!

  14. You're welcome!

  15. avocado1
    Member
    Posted 3 years ago #

    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?

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

Topic Closed

This topic has been closed to new replies.

About this Topic