CSS3 Postbit Images Tutorial - Printable Version

CSS3 Postbit Images Tutorial - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Coding (https://sinister.li/Forum-Coding)
+--- Forum: Coding (https://sinister.li/Forum-Coding--71)
+--- Thread: CSS3 Postbit Images Tutorial (/Thread-CSS3-Postbit-Images-Tutorial)

CSS3 Postbit Images Tutorial - Dean Winchester - 06-12-2013

Hello, as you've all seen. The postbit images have recently been changed to css3 buttons. They 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. This tutorial will be 100% written by me.

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!
Baring in mind that Uzi Gaming's is more advanced.
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!

RE: CSS3 Postbit Images Tutorial - Lexi - 06-12-2013

Quote:Baring in mind that Uzi Gaming's is more advanced.

If you want to make your posts more high quality, I suggest you don't just copy/paste them from other sites without editing them. No matter if they are yours or not, this should always be a priority.

I've known you for a while Jimmy. Don't let your standards slip now Sad

RE: CSS3 Postbit Images Tutorial - Wonders - 06-12-2013

(06-12-2013, 10:56 AM)Lexi Wrote: If you want to make your posts more high quality, I suggest you don't just copy/paste them from other sites without editing them. No matter if they are yours or not, this should always be a priority.

I've known you for a while Jimmy. Don't let your standards slip now

He (Jimmy) made this for Uzi, it's his guide/tutorial and he's posted it everywhere.

Great tutorial, thanks a lot for the share.

RE: CSS3 Postbit Images Tutorial - Dean Winchester - 06-12-2013

It's my tutorial and I made it. It's posted by me everywhere.

RE: CSS3 Postbit Images Tutorial - Lexi - 06-12-2013

(06-12-2013, 11:02 AM)Wonders Wrote: He (Jimmy) made this for Uzi, it's his guide/tutorial and he's posted it everywhere.

Great tutorial, thanks a lot for the share.

I know it's his, he just needs to make a better effort in Editing it next time around Smile

RE: CSS3 Postbit Images Tutorial - OversouL - 06-12-2013

Jimmy is a great coder. He knows a lot and has helped a lot of forums with his skill.

RE: CSS3 Postbit Images Tutorial - Cosmic - 06-15-2013

Really nice tutorial, worthy of a sticky!

RE: CSS3 Postbit Images Tutorial - Sunlight - 06-15-2013

Nice tutorial Jimmy, very simple, but still very nice.