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


Possibly Related Threads…
Thread Author Replies Views Last Post
  MyBB CSS Postbit Buttons Peter L 1 1,305 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 719 07-14-2012, 05:26 PM
Last Post: 'Snorlax

Forum Jump:


Users browsing this thread: 2 Guest(s)