• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • 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.
  • 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

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

screenshot.png

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

    HTML:
    <!-- no selection -->
    Add before:
    HTML:
    <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.

    HTML:
    .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
 

Attachments