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 Site Icons in footer "Share This Page"

Discussion in 'Template Modifications [Archive]' started by Mutt, Feb 27, 2011.

  1. Mutt

    Mutt Well-Known Member

    On the bottom left of most pages there's the "Share This Page" bar w/ links to Tweet & Like on FB but there's a whole bunch of open real estate to the right. I added some social site icons there & even though it's a little nothing template edit, I'm new & need to submit something just to get my feet wet. To make it a little nicer, I used the Xen tooltips.



    make a new template called social_icons
    <div style="float: right;">
    <ul class="socialicons">
    <li title="Find us on Facebook" class="Tooltip"><a href="http://www.facebook.com/xxxxxxxxxxxxx" target="_blank"><img src="@imagePath/social/24px/facebook.png" border="0" width="24" height="24"></a></li>
    <li title="Follow us on Twitter" class="Tooltip"><a href="http://www.twitter.com/xxxxxxxxxxx" target="_blank"><img src="@imagePath/social/24px/twitter-2.png" border="0" width="24" height="24"></a></li>
    <li title="Subscribe to us on YouTube" class="Tooltip"><a href="http://www.youtube.com/user/xxxxxxxx" target="_blank"><img src="@imagePath/social/24px/youtube.png" border="0" width="24" height="24"></a></li>
    Edit this to add your information & whatever sites/icons you want.

    I got the icons here. Dude has a tremendous collection & I'm sure you'll find what you are looking for. I found that the 24px icons fit the space well.

    upload the icons you are using & adjust the template so the IMG tags point to them. If you don't want to change the template, I have them in /styles/default/social/24px/ but you put em where you want them. (for future reference, is there a generally accepted spot for this kind of thing? there isn't exactly an image dir)

    open template EXTRA.css and add this
    .socialicons li {
    float: left;
    .socialicons img {
    height: 24px;
    width: 24px;
    open template share_page and just after

            <h3 class="textHeading larger">{xen:phrase share_this_page}</h3>
    add this
    <xen:include template="social_icons" />
    that's everything. like I said, I'm new so feel free to let me know if there a better way to do something.
  2. ddmmh

    ddmmh Well-Known Member

    Very very nice!
  3. Peggy

    Peggy Well-Known Member

    I like it! Very nice job on this.
  4. Crazyfruitbat

    Crazyfruitbat Well-Known Member

  5. Brogan

    Brogan XenForo Moderator Staff Member

    If you mean the optional text field which appears when you click on the Recommend button, that was fixed in RC3.

    You're still running RC2 so you need to upgrade to resolve that issue.
  6. Crazyfruitbat

    Crazyfruitbat Well-Known Member

    No, its not that - on my PC laptop the entire recommend tab is just blank, but looking on my mac it all looks fine - maybe something up with the browser, please ignore my comment!
  7. FredC

    FredC Well-Known Member

    Sounds like a template somewhere needs to be reverted.. I had this problem a cpl months back and reverting the templates fixed it all up again.. (sorry cant remember which template was causing the problem specifically)
  8. Vincent

    Vincent Well-Known Member

    This should be by default :D
    Peggy likes this.
  9. Crazyfruitbat

    Crazyfruitbat Well-Known Member

    Cheers, I think most if not all are up to date - I'll upgrade to RC3 this week and see if that solves it.
  10. Mutt

    Mutt Well-Known Member

    i'm looking at ur site using firefox 3.6 & it looks fine. hopefully that means you fixed it. even when I tried shrinking the screen down, your forum stayed at a set width & never screwed up the recommend bar. for fun I also looked at in in IE & chrome. all looked fine.

    if not, I suppose you could set a width for the div. those icons are 24px each & I think the spacing was 5px. so setting the width to 150 should fit everything you have there. maybe that will help.

  11. Crazyfruitbat

    Crazyfruitbat Well-Known Member

    Cheers for checking mate - It has to be a browser issue then, ill have a look when I get home from work.
    BTW, great addon! Nice and subtle but really important!
  12. Brogan

    Brogan XenForo Moderator Staff Member

    Nice touch but as the Facebook iframe is 500px wide I can't do this as I have a fixed width forum and there isn't enough space on pages with a sidebar.
  13. Wuebit

    Wuebit Well-Known Member

    Change the button to a count button :) work's great than ^_^ (plus looks better imo)
  14. Mutt

    Mutt Well-Known Member

    this was a good idea. you can edit the share_page template by changing this
    <fb:like href="{$url}" show_faces="true" width="500" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
    into this
    <fb:like href="{$url}" layout="button_count"  width="200" action="{$xenOptions.facebookLikeAction}" font="trebuchet  ms" colorscheme="@fbColorScheme"></fb:like>
  15. Brogan

    Brogan XenForo Moderator Staff Member

    I prefer the face pile though so I'll just leave it as is.

    Besides, once someone has subscribed to your twitter/facebook/youtube, they probably don't want to see it on every page so I'll just knock something up for the forum list sidebar.
  16. Wuebit

    Wuebit Well-Known Member

    Yea I did mate :)

Share This Page