Miscellaneous Hacks - [DMC]CSS Button Hover for All vB Default Button

Reply Post Button


Postbit Edit Post


New Thread


ok
how to add it ?

add this code to additional CSS ur template

PHP Code:

.button {
display:inline;
}
.button a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
display: block;
padding:5px 21px;
background:#F9f9f9;
color:#3b5998;
float:left;
text-align:center;
border-top:1px solid  #C9C9DA;
border-right:1px solid #C9C9DA;
border-bottom:1px solid #C9C9DA;
border-left:1px solid #C9C9DA;
}
.button a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
background:#FFFFE0;
color:#3b5998;
border-top:1px solid #C9C9DA;
border-right:1px solid #C9C9DA;
border-bottom:1px solid #C9C9DA;
border-left:1px solid #C9C9DA;
} 


then you can search a button code on template
then replace with

PHP Code:

<div class="button"> 


example :
this is a default code for NEW THREAD BUTTON

PHP Code:

<td class="smallfont"><if condition="$show['newthreadlink']"><a href="newthread.php?$session[sessionurl]do=newthread&amp;f=$foruminfo[forumid]" rel="nofollow"><img src="$stylevar[imgdir_button]/newthread.gif" alt="$vbphrase[post_new_thread]" border="0" /></a><else />&nbsp;</if></td> 


then, i change to CSS Button with this code

PHP Code:

<td class="smallfont"><if condition="$show['newthreadlink']"><div class="button"><a href="newthread.php?$session[sessionurl]do=newthread&amp;f=$foruminfo[forumid]" rel="nofollow">New Thread</a></div><else />&nbsp;</if></td> 


Done ...


for add Image on CSS Button u can use this code on CSS Adittional

PHP Code:

background: #00ff00 url('http://url image') no-repeat fixed left; 


[BSMedia]

Nice mod, this is a decent little change for a lot of themes.

[masterweb]

Exactly what i was looking for my new skin, thanks a lot dude

[abouahmed]

nice work

i like Css codes

[Trescom]

Yes, it looks nice. But what about Multiquoting:

<if condition="$show['multiquote_post']"><a href="$post[replylink]" rel="nofollow" onclick="return false">
<img src="$stylevar[imgdir_button]/multiquote_<if condition="$show['multiquote_selected']">on
<else />off</if>.gif" alt="$vbphrase[multi_quote_this_message]" border="0" id="mq_$post[postid]" /></a></if>

I would also advise to add outline:none; and text-decoration:none; to the CSS code to get rid of that annoying outline that is making after clicking a button, and to remove the underline.

[masterweb]

Looks great but... how to change font's colors???

[Trescom]

Just change the value of underlined and red text in the CSS code:

color:#3b5998;

to whatever you need.

[masterweb]

I tried it but i feel that the code into the main CSS is having any conflict with it due doesn't matters the color i insert it the text into buttons is always blue, any idea?

[Trescom]

Ahh my bad. In order to play with links color (button links in this example) you need to add another code to the CSS:

.button a:link {
color:#000000;
}

So the whole code should look like this:

.button {
display:inline;
}
.button a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
display: block;
padding:5px 21px;
background:#F9f9f9;
color:#3b5998;
float:left;
text-align:center;
border-top:1px solid  #C9C9DA;
border-right:1px solid #C9C9DA;
border-bottom:1px solid #C9C9DA;
border-left:1px solid #C9C9DA;
}
.button a:link {
color:#000000;
}
.button a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
background:#FFFFE0;
color:#3b5998;
border-top:1px solid #C9C9DA;
border-right:1px solid #C9C9DA;
border-bottom:1px solid #C9C9DA;
border-left:1px solid #C9C9DA;
}

.button a { - is for a color of a normal tekst that you type, but not links
.button a:link { - is to show the color of links
.button a:hover { - is to show the color of links with the mouse over them

There is also a:active state, that show the links after you press them. But it has no use in this example.
I hope this will help you

[Trip]

Originally Posted by Trescom

Yes, it looks nice. But what about Multiquoting:

<if condition="$show['multiquote_post']"><a href="$post[replylink]" rel="nofollow" onclick="return false">
<img src="$stylevar[imgdir_button]/multiquote_<if condition="$show['multiquote_selected']">on
<else />off</if>.gif" alt="$vbphrase[multi_quote_this_message]" border="0" id="mq_$post[postid]" /></a></if>

Did you ever get the position for the CSS button code sorted for the multi-quote string?