MyBB Community Forums

Hello friends,
I have made this tut in the past,and used this on all my themes too,click link,and now i am making a quick tutorial regarding the css buttons.

These codes not only changes your default buttons,it also can be applied any where in your forums,for example the post bit buttons.

So lets start this :

Step 1 : Just navigate to your ACP > Your Theme > Global.css > advanced

add this code at the very bottom

input.button {
    background: #424242;
    padding: 4px 10px;
    border: 1px solid #424242;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        border-radius: 2px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0px -1px 0px #517090;
     transition: color .3s;
        -moz-transition: color .3s;
        -o-transition: color .3s;
        -webkit-transition: color .3s;
}

input.button:hover {
    background: #292929;
    padding: 4px 10px;
    border: 1px solid #292929;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        border-radius: 2px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0px -1px 0px #7492b1;
    cursor: pointer;        
}

.buttonn {
    background: #424242 url(images/chameleon2/butbg.png)repeat-x;
    padding: 4px 10px;
    border: 1px solid #424242;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        border-radius: 2px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0px 0px 0px #cacaca;
     
}

.buttonn:hover {
    background: #292929;
    padding: 4px 10px;
    border: 1px solid #292929;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;
        border-radius: 2px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0px -1px 0px #7492b1;
    cursor: pointer;        
}

.buttonn:link, .button:visited {
   color: #fff;
   text-decoration: none;
}

.buttonn:active {
   background: #292929  repeat-x top left!important;
   color: #cacaca;
   text-decoration: none;
}

Step 2 :

Not its all html work,you can add the button class to all your post bit buttons.
For this navigate to ACP > Templates > Your theme templates > Postbit Templates

Just open various locations of buttons that can be changed in post bit

postbit_delete_pm
postbit_edit
postbit_email
postbit_find
postbit_forward_pm
postbit_multiquote
postbit_pm
postbit_quickdelete
postbit_quote
postbit_rep_button
postbit_reply_pm
postbit_replyall_pm
postbit_report
postbit_warn
postbit_www
forumdisplay_newthread
reputation_addlink
showthread_newreply
showthread_newreply_closed

Add the below variable in the place of the image code :

class="button"

Here i give an example :

In postbit_rep_button
you will find this code :

<a href="javascript:MyBB.reputation({$post['uid']},{$post['pid']});"><img src="{$theme['imglangdir']}/postbit_reputation.gif" alt="{$lang->postbit_reputation}" title="{$lang->postbit_reputation}" /></a>

For the css buttons you should replace with this :

[code<a href="javascript:MyBB.reputation({$post['uid']},{$post['pid']});" class="buttonn" title="{$lang->postbit_reputation}" />Rep +</a>[/code]

Step 3:

For the Multi quote option

You need 2 images which are just 16x16 sized icons

i am providing attachments the icons which i use regularly,download them.



Just replace the images in your theme folder > english with the attached images.

Replace the code in your templates > Postbit_multiquote with the code below :

<a href="javascript:Thread.multiQuote({$post['pid']});" style="display: none;" id="multiquote_link_{$post['pid']}"><img src="{$theme['imglangdir']}/postbit_multiquote.gif" class="buttonn" title="{$lang->postbit_multiquote}" id="multiquote_{$post['pid']}" align="top" width="14" height="12"/></a>
<script type="text/javascript">
//<!--
	$('multiquote_link_{$post['pid']}').style.display = '';
// -->
</script>

This is it.
You will have nice postbit css buttons with multiquote function.

Here is a demo of those buttons in action : click me

I wish this will help many users in customising their themes.
You can use your own colors and images for multiquote.

Tutorial updated : 16/03/2012
Thanks to Audentio for mentioning the Bugs with the previous tut.

Thank you,
regards,

Dr.Envira Phani

I'm not quite sure why you have in input inside of an anchor, those two are both click-based elements. Here is an interesting read: http://stackoverflow.com/questions/80283...t-explorer

(2012-03-13, 07:13 PM)Audentio Wrote: [ -> ]I'm not quite sure why you have in input inside of an anchor, those two are both click-based elements. Here is an interesting read: http://stackoverflow.com/questions/80283...t-explorer

Ohh thanks for that Mike.
I used it on my forums and pretty working in IE 8 too.
Not a problem with other browsers.
I will update the tut with another code,if it is buggy though.

i am having problems getting this to work :/ (firefox 11.0)

Tutorial updated,
I wish now it is more easy and clear

How did you make the login thing? I have been wanting that so bad. Can you make a Tutorial on that?

they break with internet explorer how i fix that? ie6 <<

(2012-06-27, 04:53 PM)shinra Wrote: [ -> ]they break with internet explorer how i fix that? ie6 <<

stop using ie6

(2012-06-27, 05:45 PM)brad-t Wrote: [ -> ]

(2012-06-27, 04:53 PM)shinra Wrote: [ -> ]they break with internet explorer how i fix that? ie6 <<

stop using ie6

i am not using ie6 my members are.. .

tell them to upgrade. seriously. IE6 is over ten years old. even microsoft doesn't want people to use it.

http://www.ie6countdown.com/