• 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

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

  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

  • twitter_icon.webp
    twitter_icon.webp
    272 bytes · Views: 24
  • facebook_icon.webp
    facebook_icon.webp
    280 bytes · Views: 24
Top Bottom