MyBB Community Forums

How can change image rate button?

Hi community, I would like to learn How can change the image rate button from buttons_sprite

I would like to customize it with my own image like:

I have searched in Google Search and the tutorials forum but not found a tutorial for thise or any guide to change manual.

Anexo image thumbup:
Image to Rate Button

Thanks in advance for support

simple just modify existing styling:

comment out sprite specific:

.postbit_buttons a.postbit_reputation_add span {
  /*  background-position: 0 -20px; */
}

add image specific:

.postbit_buttons a.postbit_reputation_add span {
    background: url('images/thumbs-up.png') top left no-repeat;
}

just for example using an externally link image just for an example if say you were via browser edit and wanted to see it display quick before applying actually css file edit*:

.postbit_buttons a.postbit_reputation_add span {
    background: url('https://icons.iconarchive.com/icons/google/noto-emoji-people-bodyparts/16/12008-thumbs-up-icon.png') top left no-repeat;
}

* though you would use internal image like below in your actual global.css stylesheet edit:

.postbit_buttons a.postbit_reputation_add span {
    background: url('images/thumbs-up.png') top left no-repeat;
}

and then edit further for your specific usages.... also note fyi the most optimal is using 16px by 16px icons....

so just for example if memory serves at famfam being the original icons majority used in mybb back in the days when we were not using sprites and had individual images, umm, yeah...

ie: http://www.famfamfam.com/

that is just one of many quick ways to find say various 16px by 16px icons to use in buttons or what not...

so in theory just take the image you are hoping to use noted above and make a 16px by 16px variant of such and then modify provided example to reflect your desired image and path...

** ooh, that reminds me that maybe I should re-add my old tutorials in regards to replacing all annoying board sprites with individual images whenever I find the free time to do so again, lol, though if memory serves I think you are correct that back when I wrote the tutorial to replace all, I did not add the postbit buttons to that tutorial as the tutorial was based off classic developmemt and in classic I had opted to keep the buttons sprite as the only sprite remaining in theme... makes sense as in classic days we did not have button icons but had button images and such would make sense that I opted to keep existing buttons sprites as a time saver on that specific project in 1.8 though I will have to dig up the old tutorial to confirm if I did leave that out in such so yeah that reminds me to one find the free time to find & re-add that old tutorial and two then add the one part I left out in that tutorial if I did, haha!

Best of luck! Happy editing! ~ V

Awesome...  Thank You so much  censor_deeznutz.

I am very Gratefull for your help, to personalize my forum with these new code.
You have helped me a lot with your knowledge and I am learn a lot too...

Thank You for your Advance and Support!

We need more people like you

+1 Gracias por el Soporte

Note:
this is the result of the code

(2021-03-07, 10:50 PM)DiegoPino Wrote: [ -> ]Awesome...  Thank You so much  censor_deeznutz.

I am very Gratefull for your help, to personalize my forum with these new code.
You have helped me a lot with your knowledge and I am learn a lot too...

Thank You for your Advance and Support!

We need more people like you

+1 Gracias por el Soporte

Note:
this is the result of the code

cool beans and now worries.  simply glad you got it sorted!


and here is just two examples from one of the old threads just to show you how the replacement concept is similar board wide just to give you a rough understanding of how....

as you note in thes old examples I left both in so that the end-user could simply see visibly with a basic understanding how quickly you can disable sprites and use images or vis versa:

example 1

#header ul.menu li a {
    padding-left: 20px;
/* background-image: url('themes/classic/sprites/headerlinks_sprite.png'); */ /** for sprite usage **/
    background-repeat: no-repeat;
    display: inline-block;
}

#logo ul.top_links {
    font-weight: bold;
    text-align: right;
    margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
/* background-position: 0 0; */ /** for sprite usage **/
    background: url('themes/classic/toplinks/search.png') left no-repeat;  /** for individual toplink icon usage **/
}

#logo ul.top_links a.memberlist {
/* background-position: 0 -20px; */ /** for sprite usage **/
    background: url('themes/classic/toplinks/memberlist.png') left no-repeat;  /** for individual toplink icon usage **/
}

