Change appearance of reputation bar
2 posters
Page 1 of 1
Change appearance of reputation bar
I would like to change my reputation system and how it is showed so it looks more like a "like" system similar to Facebook etc. I found an old thread where you went in to quite detail about the css etc ( https://help.forumotion.com/t134969-plus-and-minus-signs-in-reputation-system?highlight=change+reputation+bar ). The instructions were for a phbb template whereas I use an Invision template, would I be able to use the same code for my template or will it have to be different? All I want to do is get rid of the negative button and have the plus button as a thumbs up or something similar, and also have the counting number next to it as shown in the example.
Thank you for your help
Thank you for your help
Re: Change appearance of reputation bar
Hello lowcarbforum,
With some changes to the script and CSS it should work for Invision. Go to Administration Panel > Display > Colors > CSS stylesheet and add the following rules to your sheet :
Next go to Modules > JavaScript codes management
Make sure JavaScript codes management is enabled, and create a new script :
Title : your choice
Placement : In the topics
Paste the code below and submit :
With some changes to the script and CSS it should work for Invision. Go to Administration Panel > Display > Colors > CSS stylesheet and add the following rules to your sheet :
- Code:
/*Vote System*/
.VCount, .VPlus {
color:#080 !important;
font-size:12px;
font-weight:bold;
font-family:Verdana,Arial,Helvetica,sans-serif;
}
.VCount:before {
content:"+";
opacity:0.5;
filter:alpha(opacity=50);
margin-left:4px;
}
.VPlus + .VCount:before { margin-left:-10px }
.VCount {
text-shadow:1px 1px 0px rgba(0,120,0, 0.3);
cursor:default;
}
.VPlus {
text-shadow:1px 1px 0px rgba(0,120,0, 0.1);
text-decoration:none !important;
position:relative;
margin-left:4px;
z-index:1;
}
.VPlus:hover { color:#0A0 !important }
.vote {
opacity:0;
filter:alpha(opacity=0);
}
Next go to Modules > JavaScript codes management
Make sure JavaScript codes management is enabled, and create a new script :
Title : your choice
Placement : In the topics
Paste the code below and submit :
- Code:
$(function() {
$('.vote').each(function() {
if ($(this).find('.vote-bar').length) { var VCount = $(this).find('.vote-bar').attr('title').replace(/.*\((\d+).*\)/,'$1') }
if (VCount == '1') var vote = ' vote';
else var vote = ' votes';
var VPlus = $(this).find('.vote-button:first a').addClass('VPlus').attr('title', 'Vote up');
$(this).closest('.post').find('.posting-icons').append(VPlus);
$(this).closest('.post:has(.vote-bar)').find('.posting-icons').append('<span class="VCount" title="'+VCount+vote+'">'+VCount+'</span>');
$(this).remove();
});
$('.VPlus').click(function(){
$.get($(this).attr('href'), function() {
location.reload();
});
return false
});
});
Re: Change appearance of reputation bar
Thank you for your reply. I have very bad internet connection at the moment so I'll try your suggestion other the next few days and get back to you.
Re: Change appearance of reputation bar
No problem.lowcarbforum wrote:Thank you for your reply. I have very bad internet connection at the moment so I'll try your suggestion other the next few days and get back to you.
Okay, there is no rush. You can get back to us whenever possible.
Re: Change appearance of reputation bar
Ok I think my connection is sorted. I will try this tomorrow or the day after and see how it goes, thank you
Re: Change appearance of reputation bar
That's good to hear, welcome back. Let us know how it goes, when you get to it.
Similar topics
» How do I change background Move logo on to the middle and change letter colour!
» If i change my forum colors but in two areas the color wont change why?
» No change skin options? And how to change subtitle color?
» Chat box text color change/shadow change
» How would I change this drop down menu on text color change...
» If i change my forum colors but in two areas the color wont change why?
» No change skin options? And how to change subtitle color?
» Chat box text color change/shadow change
» How would I change this drop down menu on text color change...
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum