1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

How to add Facebook and twitter icons in the navigation tabs

Discussion in 'Template Modifications [Archive]' started by Milad Kawas Cale, Oct 10, 2010.

  1. Hello

    Here's how to add Facebook and twitter icons in the navigation bar, simply we will add two tabs, each contains one icon.


    1. Upload the attached icons to your website.
    2. In the template `navigation` find:

      <!-- no selection -->
      Add before:
      <li class="navTab PopupClosed facebooktab"><a class="navLink" target="_blank" href="http://www.facebook.com/apps/application.php?id=152408338128365&v=wall">xenPlug.in at facebook.com</a></li>
      <li class="navTab PopupClosed twitterktab"><a class="navLink" target="_blank" href="http://twitter.com/xenPlugin">xenPlug.in at twitter.com</a></li>
    3. Change the HTML to add your info instead of ours, including URLs and forum title.
    4. Add the following to the end of the template `navigation.css` and don't forget to change the URL of the icons.

      .facebooktab a {
      	background: transparent url(http://www.example.com/images/facebook_icon.png) center center no-repeat;
       	text-indent: -9999px;
      .twitterktab a {
       	background: transparent url(http://www.example.com/images/twitter_icon.png) center center no-repeat;
       	text-indent: -9999px;
      The text-indent is used to hide the texts and show the icons only, so search engines will understand the link, while visitors will keep seeing a clean interface.

    How to add Facebook and twitter icons in the navigation tabs

    Attached Files:

  2. HoddzDJ

    HoddzDJ Active Member

    Very nice!! Looks clean and doesn't mess up anything on the navigation. May use this in the future!!
  3. lazer

    lazer Well-Known Member

    Simple and effective, thanks for sharing :)
  4. Carlos

    Carlos Well-Known Member

    I wanna see a youtube version!
  5. Blandt

    Blandt Well-Known Member

    and what's the functionality ? just redirect you to youtube?
  6. You can duplicate the HTML & CSS code and do easy relevant changes to them,
    I hope it's easy for you!
  7. Carlos

    Carlos Well-Known Member

    I could do that, but I need a nice YT logo, well, to match the other two. :/
  8. Blandt

    Blandt Well-Known Member

    then copy-paste and change the URLs ;)
  9. Google Image Search
  10. Carlos

    Carlos Well-Known Member

    Ahhh.....I see where you stole the images from. :p ;)
  11. Blandt

    Blandt Well-Known Member

    it's public domain ;)
  12. Carlos

    Carlos Well-Known Member

    Hey, hey, don't be dirty about public domain. ;)
    Blandt likes this.
  13. Blandt

    Blandt Well-Known Member

    Well this very picture of you (your avatar) is technically public domain ... :D (so does mine :oops:)
  14. kkm323

    kkm323 Well-Known Member

Share This Page