Current date/time is August 25th 2019, 7:57 pm

Search found 1 match for 4536e8

change the reputation bar

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:
To get your CSS you need to be on your index page of your forum.
Then on firefox, click file -> save page as -> select your destination but make sure you are saving the page as a complete web page.
If you got IE ... well I think you know how to save a page with all its contents.

Then go to the folder where you saved your page, there should be 2 files, a folder with elements and the html itself.
go to the folder, and find a CSS (it is usually xx-ltr.css) [xx is a number]
click that and rename it.
change it from xx-ltr.css to xx-ltr.txt

now double click the txt file you created. You will see your entire CSS, now select it all (crtl+a) and paste it in your CSS. Replace the entire text with all that you have there in that txt.
Don't worry, this will not change anything on your forum, NO custom style will be lost, Nothing.


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:
Topics tagged under 4536e8 on The forum of the forums Part110

now we can install the images.

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


that is the positive bar.Topics tagged under 4536e8 on The forum of the forums 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:
Topics tagged under 4536e8 on The forum of the forums Part210

now we do the same for the negative class:Topics tagged under 4536e8 on The forum of the forums Hate
Code:
.vote .vote-bar-minus {


super easy image version here:
Spoiler:
Topics tagged under 4536e8 on The forum of the forums Poar310


End Result:
Topics tagged under 4536e8 on The forum of the forums Rep10





by Jalokim
on July 15th 2009, 11:06 pm
 
Search in: Tips & Tricks
Topic: change the reputation bar
Replies: 1
Views: 13564

Back to top

Jump to: