Support Forums

Full Version: [MyBB] CSS3 Buttons
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
So here's a quick tutorial on how to make them.

First of all, open up your Admin CP and click the Templates & Style tab.
Click the theme name you're currently using and click 'Add style sheet'.

The code used:

Code:
.buttons {
        background: #D02626; /* Color of the button */
        border: 1px solid #6E0000; /* Color and width of border */
        padding: 3px 12px; /* Height and width of button */
        color: #fff; /* Color of the font */
        font-weight: bold; /* Makes the text bold */
        font-size: 12px; /* Size of the font */
        font-family: Tahoma; /* Font used on the button */

}

Hit SAVE!

After that's done, head over to templates and click your theme name.
Click Post Bit Templates then click postbit_edit for an example.

Replace the whole code with this:

Code:
<a href="editpost.php?pid={$post['pid']}" id="edit_post_{$post['pid']}" class="buttons">Edit</a>
<div id="edit_post_{$post['pid']}_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="javascript:;" onclick="Thread.quickEdit({$post['pid']});" class="popup_item">{$lang->postbit_quick_edit}</a></div><div class="popup_item_container"><a href="editpost.php?pid={$post['pid']}" class="popup_item">{$lang->postbit_full_edit}</a></div></div>
<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        new PopupMenu("edit_post_{$post['pid']}");
    }
// -->
</script>

Notice

Code:
class="buttons"
That's what connects the css to the button.
Then go on to edit the other templates! You can edit the CSS to suit your needs.