The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Change appearance of reputation bar

View previous topic View next topic Go down

In progress Change appearance of reputation bar

Post by lowcarbforum on August 28th 2014, 10:29 am

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 (http://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

lowcarbforum
New Member

Posts : 12
Reputation : 1
Language : English

http://lowcarbdiabetic.forumotion.co.uk/

Back to top Go down

In progress Re: Change appearance of reputation bar

Post by Ange Tuteur on August 28th 2014, 6:30 pm

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Change appearance of reputation bar

Post by lowcarbforum on August 29th 2014, 1:03 pm

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.

lowcarbforum
New Member

Posts : 12
Reputation : 1
Language : English

http://lowcarbdiabetic.forumotion.co.uk/

Back to top Go down

In progress Re: Change appearance of reputation bar

Post by Ange Tuteur on August 29th 2014, 2:31 pm

@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.
No problem.

Okay, there is no rush. You can get back to us whenever possible. Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Change appearance of reputation bar

Post by lowcarbforum on September 9th 2014, 9:55 pm

Ok I think my connection is sorted. I will try this tomorrow or the day after and see how it goes, thank you

lowcarbforum
New Member

Posts : 12
Reputation : 1
Language : English

http://lowcarbdiabetic.forumotion.co.uk/

Back to top Go down

In progress Re: Change appearance of reputation bar

Post by Ange Tuteur on September 9th 2014, 9:59 pm

That's good to hear, welcome back. Let us know how it goes, when you get to it. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum