change the reputation bar Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
2 posters

    change the reputation bar

    Jalokim
    Jalokim
    Jalokim
    Energetic


    Male Posts : 6113
    Reputation : 223
    Language : English,Polish,CSS,HTML
    Location : Poland
    • Post n°1

    Tutorial change the reputation bar

    Post by Jalokim July 15th 2009, 11:06 pm

    change the reputation bar


    Hello folks,
    got another tutorial for you.

    And yes, I know I suck at tuts but here goes:

    The rep bar is a little boring when all you see is a plus and minus and that green bar.
    So why not make it a bit better. make it look nice inside.

    this tut is confirmed for phpbb3 and IPB
    it may work on other versions if the classes that I mention are present

    Step1:     check if your CSS is full!

    Go to admin panel -> display -> colors -> css tab*
    *if applicable

    If you have a load of text it means your css is ok. If you have a small amount of CSS with only a fraction of the text you gotta download your full CSS and paste it in.

    Spoiler:

    Step2:
    the proceedure is simple and difficult at the same time.

    First, admin panel -> display -> colors -> css tab

    find this in your CSS (use F3 if you are a firefox user, if you prefer IE , find this option yourself Razz )

    I do realize something recently happened to the forumotion CSS, it got compressed and everything is in one line. So you have to be very careful when editing the CSS...
    especially watch out for the { } brackets, they have to be as they were

    Code:
    .vote .vote-bar {
    border:none;
       width: 40px;
       height: 50px;
       margin: 0 auto;
       font-size: 0;
       margin-left: -30px;
       }

    Now that is my votebar, yours will have colors and borders.
    Remove any color classes (color: #4536e8Wink
    and remove border classes (border: 1px solid #333Wink

    and now you need to expand your vote box, so as I did add a height and width class (or edit existing)
    Code:
       width: 40px;
       height: 50px;
    You have to know the size of you image before doing this.
    40 x 40 is the max ... don't make images bigger than this !!!!

    and in the end, you need to add a margin class to make sure text doesn't go onto your image:
    so we add this as I have:
    Code:
       margin-left: -30px;

    click here for super easy image version:
    Spoiler:
    now we can install the images.

    we need to find this:
    Code:
    .vote .vote-bar-plus {

    that is the positive bar.change the reputation bar Love

    inside this class you need only 2 scripts:
    Code:
    background-image: url('url of positive image');
       background-repeat:no-repeat;

    in the background image you enter your image url
    the second class you leave alone.
    if there is anything else... remove it.

    super easy image version here:
    Spoiler:
    now we do the same for the negative class:change the reputation bar Hate
    Code:
    .vote .vote-bar-minus {

    super easy image version here:
    Spoiler:

    End Result:
    change the reputation bar Rep10





    This tutorial was written by @Jalokim.
    • Back to top
    Jalokim
    Jalokim
    Jalokim
    Energetic


    Male Posts : 6113
    Reputation : 223
    Language : English,Polish,CSS,HTML
    Location : Poland
    • Post n°2

    Tutorial change the reputation bar

    Post by Jalokim July 30th 2009, 12:18 pm

    change the reputation bar PART "2"


    I'm back

    got something new for you guys.

    you were all "Booo you suck you just changed the inside image, we want to + and - to change"

    well no more.
    If you have PUNBB or PHPBB2

    this is a tut for you.

    Replacing the "+" and "-" buttons

    using template editing you can modify the settings
    so go to admin panel-> display-> templates -> general-> viewtopic_body

    hit the yellow edit icon and find this in your template:
    Code:
    <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a>

    now all you got to do is add an image.
    If you want I made a few defaults if you wish to use them please do:
    change the reputation bar Plus10change the reputation bar Minus10

    to replace the text with an image you have to use html image tags.
    so your code will look like this:
    Code:
    <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img src="url of your PLUS image"></a>

    you have successfully changes the plus image
    now the minus... same rules apply, but this is the code you edit:
    Code:
    <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a>


    If you want a cool roll over effect, just paste this code:
    Negative:
    Code:
    <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"><img src="https://i81.servimg.com/u/f81/11/91/65/81/minus10.png"
    onmouseover="this.src='https://i81.servimg.com/u/f81/11/91/65/81/overmi10.png'"
    onmouseout="this.src='https://i81.servimg.com/u/f81/11/91/65/81/minus10.png'">

    Positive:
    Code:
    <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img src="https://i81.servimg.com/u/f81/11/91/65/81/plus10.png"
    onmouseover="this.src='https://i81.servimg.com/u/f81/11/91/65/81/over10.png'"
    onmouseout="this.src='https://i81.servimg.com/u/f81/11/91/65/81/plus10.png'"></a>


    now once you have done that you can save
    and then confirm your actions with the green plus change the reputation bar Ajouter

    But this is not all.
    the images may not appear properly so you need to edit the CSS

    admin panel-> display-> colors-> css
    find this:
    Code:
    .vote {float: right;
    width: XXpx;
    margin-left: 4px;}
    you will have to add or edit the width class
    change the XX to your images' size.

    and save

    and here is an image from testjal:
    change the reputation bar Clogf10



    • Back to top
    skouliki
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15169
    Reputation : 1696
    Language : English,Greek
    Location : Greece
    • Post n°3

    Tutorial Re: change the reputation bar

    Post by skouliki February 10th 2020, 4:45 pm

    This code was updated to fit in with the new HTTPS address

    updated 10.02.2020 by skouliki

    • Back to top