Jump to content

wondering how to change the css using radio buttons and varibles


farban

Recommended Posts

Hello there i have to create a site with changable css style using radio buttons. but im really newb at how to approuch this so i was wondering if any had any tips or suggestions for how i could do it? im getting the overall thought that the css needs values and conditions but im not sure how to construct this in code.

I've made this before, here's my approach:

 

Use cookies to remember each user's choice of theme. On each page, check for this cookie - if it exists, retrieve the value of it, and set the theme chosen. For the default theme, I have one CSS file, loaded on every page:

 

<head>
<link rel="stylesheet" type="text/css" media="screen" href="/css/default.css" />
</head>

 

If an alternate theme is found in the cookie, a separate CSS file would be loaded after the default one:

 

<head>
<link rel="stylesheet" type="text/css" media="screen" href="/css/default.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/dark.css" />
</head>

 

The new CSS file contains different values for properties already in the default CSS file. Example:

 

default.css

body {
background-color: white;
}

 

dark.css

body {
background-color: black;
}

 

In CSS, when a property is declared more than once, like above, the last value counts. That would make our page background black, when we load both files like we did.

 

I find this way the easiest, since the alternate theme files only need to declare the properties that need to be changed. Another approach would be to serve the CSS dynamically through PHP, but IMO that's just making things more complicated.

 

---

 

On how to change the theme:

 

If you want to stick with radio buttons, either use javascript to load the cookie setting page onclick, or use a submit button to be kind to non-javascript users.

 

I will not get into any actual PHP code, that's your work :) But if you've got problem with some code later on, just ask for help here.

javascript has the style stuff...umm

 

say you've got:

 

<a onclick='change_style();'>Change Style</a>

 

<div id='styleable'>

  bunch of text...

</div>

 

you can define your js function like so:

 

function change_style() {

  var div = document.getElementById('styleable');

  div.style.font-weight = 'bold';

  div.style.color = 'grey';

}

 

so once the link is clicked, the styles of the div id'd as styleable will be changed to bold and grey text. Most CSS can be manipulated dynamically the same way ;)

 

hope that helps ;)

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.