I have seen people ask about this before, so here is a simple tutorial to replace the button sprites with individual images of your own.
In global.css
Find:
Replace with:
Now create your images with the respective names, upload them and you are good to go!
Or download the images below:
![.zip]( "Zip File")
buttons.zip (Size: 81.76 KB / Downloads: 0)
*
* if I missed any images in here I will update the download with them at such a time as noticed.
In global.css
Find:
Code:
.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
display: inline-block;
padding: 2px 5px;
margin: 2px;
font-size: 11px;
background: #eee url(images/buttons_bg.png) repeat-x;
border: 1px solid #ccc;
color: #555;
}
.postbit_buttons > a:hover {
border-color: #bbb;
}
.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;
}
.postbit_buttons a.postbit_email span {
background-position: 0 -40px;
}
.postbit_buttons a.postbit_website span {
background-position: 0 -60px;
}
.postbit_buttons a.postbit_pm span {
background-position: 0 -80px;
}
.postbit_buttons a.postbit_quote span {
background-position: 0 -100px;
}
.postbit_buttons a.postbit_multiquote span {
background-position: 0 -120px;
}
.postbit_buttons a.postbit_multiquote_on span {
background-position: 0 -140px;
}
.postbit_buttons a.postbit_edit span {
background-position: 0 -160px;
}
.postbit_buttons a.postbit_qdelete span {
background-position: 0 -180px;
}
.postbit_buttons a.postbit_qrestore span {
background-position: 0 -200px;
}
.postbit_buttons a.postbit_report span {
background-position: 0 -220px;
}
.postbit_buttons a.postbit_warn span {
background-position: 0 -240px;
}
.postbit_buttons a.postbit_purgespammer span {
background-position: 0 -540px;
}
.postbit_buttons a.postbit_reply_pm span {
background-position: 0 -260px;
}
.postbit_buttons a.postbit_reply_all span {
background-position: 0 -280px;
}
.postbit_buttons a.postbit_forward_pm span {
background-position: 0 -300px;
}
.postbit_buttons a.postbit_delete_pm span {
background-position: 0 -320px;
}
a.button:link,
a.button:hover,
a.button:visited,
a.button:active {
background: #0f0f0f url(images/tcat.png) repeat-x;
color: #fff;
display: inline-block;
padding: 4px 8px;
margin: 2px 2px 6px 2px;
border: 1px solid #000;
font-size: 14px;
}
a.button.small_button {
font-size: 13px;
margin: 0;
padding: 3px 6px;
}
a.button span {
padding-left: 20px;
display: inline-block;
background-image: url(images/buttons_sprite.png);
background-repeat: no-repeat;
}
a.button.new_thread_button span {
background-position: 0 -340px;
}
a.button.new_reply_button span {
background-position: 0 -360px;
}
a.button.closed_button span {
background-position: 0 -380px;
}
a.button.rate_user_button span {
background-position: 0 -400px;
}
a.button.add_buddy_button span {
background-position: 0 -440px;
}
a.button.remove_buddy_button span {
background-position: 0 -480px;
}
a.button.add_ignore_button span {
background-position: 0 -460px;
}
a.button.remove_ignore_button span {
background-position: 0 -500px;
}
a.button.report_user_button span {
background-position: 0 -520px;
}Replace with:
Code:
.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
display: inline-block;
padding: 2px 5px;
margin: 2px;
font-size: 11px;
background: #eee url('images/buttons/buttons_bg.png') repeat-x;
border: 1px solid #ccc;
color: #555;
}
.postbit_buttons > a:hover {
border-color: #bbb;
}
.postbit_buttons a span {
padding-left: 20px;
display: inline-block;
height: 16px;
}
.postbit_buttons a.postbit_find span {
background: url('images/buttons/find.png') no-repeat;
}
.postbit_buttons a.postbit_reputation_add span {
background: url('images/buttons/rep_add.png') no-repeat;
}
.postbit_buttons a.postbit_email span {
background: url('images/buttons/email.png') no-repeat;
}
.postbit_buttons a.postbit_website span {
background: url('images/buttons/website.png') no-repeat;
}
.postbit_buttons a.postbit_pm span {
background: url('images/buttons/pm.png') no-repeat;
}
.postbit_buttons a.postbit_quote span {
background: url('images/buttons/quote.png') no-repeat;
}
.postbit_buttons a.postbit_multiquote span {
background: url('images/buttons/multiquote.png') no-repeat;
}
.postbit_buttons a.postbit_multiquote_on span {
background: url('images/buttons/multiquote_on.png') no-repeat;
}
.postbit_buttons a.postbit_edit span {
background: url('images/buttons/edit.png') no-repeat;
}
.postbit_buttons a.postbit_qdelete span {
background: url('images/buttons/qdelete.png') no-repeat;
}
.postbit_buttons a.postbit_qrestore span {
background: url('images/buttons/qrestore.png') no-repeat;
}
.postbit_buttons a.postbit_report span {
background: url('images/buttons/report.png') no-repeat;
}
.postbit_buttons a.postbit_warn span {
background: url('images/buttons/warn.png') no-repeat;
}
.postbit_buttons a.postbit_purgespammer span {
background: url('images/buttons/purgespammer.png') no-repeat;
}
.postbit_buttons a.postbit_reply_pm span {
background: url('images/buttons/reply_pm.png') no-repeat;
}
.postbit_buttons a.postbit_reply_all span {
background: url('images/buttons/reply_all.png') no-repeat;
}
.postbit_buttons a.postbit_forward_pm span {
background: url('images/buttons/forward_pm.png') no-repeat;
}
.postbit_buttons a.postbit_delete_pm span {
background: url('images/buttons/delete_pm.png') no-repeat;
}
a.button:link, a.button:hover, a.button:visited, a.button:active {
background: #0f0f0f url(images/tcat.png) repeat-x;
color: #fff;
display: inline-block;
padding: 4px 8px;
margin: 2px 2px 6px 2px;
border: 1px solid #000;
font-size: 14px;
}
a.button.small_button {
font-size: 13px;
margin: 0;
padding: 3px 6px;
}
a.button span {
padding-left: 20px;
display: inline-block;
}
a.button.new_thread_button span {
background: url('images/buttons/new_thread.png') no-repeat;
}
a.button.new_reply_button span {
background: url('images/buttons/new_reply.png') no-repeat;
}
a.button.closed_button span {
background: url('images/buttons/closed.png') no-repeat;
}
a.button.rate_user_button span {
background: url('images/buttons/rate_user.png') no-repeat;
}
a.button.add_buddy_button span {
background: url('images/buttons/add_buddy.png') no-repeat;
}
a.button.remove_buddy_button span {
background: url('images/buttons/remove_buddy.png') no-repeat;
}
a.button.add_ignore_button span {
background: url('images/buttons/add_ignore.png') no-repeat;
}
a.button.remove_ignore_button span {
background: url('images/buttons/remove_ignore.png') no-repeat;
}
a.button.report_user_button span {
background: url('images/buttons/report_user.png') no-repeat;
}Now create your images with the respective names, upload them and you are good to go!
Or download the images below:
buttons.zip (Size: 81.76 KB / Downloads: 0)
** if I missed any images in here I will update the download with them at such a time as noticed.