MyBB Community Forums

Full Version: Modifying the rep button
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I added the simple like plugin and now i have too many thumbs up images. I would like to change the rep button image to probably the star image. Where can i find its template?

I checked the template postbit_rep_button but i dont see the src heading to the thumbs up image at all

The only way i could find to do it was modify postbit_rep_button from this

<a href="javascript:MyBB.reputation({$post['uid']},{$post['pid']});" title="{$lang->postbit_reputation_add}" class="postbit_reputation_add"><span>{$lang->postbit_button_reputation_add}</span></a>



to this
<a href="javascript:MyBB.reputation({$post['uid']},{$post['pid']});"  title="{$lang->postbit_reputation_add}"><img src="http://python-forum.io/images/icons/star.png" alt="{$lang->postbit_reputation}" title="{$lang->postbit_reputation}" />Reputation</a>
However the problem is the button is all misalligned now
The postbit button images use a sprite image for all the buttons i.e buttons_sprite.png in the images folder.

To change the image you're going to have to make a new sprite or change the css to make individual images.

If you want to use fontawesome instead of the sprite image, link to fontawesome in headerinclude template:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

and then change the rep button to:
<a href="javascript:MyBB.reputation({$post['uid']},{$post['pid']});" title="{$lang->postbit_reputation_add}" class="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i>&nbsp;{$lang->postbit_button_reputation_add}</a>
Quote:If you want to use fontawesome instead of the sprite image, link to fontawesome in headerinclude template:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

and then change the rep button to:
<a href="javascript:MyBB.reputation({$post['uid']},{$post['pid']});" title="{$lang->postbit_reputation_add}" class="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i>&nbsp;{$lang->postbit_button_reputation_add}</a>
I actually like the default mybb look better.

Quote:The postbit button images use a sprite image for all the buttons i.e buttons_sprite.png in the images folder.
Thank you. I was trying to figure out where the image came from. 

Quote:To change the image you're going to have to make a new sprite or change the css to make individual images.
I tried modifying the sprite sheet...but then it modifies all thumbs up buttons to star images. Where is the CSS for this specfic button?
[attachment=37500]

The only thing i could find from the rep in theglobal CSS was a.button span

a.button span {
	padding-left: 20px;
	display: inline-block;
	background-image: url(images/buttons_sprite.png);
	background-repeat: no-repeat;
}

But i am not sure how to chagne just the rep button to use a different image instead. 


Its odd that myBB doesnt allow easy methods to swap out images for these buttons?

Im not that great in CSS, but i found in global the class
.postbit_buttons a span {
	padding-left: 20px;
	display: inline-block;
	height: 16px;
	background-image: url(images/buttons_sprite.png);
	background-repeat: no-repeat;
}

.postbit_buttons a.postbit_find span {
	background-position: 0 0;
}

.postbit_buttons a.postbit_reputation_add span {
	background-position: 0 -20px;
	background-image: url(/images/star.png);
}
and i added the background url to just that class to star....but it completely removed the image form the rep button at all?
anyone?

The only solution i could come up with is to just upload an image that looks similar  with the text on it.

It doesnt seem MyBB is friendly with swapping out button images with others, while allowing other buttons to not change.
So everytime i modified the thumbs up to a star, the simple like plugin also changed to a star.

So i just went into GIMP and made what appeared to what i want and just uploaded that image as the buttons. ITs a little cockeyed, but...
and changed post_bit_button with

<a href="javascript:MyBB.reputation({$post['uid']},{$post['pid']});" ><img src="http://python-forum.io/images/screenshots/rep_star.png" height=15 width=39></a>