farban Posted May 22, 2008 Share Posted May 22, 2008 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. Quote Link to comment Share on other sites More sharing options...
thebadbad Posted May 22, 2008 Share Posted May 22, 2008 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. Quote Link to comment Share on other sites More sharing options...
mlin Posted May 22, 2008 Share Posted May 22, 2008 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 Quote Link to comment Share on other sites More sharing options...
farban Posted May 22, 2008 Author Share Posted May 22, 2008 thanks for the tips and help i shall work on it and send my reply in code when its done ...if i can do it lol Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.