Making CSS3 Buttons in MyBB - Printable Version

Making CSS3 Buttons in MyBB - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: Making CSS3 Buttons in MyBB (/Thread-Making-CSS3-Buttons-in-MyBB)

Pages: 1 2

Making CSS3 Buttons in MyBB - Dean Winchester - 02-22-2013

Hello, as you've all seen. The postbit images look a lot better, as in better I mean higher quality.

Every successful forum needs them to be honest! 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'.

[Image: 11Q1WXMvLX.png]

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 */

}

Make the settings the same as the image above!

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!

Enjoy Smile

RE: Making CSS3 Buttons in MyBB - Beaker - 02-22-2013

Cool tutorial. I feel like you are secretly advertising your website though Tongue

Anyways, good guide.

RE: Making CSS3 Buttons in MyBB - Dean Winchester - 02-23-2013

(02-22-2013, 09:39 PM)Beaker Wrote: Cool tutorial. I feel like you are secretly advertising your website though Anyways, good guide.

Glad you like it. And I'm not. Where can you see a link?

RE: Making CSS3 Buttons in MyBB - Flashdrive - 02-23-2013

(02-23-2013, 02:10 AM)Jimmy Wrote: Glad you like it. And I'm not. Where can you see a link?

I think he means the "Uzi Gaming" bar in one of your screenshots.

RE: Making CSS3 Buttons in MyBB - Dean Winchester - 02-23-2013

(02-23-2013, 02:11 AM)Flashdrive Wrote: I think he means the "Uzi Gaming" bar in one of your screenshots.

Is it wrong to show a pic of the demo board? If so, I'll crop it.

RE: Making CSS3 Buttons in MyBB - Sir_CnC - 02-23-2013

(02-22-2013, 09:39 PM)Beaker Wrote: Cool tutorial. I feel like you are secretly advertising your website though Anyways, good guide.

-

Nice tutorial btw, going to try get this working on my forum!

RE: Making CSS3 Buttons in MyBB - Flashdrive - 02-23-2013

(02-23-2013, 02:13 AM)Jimmy Wrote: Is it wrong to show a pic of the demo board? If so, I'll crop it.

If it's not an active board with members on it i'm sure it's fine.

RE: Making CSS3 Buttons in MyBB - Mario - 02-26-2013

Nice tutorial Jimmy!!! : ) Well... as always. : P

RE: Making CSS3 Buttons in MyBB - Gogeta - 02-26-2013

Nice tutorial Jimmy. I'm trying to learn loads of CSS so im sure ill be using this soon Tongue

RE: Making CSS3 Buttons in MyBB - Dean Winchester - 02-26-2013

(02-26-2013, 10:59 AM)Gogeta Wrote: Nice tutorial Jimmy. I'm trying to learn loads of CSS so im sure ill be using this soon

Glad you liked it mate. Good Luck with your CSS learning.