Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
[CSS tip] Like those neat, flat buttons? Details »
[CSS tip] Like those neat, flat buttons?
Mod Version: 1.00, by Lea Verou (Member) Lea Verou is offline
Developer Last Online: Jul 2012 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 3.5.0 Rating: (3 votes - 5.00 average) Installs: 46
Released: 11 Oct 2005 Last Update: Never Downloads: 7
Not Supported  

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	CSS_screenie.PNG
Views:	1903
Size:	4.4 KB
ID:	35616  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Neat Quotes KTBleeding vBulletin 3.0 Template Modifications 18 03 Feb 2007 22:55
[Release RC4] Neat Quotes .LuTioN. vBulletin 3.0 Template Modifications 22 27 Feb 2006 21:32
Neat Code KTBleeding vBulletin 3.0 Template Modifications 1 23 Jul 2005 20:35

  #16  
Old 19 Dec 2005, 21:59
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Real name: Lea Verou
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
I'm an icon addict
Reply With Quote
  #17  
Old 19 Dec 2005, 22:21
99SIVTEC 99SIVTEC is offline
 
Join Date: Nov 2001
Anyone have a mod that replaces the buttons in the forums (newthread, newreply, quote, etc) with css?
Reply With Quote
  #18  
Old 19 Dec 2005, 22:26
Jeramy Jeramy is offline
 
Join Date: Nov 2004
Real name: Jeramy Webb
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
Reply With Quote
  #19  
Old 20 Dec 2005, 03:48
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Real name: Lea Verou
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
Reply With Quote
  #20  
Old 21 Dec 2005, 12:15
TiKi XB TiKi XB is offline
 
Join Date: Sep 2003
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.
Attached Images
File Type: jpg Alignment.JPG (3.5 KB, 34 views)
Reply With Quote
  #21  
Old 21 Dec 2005, 12:55
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Real name: Lea Verou
Originally Posted by TiKi XB
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.
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
Reply With Quote
  #22  
Old 31 Dec 2005, 14:08
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Real name: Lea Verou
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
Reply With Quote
  #23  
Old 01 Jan 2006, 15:17
hitmanuk2k hitmanuk2k is offline
 
Join Date: Dec 2002
Real name: Peter Willis
Is it possible to have an inner border on the buttons also? Like so you technically have 2 borders (would look neat).
__________________
Obsessed With Film
Reply With Quote
  #24  
Old 01 Jan 2006, 15:19
Lea Verou Lea Verou is offline
 
Join Date: Jul 2005
Real name: Lea Verou
I didn't understand what you mean but try messing with the "solid" in the CSS definitions and put instead other border styles
Reply With Quote
  #25  
Old 01 Jan 2006, 16:02
hitmanuk2k hitmanuk2k is offline
 
Join Date: Dec 2002
Real name: Peter Willis
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.
__________________
Obsessed With Film
Reply With Quote
  #26  
Old 01 Jan 2006, 17:27
YOimYO YOimYO is offline
 
Join Date: Oct 2005
nice. i altered mine alignment is good first try
Reply With Quote
  #27  
Old 15 May 2006, 06:09
PennylessZ28 PennylessZ28 is offline
 
Join Date: Mar 2002
Real name: Mike
Very nice, I like.
Reply With Quote
  #28  
Old 11 May 2008, 23:12
Taragon's Avatar
Taragon Taragon is offline
 
Join Date: Sep 2007
Real name: Cor
Thanks! Just wanted to add this works great with vB 3.7.0.
__________________
Turning Strigoi? Vampire Academy - Bta.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 23:03.

Layout Options | Width: Wide Color: