vb.org Archive - Miscellaneous Hacks - [DMC]CSS Button Hover for All vB Default Button

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)

- - Miscellaneous Hacks - [DMC]CSS Button Hover for All vB Default Button (https://vborg.vbsupport.ru/showthread.php?t=225503)

[DMC]CSS Button Hover for All vB Default Button

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

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;

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

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

nice work

i like Css codes

Yes, it looks nice. But what about Multiquoting:

Code:

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

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

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

Code:

color:#3b5998;

to whatever you need.

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?

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

Code:

.button a:link {

color:#000000;

}

So the whole code should look like this:

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

Quote:

Originally Posted by Trescom (Post 1909216)

Yes, it looks nice. But what about Multiquoting:

Code:

<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?

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (5)bbcode_php_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01373 seconds Memory Usage 1,763KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (5)bbcode_php_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: