[DMC]CSS Button Hover for All vB Default Button

[kawe]

Reply Post Button
https://vborg.vbsupport.ru/external/2009/10/31.jpg

Postbit Edit Post
https://vborg.vbsupport.ru/external/2009/10/32.jpg

New Thread
https://vborg.vbsupport.ru/external/2009/10/33.jpg

ok
how to add it ?

add this code to additional CSS ur template

.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 <div class="button">example :
this is a default code for NEW THREAD BUTTON
<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

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

[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]

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?

[kawe]

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.


for MultiQuote u must using background: #00ff00 url('http://url image') no-repeat fixed left;
if you just using Color not use image, multiquote doesn't work

[kawe]

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?

in this button have 4 element

1. background non hover
2. font color non hover
3. background with hover
4. font color with hover

you must change all HEX CODE color for setting what u want :)

[AMG021]

this doesn't seem to work in Internet explorer

[grey_goose]

This is probably a noob question, but how can I get these to align to the RIGHT ?

[grey_goose]

figured it out... btw... lovin' this, it gives the board a very understated, sophisticated look, and blends into my colored styles well...