Inserare sexy bookmarks

Am o problema mai complicata pe care nu cred ca multi se pricep.Deci,am instalat un sexy bookmarks adica un fel de mic meniu cu iconuri social gen facebook,youtube....Problema e ca dupa ce am instalat codurile am gasit doar o imagine si anume asta:

si nu la fiecare iconita cate o imagine.Intrebarea este cum face acest meniu sa recunoasca fiecare buton in parte adica daca eu sterg din css-ul acestul bookmark tot si mai las facebook ramane iconita cu facebook.Si vreau sa pun si eu o imagine pe care am facut-o eu.Dar trebuie sa pun vreun link ceva adica sa inserez vreun link in imagine ca altfel nu merge ca am incercat.?Pot sa las aici cu acordul unui moderator siteul de unde am luat meniul.Sper sa ma ajute cineva priceput.Daca nu ati inteles la ce ma refer lasati comment.

Bună seara,

Deci dvs. doriţi să schimbaţi fiecare icon în parte sau să îl personalizaţi după bunul plac, nu? Dacă da, puteţi începe prin a posta aici toate codurile folosite.

Keir,eu am o imagine la fel ca aia din post cu 3 iconuri.Si vreau sa o pun pe aia pe care o am in locul celei de mai sus.Dar nu merge ca trebuie sa aiba link inserat nustiu cum...Poti sa ma ajuti?As putea sa pun si fiecare icon in parte dar cum?


Am bagat asta in mesaj pe pagina de start:

Cod:

<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-knowledge">
<ul class="socials">
      <li class="shr-comfeed">
        <a title="Subscribe to the comments for this post?" class="external" rel="nofollow" href="http://albforum.forumotion.net/"> </a>
      </li>
      <li class="shr-delicious">
        <a title="Share this on del.icio.us" class="external" rel="nofollow" href="http://albforum.forumotion.net/"> </a>
      </li>
      <li class="shr-twitter">
<a target="_blank" href="http://albforum.forumotion.net/" title="Tweet This!" ca_clicked="1"> </a>
      </li>
      <li class="shr-facebook">
<a class="t" target="_blank" title="Share this on Facebook" lnp="2" href="http://www.facebook.com/"> </a>
      </li>
      <li class="shr-gmail">
        <a title="Email this via Gmail" class="external" rel="nofollow" href="http://albforum.forumotion.net/"> </a>
      </li>
      <li class="shr-digg">
        <a title="Digg this!" class="external" rel="nofollow" href="http://albforum.forumotion.net/"> </a>
      </li>
      <li class="shr-diigo">
        <a title="Post this on Diigo" class="external" rel="nofollow" href="http://albforum.forumotion.net/"> </a>
      </li>
      <li class="shr-googlebuzz">
        <a title="Post on Google Buzz" class="external" rel="nofollow" href="http://albforum.forumotion.net/"> </a>
      </li>
      <li class="shr-stumbleupon">
        <a title="Stumble upon something good? Share it on StumbleUpon" class="external" rel="nofollow" href="http://albforum.forumotion.net/"> </a>
      </li>
      <li class="shr-technorati">
        <a title="Share this on Technorati" class="external" rel="nofollow" href="http://albforum.forumotion.net/"> </a>
      </li>
</ul><div style="clear:both;"></div>
</div>

Si in css am bagat asta:

Cod:

