MyBB CSS Postbit Buttons

[Peter L]

This tutorial is going to show you how to replace the default MyBB image buttons (postbit, new reply, new thread, etc) with CSS buttons.
Tutorial written for MyBBAddict.com

Back on topic, 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.

['Snorlax]

Nice and easy tutorial to follow! Thanks a lot, might use it in future