Here we go again! When I saw THIS, I wanted to add the same capability to phpBB3 and IPB2/Invision boards. Since it was so easy, I thought it would make a great example script. The following script and CSS will work on all forumotion board types.
Here is the CSS that must be added:
Here's how the script works. The first two lines remove the ugly middle bar and replace it with some blank space. The rest of the script is a simple loop that checks all the +/- buttons, and replaces the +/- characters with the appropriate image. I have not included images in the sample script -- it's your job to create/find images for your own use!
The CSS is needed to take into account the size of the new images. Make SURE you use the correct value for "width:" in the ".vote" rule, or your images will not display properly! The value should be the width of the larger of the two images. Usage note: you should try to keep the size of the images to 20x20 pixels or smaller, or you will start to lose too much space at the top right of your posts.
- Code:
var CopyrightNotice = 'Add images to forumotion Reputation system. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
$(function() {
$('.vote-no-bar').before('<div style="height:10px;"></div>');
$('.vote-no-bar').remove();
var x=$('.vote-button a').get();
for (i=0; i<x.length; i++) {
if (x[i].innerHTML=='+') {
x[i].innerHTML='<img title="Like" src="(your +/like button URL)" />';
}
else {
x[i].innerHTML='<img title="Dislike" src="(your -/dislike button URL)" />';
}
}
});
Here is the CSS that must be added:
- Code:
.vote {width: 16px; margin: 0px 0px 0px 3px;}
.vote .vote-button {margin: 0px;}
.vote .vote-bar {width: 6px; border: none;}
Here's how the script works. The first two lines remove the ugly middle bar and replace it with some blank space. The rest of the script is a simple loop that checks all the +/- buttons, and replaces the +/- characters with the appropriate image. I have not included images in the sample script -- it's your job to create/find images for your own use!
The CSS is needed to take into account the size of the new images. Make SURE you use the correct value for "width:" in the ".vote" rule, or your images will not display properly! The value should be the width of the larger of the two images. Usage note: you should try to keep the size of the images to 20x20 pixels or smaller, or you will start to lose too much space at the top right of your posts.
