vb.org Archive - [CSS tip] Like those neat, flat buttons?

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

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

- - [CSS tip] Like those neat, flat buttons? (https://vborg.vbsupport.ru/showthread.php?t=98141)

Lea Verou

10-10-2005 10:00 PM

[CSS tip] Like those neat, flat buttons?

This is not a style, just some CSS definitions to make input boxes, dropdowns and buttons have this neat, flat, modern look like they do in IPB. If this is considered a template modification (I don't think so as you don't edit any templates) then mods, feel free to move it to the appropriate subforum. :)

Fistly go to Styles & Templates>Style Manager>Main CSS.

1. Buttons

Go to the CSS settings group Buttons and add this code to Extra CSS attributes:

Code:

border-color: #ΧΧΧΧΧΧ; border-style:solid; border-width:1px; padding:2px; margin: 2px;

Substitute the #XXXXXX above with the border color you want them to have.
Finally, add to the field Background the background color you want the button to have.That's it! You're done! :)

2. Input fields

Go to the CSS settings group Input fields and add this code to Extra CSS attributes:

Code:

border-color: #ΧΧΧΧΧΧ; border-style:solid; border-width:1px; padding:2px; margin: 2px;

Substitute the #XXXXXX above with the border color you want them to have.
Finally, add to the field Background the background color you want the input field to have.That's it! You're done! :)

3. Drop-downs

Go to the CSS settings group <select> Menus and add this code to Extra CSS attributes:

Code:

border-color: #ΧΧΧΧΧΧ; border-style:solid; border-width:1px; padding:2px; margin: 2px;

Substitute the #XXXXXX above with the border color you want them to have.
Finally, add to the field Background the background color you want the dropdown to have.That's it! You're done! :)

Chances are this works with 3.0.x as well :)
If you liked it and use it, please click https://vborg.vbsupport.ru/

FleaBag

10-11-2005 06:27 PM

Awesome, installed. :)

Lea Verou

10-11-2005 06:36 PM

Quote:

Originally Posted by FleaBag

Awesome, installed. :)

Thanks!!! :)
Glad you liked it!

Quillz

10-11-2005 07:08 PM

Very nice! I love IPB's modern and professional look, but not necessarily its software. This is the best of both worlds.

Lea Verou

10-14-2005 10:39 AM

Quote:

Originally Posted by Quillz

Very nice! I love IPB's modern and professional look, but not necessarily its software. This is the best of both worlds.

Thanks a lot Quillz!

Wow, 10 installs! My first hack got a big fat zero (it has only 1 install which is mine) , so 10 looks quite a lot to me :p

TruthElixirX

10-14-2005 04:16 PM

Much appreciated.

Citizen E

10-20-2005 02:33 PM

Just a note, you can add a background color option as well:

border-color: #xxxxxx;
background-color: #xxxxxx;
border-style:solid;
border-width:1px;
padding:2px;
margin: 2px;

Lea Verou

10-20-2005 03:25 PM

Quote:

Originally Posted by Citizen E

Just a note, you can add a background color option as well:

border-color: #xxxxxx;
background-color: #xxxxxx;
border-style:solid;
border-width:1px;
padding:2px;
margin: 2px;

Why would you? vBulletin has already a field for background color which does this exact thing ;)

Mr Chad

10-21-2005 01:24 AM

Cool.

yessir

12-17-2005 06:26 PM

Thanks lady.

Jeramy

12-19-2005 04:12 PM

Awesome tip. I just integrated it with my style .

Lea Verou

12-19-2005 07:42 PM

Quote:

Originally Posted by jeramy

Awesome tip. I just integrated it with my style .

Nice style! Perhaps now you should update the screenshots... ;)

Jeramy

12-19-2005 08:22 PM

Quote:

Originally Posted by Michelle

Nice style! Perhaps now you should update the screenshots... ;)

Fair enough. I will when I get some time.

Lea Verou

12-19-2005 08:29 PM

Quote:

Originally Posted by jeramy

Fair enough. I will when I get some time.

A suggestion would also be to change the vb default icons with icons of your creation ;)
It's a shame to let these icons spoil such a beautiful theme... :)

Jeramy

12-19-2005 08:46 PM

Quote:

Originally Posted by Michelle

A suggestion would also be to change the vb default icons with icons of your creation ;)
It's a shame to let these icons spoil such a beautiful theme... :)

Whenever I get enough time / motivation / strikes of creative genius, I plan on it.

Lea Verou

12-19-2005 08:59 PM

Quote:

Originally Posted by jeramy

Whenever I get enough time / motivation / strikes of creative genius, I plan on it.

If you ever need a ready-made icon, you can ask me, I have about 30.000 icons :p
I'm an icon addict :p

99SIVTEC

12-19-2005 09:21 PM

Anyone have a mod that replaces the buttons in the forums (newthread, newreply, quote, etc) with css?

Jeramy

12-19-2005 09:26 PM

Quote:

Originally Posted by 99SIVTEC

Anyone have a mod that replaces the buttons in the forums (newthread, newreply, quote, etc) with css?

You could always ask here

Lea Verou

12-20-2005 02:48 AM

Quote:

Originally Posted by 99SIVTEC

Anyone have a mod that replaces the buttons in the forums (newthread, newreply, quote, etc) with css?

If you find something like that, please drop me a pm.
I also need it :)

TiKi XB

12-21-2005 11:15 AM

Or better, post it in this thread. I too would like that, would save bandwidth and look more professional.

Icon addict aye, would be interested in having a look at a few if you really have that many. I don't know where mine came from (my theme sort of happened over the years) but they could use with updating.

Now onto business, is there anyway I can fix the alignment as shown in the image below? Drop down doesn't match up with the button.

Thanks for the mod.

Lea Verou

12-21-2005 11:55 AM

Quote:

Originally Posted by TiKi XB

TiKi they are too many to post. You can describe what you want and I'll look for it :)

I don't know about the alignment... I had something similar, but darn I can't remember how I solved it :(

Lea Verou

12-31-2005 01:08 PM

Does anyone know how to apply something like this to fieldsets as well so that they don't have that "3d" look? I have tried and tried but can't accomplish it :(

hitmanuk2k

01-01-2006 02:17 PM

Is it possible to have an inner border on the buttons also? Like so you technically have 2 borders (would look neat).

Lea Verou

01-01-2006 02:19 PM

I didn't understand what you mean but try messing with the "solid" in the CSS definitions and put instead other border styles :)

hitmanuk2k

01-01-2006 03:02 PM

I mean kinda like the Page nav tables... here for example they have both a grey and white border (well, I know they arnt actuall borders... but thats the effect I wanted.

YOimYO

01-01-2006 04:27 PM

nice. i altered mine ;) alignment is good first try :)

PennylessZ28

05-15-2006 05:09 AM

Very nice, I like.

Taragon

05-11-2008 10:12 PM

Thanks! Just wanted to add this works great with vB 3.7.0.

All times are GMT. The time now is 04:57 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01289 seconds Memory Usage 1,778KB 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 (3)bbcode_code_printable (11)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (28)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 bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: