View Full Version : Give users ability to swap color themes!

Jun 20th, 2010, 08:17 AM
Hello all, I come here for assistance. I am rebuilding our internal resource
site, @ the company where I work. And I thought that if I gave our users the
options to set there own color themes, it would be something they would like...

Anyways I come here to ask, if there is a simple way to do this by css, I want
to stay away from using java, I know there are ways to do this with java, but
want to see if there is away to do this by the use of css and if needed cookies.

I would have 10 or more different color themes, layouts will not be affected
just the simple color theme, font color, header color, table color, etc...



Jun 20th, 2010, 01:00 PM
You would need either cookies or session variables. And yes this is fine as CSS, but you need a server side language like PHP or ASP to do the change. Basically you put a small drop down box with the option. Then this box using Javascript changes pages to a new one with a Get statement at top like:


So the PHP script says, ok if it's blue load this style sheet and if it's another color load this one.

So a server side is required. I guess you could also do it with JS, just get the url in the location bar and run an if query. Then do a document.write command. But I would use PHP or ASP for this man. Real simple and quick really, doesn't require much work.

Jun 20th, 2010, 01:06 PM
If you want to swap the color themes without reloading page, then you need javascript.

If you want to swap the color themes reloading page, then you need to clone css (that you want to swap) and clone the page in which you want to swap the color themes.
Thus you will able to associate the cloned page with the cloned css.

May you describe better your site configuration?
Naturally PHP it's the best uninvasive solution.

Jun 20th, 2010, 01:07 PM
You see I don't use JS that much, so didn't even think about doing it without a refresh. But now that I think about it, I have seen this done before.

Jun 20th, 2010, 02:00 PM
Well basically I work at an local ISP, and our helpdesk page is a mess, and
lacks proper structure, so I'm rebuilding from scratch, its basically going to
consist of all html/xhtml and css. I know some php, and this would be best
for this project, I want to stay away from java, most of our techs leave the
helpdesk page up at all times, so I dont wana any resource hogging, as we
used programs that require for us to monitor/support fiber/dsl/t1's... that
require as much ram/processor that they can get....

And while I was putting site together I thought it would be cool to give the
techs something to spice up there bookmark of the site.

So basically some guidance, point me to some examples, or how I could best
achieve this, would be greatly appreciated!

Edit: also if I can achieve this by cookies, that would be great, as we rarely clear our history/cookies/ and I want the same theme to always be there for that
pc, they can change if they want of course, ...so that they don't have to consistently change/choose themes...



Jun 20th, 2010, 03:04 PM
Javascript and Java are two different scripting languages.
Javascript is composed by two words, Java and Script, because its syntax was influenced by Java.

Javascript doesn't require any ram/process of the webserver but only ram/process of browser (client-side).
Javascript is the easiest solution if you don't know your helpdesk structure.

I hope it will help you.

Jun 20th, 2010, 03:40 PM
Javascript doesn't require any ram/process of the webserver but only ram/process of browser (client-side).

I think that's what he meant by they leave it open and I don't want it consuming resources. He didn't mean resources on server but resources on local PC viewing page.

In short, yes JS will consume Pc resources of those viewing the page, that is way loading a popup like Lightbox if you have a lot of things open will jitter.

If you have a load of apps on each techs PC running at once, then stear clear of JS. But in this case I have to side with JS, for what you are looking for will not consume almost anything at all. Since it will only run if they change themes.

Now I don't know how JS works with cookies, I would suspect fine since JS is a client side script and cookies are stored client side.

In short, decide how you would like to go, JS or PHP. I suggest PHP personally with a small JS caller about a line in size. But this is totally up to you man.

If you choose on JS, I would suggest asking the admin to move this post to the JS area to get better help. Just a thought, but you decide which way you would like to go. Both are very viable and neither has a downside really for what little of a thing you want.

Major Payne
Jun 22nd, 2010, 05:58 AM
Both methods, JS and PHP, have already been done so you might want to Google for the scripts and implement them. Some modification might have to be made to fit your situation. Cookies will definitely need to be used if you want the selected theme to show up for users when they return.

