PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!
Moderator: General Moderators
JonnySnip3r!
Forum Newbie
Posts: 2 Joined: Mon Sep 21, 2009 3:53 am
Post
by JonnySnip3r! » Sun Sep 27, 2009 9:32 am
Please hopw someone can help im a php n00b
If i have this List box in HTML:
Code: Select all
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form name="form1" method="post" action="">
<label>
<select name="themes" id="themes">
<option>Select Theme</option>
<option>Blue</option>
<option>Green</option>
<option>Red</option>
</select>
</label>
</form>
</body>
</html>
How can i have different style sheets on my site but say when a user selects blue it will select blue.css and apply the blue theme.
Thanks in advance.
jmaker
Forum Newbie
Posts: 16 Joined: Tue May 21, 2002 11:13 pm
Post
by jmaker » Sun Sep 27, 2009 10:32 am
If you want to change styles dynamically I don't think php would be your best option. Instead use a little javascript like so.
Assuming you have your 3 css files named blue.css, green.css, and red.css.
And then of course the green and red styles would have their colors changed accordingly.
When a person changes the select box, that style sheet would be applied to the page.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Css Themes</title>
<link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" id="ss" />
<script type="text/javascript" charset="utf-8">
function changeStyle(obj) {
document.getElementById("ss").href = obj.value;
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<label>
<select name="themes" id="themes" onChange="changeStyle(this)">
<option>Select Theme</option>
<option value='blue.css'>Blue</option>
<option value='green.css'>Green</option>
<option value='red.css'>Red</option>
</select>
</label>
</form>
</body>
</html>