• 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

Panupat

Well-known member
like-unlike.webp

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;
}
 

Attachments

  • like.gif
    like.gif
    877 bytes · Views: 67
  • unlike.gif
    unlike.gif
    878 bytes · Views: 60
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.
 
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
 
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.
It looks nice, any idea how to add icons with Follow and Unfollow link, using the same method?

8-23-2011.webp
 
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
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.
 
Is nobody else having the problem that I'm having ? Where the icon literally overlaps the Like and Unlike text ?
 
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
 
Top Bottom