div.shr-bookmarks {
    clear: both !important;
    margin: 20px 0;
}
div.shr-bookmarks-expand {
    height: 32px;
    overflow: hidden;
}
div.shr-bookmarks ul.socials li {
    background-image: url("http://www.handycss.com/wp-content/plugins/sexybookmarks/spritegen/shr-custom-sprite.png") !important;
    background-repeat: no-repeat !important;
}
div.shr-bookmarks-bg-knowledge {
    background: url("http://www.handycss.com/wp-content/plugins/sexybookmarks/spritegen/../images/share-knowledge.png") no-repeat scroll 0 0 transparent !important;
    padding: 35px 0 0 10px !important;
}
div.shr-bookmarks ul.socials {
    float: left !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
div.shr-bookmarks ul.socials {
    background: none repeat scroll 0 0 transparent !important;
    border: 0 none !important;
    outline: 0 none !important;
}
div.shr-bookmarks ul.socials li {
    background-color: transparent !important;
    border: 0 none !important;
    clear: none !important;
    cursor: pointer !important;
    display: inline !important;
    float: left !important;
    height: 29px !important;
    list-style-type: none !important;
    margin: 3px 0 0 !important;
    outline: 0 none !important;
    padding: 0 !important;
    width: 60px !important;
}
div.shr-bookmarks ul.socials li:before, div.shr-bookmarks ul.socials li:after, div.shr-bookmarks ul.socials li a:before, div.shr-bookmarks ul.socials li a:after {
    content: "" !important;
}
div.shr-bookmarks ul.socials a, div.shr-bookmarks ul.socials a:hover {
    background-color: transparent !important;
    border: 0 none !important;
    display: block !important;
    height: 29px !important;
    text-decoration: none !important;
    text-indent: -9999px !important;
    width: 60px !important;
}
div.shr-bookmarks ul.socials a:hover, div.shr-bookmarks ul.socials li:hover {
    background-color: transparent !important;
    border: 0 none !important;
    outline: 0 none !important;
}
li.shr-comfeed {
    background-position: 0 bottom !important;
}
li.shr-comfeed:hover {
    background-position: 0 top !important;
}
li.shr-delicious {
    background-position: -60px bottom !important;
}
li.shr-delicious:hover {
    background-position: -60px top !important;
}
li.shr-twitter {
    background-position: -120px bottom !important;
}
li.shr-twitter:hover {
    background-position: -120px top !important;
}
li.shr-facebook {
    background-position: -180px bottom !important;
}
li.shr-facebook:hover {
    background-position: -180px top !important;
}
li.shr-gmail {
    background-position: -240px bottom !important;
}
li.shr-gmail:hover {
    background-position: -240px top !important;
}
li.shr-digg {
    background-position: -300px bottom !important;
}
li.shr-digg:hover {
    background-position: -300px top !important;
}
li.shr-diigo {
    background-position: -360px bottom !important;
}
li.shr-diigo:hover {
    background-position: -360px top !important;
}
li.shr-googlebuzz {
    background-position: -420px bottom !important;
}
li.shr-googlebuzz:hover {
    background-position: -420px top !important;
}
li.shr-stumbleupon {
    background-position: -480px bottom !important;
}
li.shr-stumbleupon:hover {
    background-position: -480px top !important;
}
li.shr-technorati {
    background-position: -540px bottom !important;
}
li.shr-technorati:hover {
    background-position: -540px top !important;
}

Si merge dar eu vreau sa pun alte iconuri.Cum fac?

Bun. În momentul actual, "meniul" are această imagine: http://www.handycss.com/wp-content/plugins/sexybookmarks/spritegen/shr-custom-sprite.png . Dvs. o puteţi modifica din codul acesta:

Cod:

div.shr-bookmarks ul.socials li {
    background-image: url("http://www.handycss.com/wp-content/plugins/sexybookmarks/spritegen/shr-custom-sprite.png") !important;
    background-repeat: no-repeat !important;
}


, respectiv:

Cod:

div.shr-bookmarks ul.socials li {
    background-image: url("AICI LINK IMAGINE") !important;
    background-repeat: no-repeat !important;
}

Dvs. trebuie să respectaţi doar dimensiunile imaginii şi modul de afişare al icon-urilor din ea.

Multumesc mult.Chiar nu mai stiam.Puteti inchide.

Cu plăcere. Întotdeauna când vine vorba de probleme legate de fundal, icon-uri, răspunsul se găseşte mereu în script-urile respective. Numai bine!