CSS for social icon placement

  • Hi all. I’m looking to replace the canned RSS icon that came with my theme (Cellar Heat Dark) with my own row of RSS and other media icons.

    Here’s the CSS for the current:

    /* rss */

    .rss a {
    display:block;
    width:206px;
    height:68px;
    font-size:10px;
    overflow:hidden;
    text-indent:-300px;
    background:url(images/link-rss.gif) no-repeat 0 0;
    float:right;
    margin:80px 0 0 0;
    }
    .rss a:hover {
    background:url(images/link-rss.gif) no-repeat 0 -68px;
    }

    Now I don’t want the fancy hover, just placement of linked icons in a row. I have a Header, Index and a home noce of which seem to contain nay more code to support the above.

    Thanks for any help!

Viewing 3 replies - 1 through 3 (of 3 total)

  • If you want to replace the icon then simply replace the images/link-rss.gif to your own image. However, if you want to make a series of different icons, then you can copy the .rss a { … } and give it a different name such as .rss2, .rss-socialicon etc. Then copy/change the background:url(images/link-rss.gif) no-repeat 0 0; to other icon image such as background:url(images/link-socialicon.gif) no-repeat 0 0;
    After that find below line(not sure where the author place it-might be in your header.php or other pages)
    <span class=”rss”>….</span> and add a new one based on thats. For example: <span class=”socialicon”>….</span>

    Thread Starter twangnation

    (@twangnation)

    Thanks! The icons are not the same size as the original and it’s throwing off the font and page structure, I’ll tweak it with what you’ve offered though.

    Thread Starter twangnation

    (@twangnation)

    okay, given the <span class…> I’ve found I can’t make sense how to display or link the next icon (twitter.)

    Here what is in the Home.php:

    <span class=”social”>“>Syndication feeds available</span>

    So I’ve renamed the above /* rss */ to /* social */ and added:

    .rss a {
    display:block;
    width:128px;
    height:128px;
    font-size:10px;
    overflow:hidden;
    text-indent:-300px;
    background:url(images/rss.png) no-repeat 0 0;
    float:right;
    margin:80px 0 0 0;

    }

    .twitter a {
    display:block;
    width:128px;
    height:128px;
    font-size:10px;
    overflow:hidden;
    text-indent:-300px;
    background:url(images/twitter.png) no-repeat 0 0;
    float:right;
    margin:80px 0 0 0;
    }

    but no twitter icon is appearing and if it did, how do OI link it?

    Thanks for any help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS for social icon placement’ is closed to new replies.