Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[MyBB] CSS3 Buttons
#1
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.
Reply


Messages In This Thread
[MyBB] CSS3 Buttons - by Galaxy - 10-24-2014, 09:50 AM

Possibly Related Threads…
Thread Author Replies Views Last Post
  MyBB CSS Postbit Buttons Peter L 1 1,439 07-14-2012, 05:52 PM
Last Post: 'Snorlax
  Can I get such css3 animation to work in Internet Explorer, Opera, and such browsers? Mark Topper 1 844 07-14-2012, 05:26 PM
Last Post: 'Snorlax

Forum Jump:


Users browsing this thread: 2 Guest(s)