dynamic css

7aken · #1 (**permalink**) 09-10-2006, 11:01 AM

im working on a video on demand project which is built which php, html, javscript and mysql as well as some other scripting. im wont get into the workings of the system but i need help figuring out a small matter.

im currently working on the cms which will handle amongst other things, the ability for the front desk to be able to change the style of the product. this kind of change will most likely only happen once, when the product is implemented in the clients premises but the ability to change between styles must remain. i can use javascript but its glitchy and i need a solid solution. so my thinking is to use dynamic css. ive been reading how to do this but cant find the solution i need. as mentioned, the front office who will be administering the system with the cms, need to be able to change the style of the pages which will be delivered. as such, there has to be a form to be able to switch styles as well as a folder holding my styles.

the bit i cant figure out is how best to call the css to the page once its selected. im currently tricking with the following which as it is, is not working as in the html displays minus the css. this is just experimental code. html form is first and is called styles.htm

Code:

<html>
<head></head>
<body>
<form action="start.php" method="post">
What stylesheet would you like to use? <input type="text" name="msg" size="30">
<input type="submit" value="send">
</form>
</body>
</html>

the actual page is then called start.php

PHP Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>video service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">
<?php
$style=$_POST['msg'];
if ($style == "style1"){
echo "
 @import \"css/main.css\"\;
 body {
 background-color: #FFFFFF;
 background-image: url(images/bg1.png);
}
";} elseif ($style == "style2") {
  echo "
  @import \"css/main2.css\"\;
  body {
    background-color: #ffffff;
    }"
;}
?>
</style>
</head>
<body>
<div id="page">
<div id="head" height="100%"><h1>
  <p> ..........this is the header div</p>
  </h1>
</div>
<div id="content" height="100%"><h1><br>
  ..........Content div</h1>
  <h1>&lt;---&lt;--- will need border <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
  </h1>
</div>
<div id="foot" height="100%"><h1>
  <p>.....this is the foot div</p>
</h1>
</div>
</div>
</body>
</html>

so has anyone done this or does anyone know the correct way to do it? im going to trick around with a switch which ive been creating but have already been having problems with. ie my form cant seem to pull data from the switch

ps i dont want to use cookies or a session. this has to be permanent until its changed by the front office

louie · #2 (**permalink**) 09-10-2006, 12:14 PM

First create the select menu.

Code:

<select name='style' id='style'>
<option value='_1'>style 1</option>
<option value='_2'>style 2</option>
</select>

then create the php code

Code:

<?php
$style_set = "_1";//set the default
if(@$_REQUEST['style'] <> ""){
  $style_set = $_REQUEST['style'];
  $_SESSION['set_style'] = $style_set;
  header("Location: ".$_SERVER['PHP_SELF']);//redirect so we can show the changes to the style
}
if(isset($_SESSION['set_style'])){$style_set = $_SESSION['set_style'];}
//set style if session isset
?>

then you have your stylesheet included

Code:

<?php
echo "<link rel=\"stylesheet\" href=\"style$style_set.css\" media=\"all\" />";
?>

if you don't want to use sessions or cookie store the value from the form in the database, then have a recordset pulling the data and set the

Code:

$style_set = rs['style'];

7aken · #3 (**permalink**) 09-10-2006, 12:37 PM

hi louie,

im trying to implement the code you provided (many thanks) but it doesnt seem to work, i think my structure is wrong, exactly what should go where?

louie · #4 (**permalink**) 09-10-2006, 12:40 PM

show me what you have and i'll take a look at it

louie · #5 (**permalink**) 09-10-2006, 12:53 PM

have a look here:

Code:

<?php session_start(); 
ob_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<?php
$style_set = "_1";//set the default
if(@$_REQUEST['style'] <> ""){
  $style_set = $_REQUEST['style'];
  $_SESSION['set_style'] = $style_set;
  header("Location: ".$_SERVER['PHP_SELF']);//redirect so we can show the changes to the style
}
if(isset($_SESSION['set_style'])){$style_set = $_SESSION['set_style'];}
//set style if session isset
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<?php
echo "<link rel=\"stylesheet\" href=\"style$style_set.css\" media=\"all\" />";
?>
</head>
<body>
<form name="select_style" action="x_style_set.php" method="post">
 <select name="style" onChange='this.form.submit();'>
  <option value='_1' <?php if($style_set == "_1"){echo "selected";}?>>style 1</option>
  <option value='_2' <?php if($style_set == "_2"){echo "selected";}?>>style 2</option>
 </select>
</form>
<?php echo "your style that you have selected is - <b>style$style_set.css</b>";?>
</body>
</html>

7aken · #6 (**permalink**) 10-10-2006, 06:09 AM

hey louie,

i figured it from the info you provided... many thanks. I didnt post my existing code because im 3 hours ahead of you and had left the office before you responded!! cheers

louie · #7 (**permalink**) 10-10-2006, 08:13 AM

you are welcome.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to make a H1 tag in CSS into a link	shanediffily	Coding Help	4	10-10-2006 04:54 PM

dynamic css

dynamic css

Similar Threads