Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 3 Vote(s) - 3.67 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Style your forum buttons with css : with multiquote working

envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #1
Thumbs Up Style your forum buttons with css : with multiquote working

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

Code:
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;
    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

Code:
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 :

Code:
class="button"

Here i give an example :

In postbit_rep_button
you will find this code :

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="jMyBB.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.

[Image: YAjyF.png]

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 :

Code:
<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.

Thank you,
regards,

Dr.Envira Phani

[Image: lt79ucY.png]
08-19-2012 09:51 PM
Find
1
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #2
RE: Style your forum buttons with css : with multiquote working

Good Tutorial i'm really interested about your tutorial for improving design
08-22-2012 03:36 PM
Find
0
Quote




myskins Offline
Super Moderator
******

Posts: 13
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 204.34Points
Post: #3
RE: Style your forum buttons with css : with multiquote working

(08-22-2012 03:36 PM)Pirate_Dominic Wrote:  Good Tutorial i'm really interested about your tutorial for improving design

Thank You buddy, Yes keep watching this forum for more tutorials Smile

[Image: KIDsp.png]
08-22-2012 05:35 PM
Find
0
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #4
RE: Style your forum buttons with css : with multiquote working

Can you make a tutorial how to make the jquery toggle collapse like your forum ?? Smile
08-22-2012 07:45 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #5
RE: Style your forum buttons with css : with multiquote working

(08-22-2012 07:45 PM)Pirate_Dominic Wrote:  Can you make a tutorial how to make the jquery toggle collapse like your forum ?? Smile

Well sure,but to make a note that we didnt implement the toggle collapse to our forum.
If i am mistaken can you make a screenshot of the feature you want,so i can look into it and make a tut on it Smile

[Image: lt79ucY.png]
08-22-2012 10:10 PM
Find
0
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #6
RE: Style your forum buttons with css : with multiquote working

i want make a collapse that appear when the cursor go on the thead and disappear when it isn't on it
08-22-2012 10:37 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #7
RE: Style your forum buttons with css : with multiquote working

Oh okay thats easy one.
I will make a tut asap.

Regards,

[Image: lt79ucY.png]
08-22-2012 10:46 PM
Find
0
Quote




Verilog Offline
Junior Member
**

Posts: 14
Joined: Aug 2012
Likes Received : 3

Nationality:

Mood: None

Points: 279.94Points
Post: #8
RE: Style your forum buttons with css : with multiquote working

Bro, i sent you a pm
Applied this and had a problem Sad

MyBB Themes at WallBB.co.uk
09-26-2012 09:47 PM
Find
0
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #9
RE: Style your forum buttons with css : with multiquote working

What is your problem bro?? Smile
09-26-2012 10:33 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #10
RE: Style your forum buttons with css : with multiquote working

(09-26-2012 09:47 PM)Verilog Wrote:  Bro, i sent you a pm
Applied this and had a problem Sad

Ahh, buddy you need to change colors for the light buttons scheme.
Thats so simple :
change background: #424242;
to background: #ccc;
or what ever color you need Smile
That will help you

[Image: lt79ucY.png]
09-26-2012 11:03 PM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Information Add Social Links to Your MyBB Forum envira 3 3,752 09-25-2016 03:59 AM
Last Post: smash
Heart Enhanced Social Share buttons Tutorial without plugins envira 13 8,129 09-05-2016 02:37 AM
Last Post: noah
  Forum Hover Effect on MyBB Index Page envira 8 4,417 08-17-2014 11:59 PM
Last Post: !!!a
  How To Create Free MyBB-Based Forum. Jero 15 3,339 07-20-2014 06:44 PM
Last Post: VetFalco
  Add a snow effect to your forum Dropkaz 5 1,417 06-09-2014 08:00 PM
Last Post: LivingKing
  How to create Thread prefixes Style like IPB Dropkaz 0 3,461 04-10-2014 10:49 PM
Last Post: Dropkaz
  Adding Collapse Buttons to Any Table effone 1 1,333 03-30-2013 12:06 AM
Last Post: envira

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.