#logo ul.top_links a.calendar {
/* background-position: 0 -40px; */ /** for sprite usage **/
    background: url('themes/classic/toplinks/calendar.png') left no-repeat;  /** for individual toplink icon usage **/
}

#logo ul.top_links a.help {
/* background-position: 0 -60px; */ /** for sprite usage **/
    background: url('themes/classic/toplinks/help.png') left no-repeat;  /** for individual toplink icon usage **/
}

#logo ul.top_links a.portal {
/* background-position: 0 -180px; */ /** for sprite usage **/
    background: url('themes/classic/toplinks/portal.png') top left no-repeat;  /** for individual toplink icon usage **/
}

#panel .upper a.logout {
    font-weight: bold;
/* background: url('themes/classic/sprites/headerlinks_sprite.png') right -80px no-repeat; */ /** for sprite usage **/
    padding-right: 20px;
    margin-left: 10px;
    background: url('themes/classic/welcomeblock/logout.png') top right no-repeat;  /** for individual toplink icon usage **/
}

#panel .upper a.login,
#panel .upper a.lost_password {
/* background: url('themes/classic/sprites/headerlinks_sprite.png') 0 -100px no-repeat; */ /** for sprite usage **/
    padding-left: 20px;
    margin-left: 10px;
    font-weight: bold;
    background: url('themes/classic/welcomeblock/login.png') top left no-repeat;  /** for individual icon usage **/
}

#panel .upper a.register {
/* background: url('themes/classic/sprites/headerlinks_sprite.png') right -80px no-repeat; */ /** for sprite usage **/
    padding-right: 20px;
    margin-left: 10px;
    font-weight: bold;
    background: url('themes/classic/welcomeblock/register.png') top right no-repeat;  /** for individual icon usage **/
}

#panel .lower ul.panel_links {
    float: left;
}

#panel .lower ul.panel_links a.usercp {
/* background-position: 0 -120px; */ /** for sprite usage **/
    background: url('themes/classic/welcomeblock/usercp.png') top left no-repeat;  /** for individual icon usage **/
}

#panel .lower ul.panel_links a.modcp {
/*    background-position: 0 -140px; */ /** for sprite usage **/
     background: url('themes/classic/welcomeblock/modcp.png') top left no-repeat;  /** for individual icon usage **/
}    

#panel .lower ul.panel_links a.admincp {
/*    background-position: 0 -160px; */ /** for sprite usage **/
     background: url('themes/classic/welcomeblock/admincp.png') top left no-repeat;  /** for individual icon usage **/
}

example 2

ul.thread_tools li {
	padding-left: 24px;
	padding-bottom: 4px;
	margin-bottom: 3px;
	font-size: 11px;
	/* background-image: url('themes/classic/sprites/showthread_sprite.png'); */ /** for sprite usage **/
	background-repeat: no-repeat;
}

ul.thread_tools li.printable {
/*  background-position: 0 0; */ /** for sprite usage **/
    background-image: url('themes/classic/printable.png');  /** for individual icon usage **/
}

ul.thread_tools li.sendthread {
/*  background-position: 0 -20px; */ /** for sprite usage **/
    background-image: url('themes/classic/send.png');  /** for individual icon usage **/
}

ul.thread_tools li.subscription_add {
/*  background-position: 0 -40px; */ /** for sprite usage **/
    background-image: url('themes/classic/subscribe.png');  /** for individual icon usage **/
}

ul.thread_tools li.subscription_remove {
/*  background-position: 0 -60px; */ /** for sprite usage **/
    background-image: url('themes/classic/unsubscribe.png');  /** for individual icon usage **/
}

ul.thread_tools li.poll {
/*	background-position: 0 -80px; */ /** for sprite usage **/
    background-image: url('themes/classic/poll.png');  /** for individual icon usage **/
}

etc, etc....

(2021-03-09, 08:08 AM)friendpicksd Wrote: [ -> ]I'm also interested in a solution for this.

You can See censor_deeznutz's answer above

Now an interesting question would be to change the button to size?

For Example:

- Default Sprite 16x16px



- Customize Default Sprite 20x20px


And how can style with size and color