advanced style sheets

[buro9]

just thought i'd give you a link to the forum i just set up, it's very young (replace young with empty!) and is implemented in a burgundy sorta theme.

notably though (looking at everyone else's implementations) i've edited the style sheet header to point to my site wide style sheet.

by doing this i can apply style sheet attributes to the form elements, horizontal rules, fonts, etc all at the same time that i change my own site.

true, change one file and the whole world changes too!

you can define the following basic elements in style sheets that relate to forms:

INPUT
SELECT
TEXTAREA

which can go quite a way to pretty things up without having to change your templates much.

but for total control, of everything (radio options, submit buttons, etc) consider these styles that i've used....

INPUT  {
	BACKGROUND-COLOR : Maroon;
	BORDER-BOTTOM : #FFFFFF 1px solid;
	BORDER-LEFT : #FFFFFF 1px solid;
	BORDER-RIGHT : #FFFFFF 1px solid;
	BORDER-TOP : #FFFFFF 1px solid;
	COLOR : White;
	FONT-FAMILY : geneva, arial, helvetica, lucida-sans, sans-serif;
	FONT-SIZE : 12px;
	font-weight : normal;
}

SELECT  {
	BACKGROUND-COLOR : Maroon;
	BORDER-BOTTOM : #FFFFFF 1px solid;
	BORDER-LEFT : #FFFFFF 1px solid;
	BORDER-RIGHT : #FFFFFF 1px solid;
	BORDER-TOP : #FFFFFF 1px solid;
	COLOR : White;
	FONT-FAMILY : geneva, arial, helvetica, lucida-sans, sans-serif;
	font-size : 12px;
	font-weight : normal;
}

TEXTAREA  {
	BACKGROUND-COLOR : Maroon;
	BORDER-BOTTOM : #FFFFFF 1px solid;
	BORDER-LEFT : #FFFFFF 1px solid;
	BORDER-RIGHT : #FFFFFF 1px solid;
	BORDER-TOP : #FFFFFF 1px solid;
	COLOR : White;
	font-family : geneva, arial, helvetica, lucida-sans, sans-serif;
	font-size : 12px;
	font-weight : normal;
}

INPUT.Button  {
	BACKGROUND-COLOR : #330000;
	BORDER-BOTTOM : #FFFFFF 1px outset;
	BORDER-LEFT : #FFFFFF 1px outset;
	BORDER-RIGHT : #FFFFFF 1px outset;
	BORDER-TOP : #FFFFFF 1px outset;
	COLOR : White;
	font-weight : bold;
	font-family : geneva, arial, helvetica, lucida-sans, sans-serif;
	font-size : 12px;
}

INPUT.Radio  {
	BACKGROUND-COLOR : #990000;
	BORDER-BOTTOM : #990000 1px outset;
	BORDER-LEFT : #990000 1px outset;
	BORDER-RIGHT : #990000 1px outset;
	BORDER-TOP : #990000 1px outset;
	COLOR : White;
	font-weight : bold;
	font-family : geneva, arial, helvetica, lucida-sans, sans-serif;
	font-size : 12px;
}

then by using

class="Button"

within the input tags for submit and reset buttons, you can apply perfect styling to EVERY aspect and form element that you have.

these tricks can take a site a long way to looking very very stylish. they are simple but can make a powerful impact with even the most basic colour scheme.

just remember that you'll have to go through your templates to make sure all radio buttons, checkboxes (for which i still use the radio style) and buttons have the additional

class

attribute in their tags.

oh, and that link to my forum...
http://www.buro9.com/forum/
and the for the site from which the styles are more widely implemented
http://www.jeepster.co.uk/

cheers

david

[Troy Roberts]

Graphics

Any objections to borrowing some of your graphics? I'd like to see how your submit thread and post reply icons look on my site.

[buro9]

nope, no objections at all, i borrowed them with permission from someone else anyway, and they had no objections to them being re-distributed, so as far as i know, they're 'out there' for anyone to use

cheers

[Troy Roberts]

Thanks. I'll give them a try.

[houdini]

Originally posted by buro9
just thought i'd give you a link to the forum i just set up, it's very young (replace young with empty!) and is implemented in a burgundy sorta theme.

...

INPUT.Button {
BACKGROUND-COLOR : #330000;
BORDER-BOTTOM : #FFFFFF 1px outset;
BORDER-LEFT : #FFFFFF 1px outset;
BORDER-RIGHT : #FFFFFF 1px outset;
BORDER-TOP : #FFFFFF 1px outset;
COLOR : White;
font-weight : bold;
font-family : geneva, arial, helvetica, lucida-sans, sans-serif;
font-size : 12px;
}

INPUT.Radio {
BACKGROUND-COLOR : #990000;
BORDER-BOTTOM : #990000 1px outset;
BORDER-LEFT : #990000 1px outset;
BORDER-RIGHT : #990000 1px outset;
BORDER-TOP : #990000 1px outset;
COLOR : White;
font-weight : bold;
font-family : geneva, arial, helvetica, lucida-sans, sans-serif;
font-size : 12px;
}
[/CODE]

then by using

class="Button"

within the input tags for submit and reset buttons, you can apply perfect styling to EVERY aspect and form element that you have.

...

just remember that you'll have to go through your templates to make sure all radio buttons, checkboxes (for which i still use the radio style) and buttons have the additional

class

attribute in their tags.

oh, and that link to my forum...
http://www.buro9.com/forum/
and the for the site from which the styles are more widely implemented
http://www.jeepster.co.uk/

cheers

david

I'm a little lost, I know you gave permission on your graphics, but may I browse and possibly use your code to get the button colors the way they are?

I am working on http://ucnb.rutgers.edu/forums and would like my buttons to appear #CC0000 for the light gradient and #990000 for the dark gradient. Thus far, I can't search this forum for the word "red" as it's under the 4 character limit and nobody is responding to my request for help on making my own red buttons.

houdini

[buro9]

to say i was urprised to see this thread resurrected is an under statement. now i know how long my forum has run

take whatever you want from my site... after the buttons one of the snazzier things is probably the anti-flood javascript that disables the submit button after it has been submitted... give it a try and good luck on ripping it

seriously, i'm soooo for open source, anything on my site that isn't content (owned by those who submit it) or vbulletins can be taken and used however you please

you need to register and then switch your style to the red one under your control panel to get everything burgundy

cheers

david k

[houdini]

I purchased my license not more than 2 weeks ago. Where can I enter my license info or register my online copy to access what you're mentioning? I'd like to have the ability to change the button colors.

It's a good thing that your board is still up and running. Many get started, but few last through the test of time. I've had people leave stuff up on servers for years and forget that they ever did the site.

Thanks for the okay on sharing. If I can ever figure out how to manipulate my index and add buttons or things like "Announcements" or "Latest Discussions", I'll add an Acknowledgments page to recognize those who have helped me out along the way. I have to give "props" to AsusBoards.com as their webmaster and my friend has recommended the best platform IMHO.



houdini

[Steve Machol]

Originally posted by houdini
I purchased my license not more than 2 weeks ago. Where can I enter my license info or register my online copy to access what you're mentioning? I'd like to have the ability to change the button colors.

I'm not sure what you're trying to access but the Members Area is here:

http://www.vbulletin.com/members/

[houdini]

Hi Steve,

I can access the members area.

buro9 mentioned registering my copy in order to be able to switch the style to the red one.

I've been able to switch just about everything except the buttons. I wish vBulletin came with a GUI for building a page including "Latest Discussions", "Announcements", etc, or at least a straight forward tutorial on how to add a button, the pages for the button, and also how to create an index page to pull info from the db. I would consider these things to better enable developers of sites to make vast changes more easily.

If it's in the manual, I haven't checked yet. I haven't printed it out yet because I think there are extra pages just from the table of contents appearing on every topic.

I did check out the Announcements section of the manual, and it just describes what they are and where they appear, but mind don't seem to be appearing.

http://ucnb.rutgers.edu/forums if you wanna see what I've accomplished thus far.



houdini