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

Attachments

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.
 

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
 

Veer

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.
It looks nice, any idea how to add icons with Follow and Unfollow link, using the same method?

8-23-2011.png
 

Panupat

Well-known 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
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.
 

toodlez

Active member
Is nobody else having the problem that I'm having ? Where the icon literally overlaps the Like and Unlike text ?
 

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
 
Top