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.

Social buttons in navbar

Discussion in 'Template Modifications [Archive]' started by lms, Nov 23, 2010.

  1. lms

    lms Well-Known Member

    [​IMG]
    FaceBook, Twitter, MySpace, StumbleUpon, reddit, delicious and Addthis connect. The more interesting of all is Addthis now that allows you to send 416 sites, including the previous.

    The code is the next:
    Code:
    <li class="navTab PopupClosed facebooktab"><a class="navLink" target="_blank" href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN"><img src="@imagePath/xenforo/social/facebook.png" width="16" height="16" alt="Compartir a Facebook" /></a><script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN&amp;v=wall" layout="button_count"></fb:like></li>
    <li class="navTab PopupClosed twitterktab"><a class="navLink" target="_blank" href="http://twitter.com/#!/soylms/xenfacil"><img src="@imagePath/xenforo/social/twitter.png" width="16" height="16" alt="Compartir a Twitter" /></a></li>
    <li class="navTab PopupClosed myspacektab"><a class="navLink" target="_blank" href="http://www.myspace.com/TU_ID_DE_USUARIO"><img src="@imagePath/xenforo/social/myspace.png" width="16" height="16" alt="Compartir a MySpace" /></a></li>
    <li class="navTab PopupClosed stumbleuponktab"><a class="navLink" target="_blank" href="http://www.stumbleupon.com/"><img src="@imagePath/xenforo/social/stumbleupon.png" width="16" height="16" alt="Compartir a Stumble It" /></a></li>
    <li class="navTab PopupClosed redditktab"><a class="navLink" target="_blank" href="http://reddit.com/submit" onclick="window.location = 'http://reddit.com/submit?url=' + encodeURIComponent(window.location); return false"><img src="@imagePath/xenforo/social/reddit.png" width="16" height="16" alt="Compartir a Reddit" border="0" /></a></li>
    <li class="navTab PopupClosed deliciousktab"><a class="navLink" target="_blank" href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="@imagePath/xenforo/social/delicious.png" width="16" height="16" alt="Compartir en Delicious" /></a></li>
    <!-- AddThis Button BEGIN -->
    <li class="navTab PopupClosed morektab"><a class="navLink" target="_blank" href="http://www.addthis.com/bookmark.php?v=250&amp;username=TU_USERNAME"><img src="@imagePath/xenforo/social/addthis_64.png" width="16" height="16" alt="Más..." /></a></li>
    <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=TU_USERNAME"></script>
    <!-- AddThis Button END -->
    
            <!-- no selection -->
    In the navigation template, just above
    Code:
    
            <!-- no selection -->
    And the navigation.css Template, at the end of the whole, add:
    Code:
    .facebooktab a {
        background: transparent url(@imagePath/xenforo/social/facebook_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    
    .twitterktab a {
         background: transparent url(@imagePath/xenforo/social/twitter_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    
    .myspacektab a {
        background: transparent url(@imagePath/xenforo/social/myspace_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    
    .stumbleuponktab a {
         background: transparent url(@imagePath/xenforo/social/stumbleupon_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    .redditktab a {
        background: transparent url(@imagePath/xenforo/social/reddit_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    
    .deliciousktab a {
         background: transparent url(@imagePath/xenforo/social/delicious_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    .morektab a {
         background: transparent url(@imagePath/xenforo/social/addthis_64_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    I create a directory in path root/styles/default/xenforo that name social (path sería root/styles/default/xenforo/social). upload attatches zip images to this directory.

    Salud2
     

    Attached Files:

    Marocinoh, Rob Fritz, R.J. and 4 others like this.
  2. Russ

    Russ Well-Known Member

    Looks good other than the facebook likes :) the spacing is a little out of place but overall great template modification :)
     
    Peggy likes this.
  3. Peggy

    Peggy Well-Known Member

    Yeah I don't like the FB likes either, but the rest looks great.
     
  4. lms

    lms Well-Known Member

    Delete this in first line:
    Code:
    <script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN&amp;v=wall" layout="button_count"></fb:like>
    Salud2
     
  5. manik

    manik Member

    Is this css the type i can add in the EXTRA.css ?
     
  6. Vincent

    Vincent Well-Known Member

    Yes, you can add all this in the EXTRA.css
     
  7. manik

    manik Member

    Thank you friend for the reply.
     
  8. lms

    lms Well-Known Member

    Yes, you can add in the EXTRA.css (beta 4) or in navigation.css templates (beta 4 or lower).

    Salud2
     
  9. ddmmh

    ddmmh Well-Known Member

    Does your method in post 1 work for beta 4?
     
  10. lms

    lms Well-Known Member

    Yes.

    Salud2
     
  11. Ryan Kent

    Ryan Kent Well-Known Member

    Is anyone using this code? It isn't working for me. I'm wondering if the issue is the last update seemed to be around Beta 4, or perhaps because the coding is in spanish.

    disregard, the pathing to the icons was using the @imagePath variable, and I have Flexile template so the path wasn't correct. Fixed and all is well.
     

Share This Page