MyBB CSS Postbit Buttons

[Detrition]

This tutorial is going to show you how to replace the default MyBB image buttons (postbit, new reply, new thread, etc) with CSS buttons. Why is this an amazing trick?

• You can go back and edit every button by changing a few lines of CSS
• No need to go back into Photoshop and replace 25+ images if you want to add or remove one little thing
• CSS is just generally more awesome than images!
  

So let me try and explain the process. We'll use postbit_email for the example [located at Templates -> YourTemplates -> Post Bit Templates -> postbit_email]

This is what you see by default:

Code:

<a href="member.php?action=emailuser&amp;uid={$post['uid']}"><img src="{$theme['imglangdir']}/postbit_email.gif" alt="{$lang->postbit_email}" title="{$lang->postbit_email}" /></a>

This is what we'll be changing it too:

Code:

<a href="member.php?action=emailuser&amp;uid={$post['uid']}" class="postbit">email</a>

---

First we will need to create our CSS button. You can do this by yourself, but why stress when there is tools on the internet designed to make css buttons? This is the css button generator I recommend:
http://www.cssbuttongenerator.com/

After you customize your button, click on it to get your code. This is the default button code on the website (and what we will be using):

Code:

.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}.myButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.myButton:active {
    position:relative;
    top:1px;
}

Rename the classes to 'postbit' and you'll have this:

Code:

.postbit {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}.postbit:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.postbit:active {
    position:relative;
    top:1px;
}

Add this in your global.css file. We're almost done!

---

Navigate back to your postbit_email template and replace all of the text with the following code:

Code:

<a href="member.php?action=emailuser&amp;uid={$post['uid']}" class="postbit">email</a>

So what did we just do? The button links to the email function and then calls for the class "postbit." This is the class we just added to the global.css, and then the text "email" is added onto the button. Now view it on your forum by viewing a thread. You now have a css button!

You'll need to modify the following templates for a sitewide re-do, which is 100% worth it:

• postbit_delete_pm
• postbit_edit
• postbit_email
• postbit_find
• postbit_forward_pm
• postbit_multiquote
• postbit_pm
• postbit_quickdelete
• postbit_quote
• postbit_rep_button
• postbit_reply_pm
• postbit_replyall_pm
• postbit_report
• postbit_warn
• postbit_www
• forumdisplay_newthread
• reputation_addlink
• showthread_newreply
• showthread_newreply_closed
  

This can be done with 15 minutes of work. It will save you so much time in the future: do it now!

Thanks for reading.

[Rainfall]

wow this is something i have never thought of before. i have wasted so much time in GIMP editing my buttons >.<

[Atsie]

....So the 3-4 hours I spent editing images in Photoshop was all for nothing?! D:
Everything I knew was a lie... still, pretty dang good tutorial.

[x-Treme]

You'd be surprised at the images you can replace by just using css.
Not only will it save you time, it will also help speed loading times of your forum if your theme uses a lot of images.

[Detrition]

Yeah, all of the default images (thead, tborder, etc) are css gradients on here.

[trammellk]

I don't know if you are missing anymore, but if they want to edit the closed button they would need to edit

showthread_newreply_closed

[wils172]

I used this tutorial to make buttons on my site. Thank you very much!

[Detrition]

No problem, glad it helped you

[Joala]

i hope to implement this on all of my future forums!

[Shole]

Thanks for the tutorial this helps me out a lot since I am new into making themes