Example 4: Add Images Instead of +/- to Reputation System (A
Posted January 13th 2011, 10:05pm
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.

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:

.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.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 24th 2011, 4:58pm
I seem to be having trouble with this. I placed your script (only modifying the "Like" and "Dislike" URLs) into an HTML page and saved. Then I used your Creating an external Javascript file on Forumotion method and put
<script type="text/javascript" src="MY HTML URL"></script>
into my Homepage message box but I saw no affect. Then I tried placing the code into my announcements and my + & - went missing. Any ideas on the problem I'm having?
φ
Posts:
Avatar
Guest
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 24th 2011, 5:56pm
The reason the script isn't loading for you is because the homepage message is only activated on the homepage! Put the above line in your Site Description, and the script will load properly. Another method would be to create a widget and put the script from my original post in that widget. If you do this, however, make sure to change all "$" characters to "jQuery".
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 25th 2011, 1:18am
Hmm.. Unfortunately I cannot use the Site Description method because its being occupied by my flash banner. I just tried the widget method using the
<script type="text/javascript" src="MY HTML URL"></script>
method and that removed my rep buttons as it did when I placed it on the announcement ticker. I put the direct script on the widget and that actually displayed the code instead and had no affect on the rep buttons. Not sure why this isn't working for me..
φ
Posts:
Avatar
Guest
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 25th 2011, 2:05am
One important point when adding any form of code to a forumotion board: You absolutely MUST turn off the HTML editor!

Your problems sound like you're using the HTML editor to enter the script in the HTML file, announcement, and widgets, and the HTML editor messed up the code in all of them.

If this is the issue, then you will need to start from scratch. Turn off the HTML editor (and preferably leaving it off permanently!), then re-create the HTML file containing the script.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 4: Add Images Instead of +/- to Reputation System (A
Posted January 25th 2011, 3:16am
My editors always had HTML off since day one. I've never turned HTML mode on when modifying anything in my ACP. I'm use to seeing the codes and working like that. That possibility can be ruled out. I'm not sure what else I can try. Image
φ
Posts:
Avatar
Guest
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 25th 2011, 1:07pm
PM Sent.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 26th 2011, 12:59am
Problem solved after scripting my flash banner and like/dislike into the same HTML and hosting it into the site description. Thanks for your help Dion!
φ
Posts:
Avatar
Guest
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 27th 2011, 12:20am
I'm glad your problems were solved. If by chance you have problems with the quote box and code box overlapping the vote/reputation area, this CSS will fix it:

dl.codebox, blockquote {margin-right: 40px;}
blockquote blockquote {margin-right: 8px;}
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 4: Add Images Instead of +/- to Reputation System (A
Posted January 27th 2011, 2:11am
Sweet, thanks for that code, I actually had set up some CSS earlier today to fix the boxes from being overlapped. This is the code I used

blockquote {
border: 3px outset #000000;
margin: 27px;
padding: 8px;
}
φ
Posts:
Avatar
Guest
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 27th 2011, 2:36am
To your CSS I would add:

blockquote blockquote {margin: 8px;}

This will insure no display issues with nested quotes. If you have quote level in the ACP set to 1, then this extra CSS rule is not necessary.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 27th 2011, 2:51am
so all together, would you suggest I add this?

blockquote {border: 3px outset #000000; margin: 27px; padding: 8px;}
blockquote blockquote {margin: 8px;}
dl.codebox, blockquote {margin-right: 40px;}
φ
Posts:
Avatar
Guest
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted January 27th 2011, 3:00am
I would suggest you add this:

blockquote {border: 3px outset #000000; margin-right: 27px; padding: 8px;}
blockquote blockquote {margin-right: 8px;}
dl.codebox {margin-right: 27px;}

You only need the extra space on the right, so there is no need to set a 27px margin on all four sides of the quote box.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted July 24th 2011, 12:22pm
Dion, I have no idea how to do this. Can you please help me? Perhaps I could give you administrative power and you can help me install it? I would greatly appreciate it. Thanks :D
φ
Posts: 122
Joined: July 23rd 2011, 11:00pm
Likes Received: 1
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted July 24th 2011, 12:27pm
I'm not sure why you deleted your other post, but here's a reply to it:

http://www.diondesigns.org/t1338-#1895
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 4: Add Images Instead of +/- to Reputation System (All boards)
Posted July 24th 2011, 12:57pm
Omg!! I'm so close but the images are not appearing! I don't know how to edit the CSS part!!!

What should I do for these images?

http://commons.wikimedia.org/wiki/File:Facebook_like_thumb.png
http://commons.wikimedia.org/wiki/File:Not_facebook_not_like_thumbs_down.png
φ
Posts: 122
Joined: July 23rd 2011, 11:00pm
Likes Received: 1
Topic locked
16 posts

Who is online

Users browsing this forum: No registered users and 1 guest