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

facebook style thumbs up and down

Discussion in 'Graphics [Archive]' started by Panupat, Jul 23, 2011.

  1. Panupat

    Panupat Well-Known Member

    like-unlike.png

    To add it to your like/unlike, copy it onto your server inside the /styles directory.

    For example, if you put them here

    http://your-forum-root/styles/default/xenforo/icons/like.gif
    http://your-forum-root/styles/default/xenforo/icons/unlike.gif

    Add this to your EXTRA.css. You only need padding-bottom if thumbs got cropped in your style, increase it if necessary.

    HTML:
    a.like {
    background: url(styles/default/xenforo/icons/like.gif) no-repeat;
    padding-left: 20px;
    padding-bottom: 1px;
    }
    
    a.unlike {
    background: url(styles/default/xenforo/icons/unlike.gif) no-repeat;
    padding-left: 20px;
    padding-bottom: 1px;
    }
     

    Attached Files:

  2. Rostaria

    Rostaria Member

    Very nice.
     
  3. erich37

    erich37 Well-Known Member

    would be cool to have those in Xenforo style colors..........
     
  4. Panupat

    Panupat Well-Known Member

    You mean the icons should shift the blue a bit to match the blue of this theme?
     
    Sylar likes this.
  5. @lex

    @lex Member

    Thanks ! :)
     
  6. Garamond

    Garamond Well-Known Member

    Very good! Thanks :)
     
  7. toodlez

    toodlez Active Member

    I did this exactly, and my icons just overlap the Like and Unlike text..
     
  8. Panupat

    Panupat Well-Known Member

    I only tested it out on Firefox and Chrome. I may need CSS assistant if it looks different on other browsers.

    Just noticed the thumbs got cropped a little bit in Chrome, adding padding-bottom to the CSS now.
     
    Veer likes this.
  9. toodlez

    toodlez Active Member

    I am on a macbook using firefox, and it had an overlap
     
  10. toodlez

    toodlez Active Member

    in case you are wondering, the thumbs up and down overlap the Like and Unlike text almost completely, it doesn't space over to the left
     
  11. Veer

    Veer Well-Known Member

    It looks nice, any idea how to add icons with Follow and Unfollow link, using the same method?

    8-23-2011.png
     
  12. Panupat

    Panupat Well-Known Member

    I'm really sorry. I don't own a mac so I can't help you trouble shoot it >_<.

    Watched thread doesn't have a css class of its own, you'll have to add one.

    In template thread_view , find <div class="linkGroup SelectionCountContainer">
    add a class there, let's say <div class="linkGroup SelectionCountContainer watchedIcon">

    You then add css .watchedIcon to your EXTRA.css similar to what I had.
     
  13. ArnyVee

    ArnyVee Well-Known Member

    This is great! :D

    Using Flexile on a test install .... anyone have the thumb images in RED ?
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    These any good?
     

    Attached Files:

  15. ArnyVee

    ArnyVee Well-Known Member

    Brogan, you are the man! :D
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    Just noticed I missed the cuff colouring.
     

    Attached Files:

  17. Veer

    Veer Well-Known Member

    Anybody knows about this?
     
  18. toodlez

    toodlez Active Member

    Is nobody else having the problem that I'm having ? Where the icon literally overlaps the Like and Unlike text ?
     
  19. ArnyVee

    ArnyVee Well-Known Member

    Could it be a custom style issue?

    I'm using Flexile on a test install and DXF over at TeeVeeTown.com and they both worked right out of the box. :D
     
  20. toodlez

    toodlez Active Member

    I'm using "Social"
     

Share This Page