PHP Scripts Example:

Change Color Theme With PHP – CSS Switch

CSS Colors: Take Control Using PHP (http://www.barelyfitz.com/projects/csscolor/)

Source (http://www.google.com/search?q=PHP%3A++swap+color+themes&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a)

JS Example:

Change Page Color Scheme Dynamically using Javascript (http://www.ittreats.com/os/javascript/change-page-color-scheme-dynamically-using-javascript.html)

Source (http://www.google.com/search?q=JavaScript%3A++swap+color+themes&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a)

Jun 22nd, 2010, 09:33 AM
Okay I decided to go the php route, and well I got a frame settup, I went
with this, because often we have to update links on an hourly basis, and rather
than changing the same links on a 100 diff pages, this would be the easiest
I thought of going with a cms or wiki, but an overall html setup seems to me
to be the best setup at this date and time.


I just ran into one issue, the script works, but how can I get it to apply
to entire site, rather than just that the nav window. If needed I can ask admin
to move this thread to php.

Also thanks to all of you for your help, especially you Major Payne!


Jun 22nd, 2010, 03:05 PM
Ok first frames, get rid of them, ewww. Bad idea man. You can make this work with entirely PHP instead of frames. All you do is make a header file and include it in all your pages, that way when you change links you change them once and they are included in all pages.

include 'header.php';

Very simple. That is why it's not updating the other frame. To make that work you would need a JS that updates both frames second one first then first one. And it's a lot of work. So just go with header files and footer files man. I do this all the time.

Jun 23rd, 2010, 10:22 AM
<SCRIPT TYPE="Text/JavaScript">
<!-- Beginning of JavaScript -

function changecolor(code) {

// - End of JavaScript - -->


<input type="button" name="Button1" value="RED" onclick="changecolor('red')">

<input type="button" name="Button2" value="GREEN" onclick="changecolor('green')">

<input type="button" name="Button3" value="BLUE" onclick="changecolor('blue')">

<input type="button" name="Button4" value="WHITE" onclick="changecolor('white')">




Jun 23rd, 2010, 12:34 PM
Thanks Frank, but what Im looking to achieve is allow various skins per say
which I will create, templates/skins, and give users to change, not just the
background color, I think jfreak53 mentioned will help. I will post back with
my success.


Jun 23rd, 2010, 03:15 PM
Okay, I'm pretty sure I have the skin/theme swap working the way I intend.
I'm just running into one problem. Because I have the

<?php include 'leftnav.php'; ?>
in the nav div, and corresponding nav div to the right, its not working, it keeps
getting pushed to the bottom. I have tried position: absolute and relative, as
well as floating it, I can not get it to sit next to the nav div which contains the
import/include of nav.php.... The nav php contains the php script to change
skins/themes, the index page which will be template for all pages created
contains the construct.css which tells which div to be positioned etc...


My div structure is as:

<div id="container">
<div id="col1">
<div id="area">
<?php include 'leftnav.php'; ?>
<div id="col2">
<div id="area">

The construct css that I am using to position the layout:

#container { width: auto;

#col1 {width: 210px;
margin-left: 5px;

#col2 {width: 210px;
position: absolute;
margin-left: 225px;

#area {width: 210px;

What could I be doing wrong, any suggestions on how I can get the content div to align right to the nav div?



Jun 23rd, 2010, 03:22 PM
I probably could use a negative top position, but is that the best route?

Jun 23rd, 2010, 04:36 PM
I figured it out, thanks to all of you!


Jun 24th, 2010, 04:29 PM
No prob bob! Hey where is the final page, I would like to see it? :)

Jun 24th, 2010, 04:47 PM
I had to take it down, there where a few bugs but I'll be re-upping it soon, to
test again, as my MAMp and WAMP applications php log keeps telling me the
php code is wrong, all through it works fine on the server... Know I just have
to work on the resizing, as a lot of folks up at work still use 800X600 and 1040X768.... :(

Thanks again Man!