[SOLVED] CSS changing page colour etc

R8515198 · #1 (**permalink**) Nov 22nd, 2007, 14:29

Afternoon,
Please could someone point me in the right direction for the code that is used (similar) in yahoo to change the colours of the background etc.

I know its something to do with linking to another CSS?

All help will greatly appreciated.

Cheers
Dan

welshstew · #2 (**permalink**) Nov 22nd, 2007, 15:23

If you have a look at this article it should start you in the right direction.

If you have any more questions then let us know.

Stew

Stuart · #3 (**permalink**) Nov 22nd, 2007, 18:14

This is simply accomplished with css:

Code: Select all

body {
background: #ffffff;
}

Then, change #ffffff (white) to the color you want. That should do it.
If you want to change the background of a div, do this:

Code: Select all

#header {
background: #000000;
}

(#000000 is black!) Then, make the html like this:

HTML: Select all

<div id="header"></div>

Any questions? Just ask...

Cheers

R8515198 · #4 (**permalink**) Nov 22nd, 2007, 20:14

swagner
what i am after is buttons that you press and it selects another css.

R8515198 · #5 (**permalink**) Nov 22nd, 2007, 20:19

http://www.webforumz.com/css-forum/4...yle-sheets.htm

http://www.webforumz.com/css-forum/2...lection-ie.htm

found the info

Stuart · #6 (**permalink**) Nov 22nd, 2007, 20:21

Ahh, I see. That requires JavaScript, though...
Try this tutorial

Stuart · #7 (**permalink**) Nov 22nd, 2007, 20:22

Oh, you got to it before I did. Good luck!

MikeHopley · #8 (**permalink**) Nov 22nd, 2007, 20:51

Until recently, I had about eight stylesheets on my site. I discovered that these were slowing down the initial page load, because each of them generated an http request.

Now, I only have two stylesheets: one for screen, one for print. All of the alternative styles are contained in the screen stylesheet. Instead of using JS to enable/disable stylesheets, I use it to change the class name of the <body> element.

So my styles are like this:

Code: Select all

body {
color: black;
background: white;
}

body.dark {
color: white;
background: black;
}

This accomplishes exactly the same thing, but more efficiently (only one http request instead of [N+1], where N is the number of alternative stylesheets).

The only disadvantage of this method is that it does not allow user agents to provide in-browser stylesheet selection (because all the styles are in one sheet). But this hardly matters, since it's unlikely that many users will dig around in their browser menus to switch styles (how would they even know the styles were available?). IE doesn't provide this option at all.

Stuart · #9 (**permalink**) Nov 22nd, 2007, 20:54

That's a good idea Mike! Changing the class instead of the stylesheet is much better, and faster...

MikeHopley · #10 (**permalink**) Nov 22nd, 2007, 21:07

Note that you cannot simply use:

Code: Select all

body.className = "dark"

...because this will not work with multiple class names ("dark" will replace all existing class names). You need a way to add and remove class names. Fortunately, you can use this javascript.

This is really useful in other situations too.

I should note that, one day, style switching might become common user behaviour, with prominent, intuitive browser controls. If this ever happens, my method will become bad. But until then, I like my method better.

Monie · #11 (**permalink**) Nov 27th, 2007, 00:54

I have created my own customized Page Option almost like what Yahoo have with the help of some webforumz member!

Check out this Thread, I have included the zip file as well for you to try!

Cheers..

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Green bar of colour at bottom of page gets bigger the more page is extended	pixelgirl	Web Page Design	1	Apr 1st, 2008 01:27
Changing the colour of the header	hunny	Web Page Design	4	Oct 5th, 2007 09:44
[SOLVED] Changing pictures on same page	R8515198	JavaScript Forum	7	Oct 3rd, 2007 00:14
Help with changing colour of hyperlinks	sing2trees	Web Page Design	10	May 22nd, 2007 18:08
changing the scroll bar colour	bruno89	Web Page Design	2	Oct 6th, 2005 15:12

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] CSS changing page colour etc