PDA

View Full Version : Stylesheet Switcher !


Rob_Che
01-16-2009, 07:08 PM
Hey guys... it's rare to see me in this PHP forum so I'll apologise in advance if I ask silly questions... :)

Coloeagle has kindly been helping me with a little snippet to alow me to switch between .css stylesheets for my page.

It seems to work on his server but not mine although I do have PHP scripts running on the same domain - odd!

He has it running here: http://validwebdesigns.com/construction/robche/
And I'm failing here: http://www.perfectpixels.biz/tuts/styleSwitcher/index.php

YOu'll see what happens but it seems to take me to switch.php rather than action it... hmm.... any ideas ?

Rob



<html>
<head>
<title>Testing Times...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="<?php echo (!$sitestyle)?'http://www.perfectpixels.biz/tuts/styleSwitcher/css/black':$sitestyle ?>.css" />
</head>

<body>
<form action="switch.php" method="post">
<p>
<select name="set">
<option value='http://www.perfectpixels.biz/tuts/styleSwitcher/css/black' selected='selected'>Black </option>
<option value='http://www.perfectpixels.biz/tuts/styleSwitcher/css/red'>Red </option>
<option value='http://www.perfectpixels.biz/tuts/styleSwitcher/css/green'>Green </option>

</select>
<input class="button" type="submit" value="Change Design" />
</p>
</form>
<div id="text">Test Text</div>
</body>
</html>
Switch.php:

<?php
setcookie ('sitestyle', $set, time()+31536000, '/', 'perfectpixels.biz', '0');
header("Location: $HTTP_REFERER");
?>

Rob_Che
01-16-2009, 10:24 PM
Just thought... it's picking up the initial stylesheet so PHP must be being read...

edbr
01-17-2009, 12:36 AM
actually neither are working so i am guessing its a browser issue. i tried with ff3,

edbr
01-17-2009, 12:58 AM
run this to see if your info is being read
<?php

echo "Your IP Address is ";


echo $_SERVER['REMOTE_ADDR']."<br>";

echo " and your browser is " ;

echo $_SERVER["HTTP_USER_AGENT"];

?>

coloeagle
01-17-2009, 02:29 AM
I double checked my page in FF2, FF3, Chrome, IE6, IE7, and Opera9 works OK,

Just a stab here, you have switch.php in the same level as index.php. In the 'action' try having just switch.php and not the full url

edbr
01-17-2009, 02:34 AM
or <?php $_PHP['SERVER_SELF'];?>

Rob_Che
01-17-2009, 10:16 AM
I double checked my page in FF2, FF3, Chrome, IE6, IE7, and Opera9 works OK,

Yeah, yours is working fine on mine coloeagle :) FF3, Chrome and IE7...
Hence why I came here as I figured that it was difficult to debug something that was working for you! :-D Your help has been invaluable coloeagle...

I've tried having just switch.php and /switch.php but no joy...

edbr: your test came back with my IP details and browser (I assume that's what it was meant to do? haha)

or <?php $_PHP['SERVER_SELF'];?>

Sorry to be dumb... Is this a test or a resolve edbr ?

Cheers guys...

Corrosive
01-17-2009, 01:38 PM
Yeah, yours is working fine on mine coloeagle :) FF3, Chrome and IE7...
Hence why I came here as I figured that it was difficult to debug something that was working for you! :-D Your help has been invaluable coloeagle...

I've tried having just switch.php and /switch.php but no joy...

edbr: your test came back with my IP details and browser (I assume that's what it was meant to do? haha)



Sorry to be dumb... Is this a test or a resolve edbr ?

Cheers guys...

Don't mean to butt in guys but you can do this with JQuery and the minimum of fuss if you want to.

Set up a little demo at...

http://corrosiveonline.co.uk/_projects/stylesheet_switch/page1.htm

Just a thought :)

Rob_Che
01-17-2009, 05:55 PM
Cheers Corrosive - I did have a look at a couple of Java and jQuery examples.

The page I'm using it for is PHP anyway so i makes sense to try and use a PHP solution. And you know what it's like once you try to resolve something!:)

Rob

Corrosive
01-17-2009, 06:09 PM
And you know what it's like once you try to resolve something!

I certainly do mate. :)

coloeagle
01-17-2009, 06:40 PM
And you know what it's like once you try to resolve something!


I certainly do mate. :)

he,he most of us probably all too well.

Nice alternative there Corrosive.

I know this is why Rob posted it here, puzzling problem.

I use the same script for both my security site accessibility offering different color themes and text size and the beauty of css page.

Rob has it exactly as I do and nothing.

Do you do your own hosting Rob or use a host?

Rob_Che
01-18-2009, 05:39 PM
I host with Media Temple... a reputable company as far as I'm aware...

edbr
01-18-2009, 11:46 PM
try this Rob , one wot i wrote earlier. easy to change i think
first part collects the post values.
part if()can be edited to specific form values or style sheet names
$style=
the action $_SERVER ['PHP_SELF'] calls the form back on its self, so page can be named whatever
<?php

$sheet= $_POST['colour']; //form value
if (!$_POST['colour']){ $style="black"; } //sets default stylesheet

else if ($sheet==red){ $style="red";}
else if ($sheet==blue){ $style="blue";}
else if ($sheet==black){ $style="black";}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link href="<?php echo $style;?>.css" rel="stylesheet" type="text/css" />

</head>

<body>


<form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST">
<select name="colour">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>

</select>
<input name="change" type="submit" id="change" value="change" />
</form>

this is the text<br />
<?php echo $_SERVER['HTTP_USER_AGENT'];
echo $_SERVER['HTTP_HOST'];
?>
</body>
</html>

edbr
01-19-2009, 12:10 AM
obvious i hope but style sheets in this are called black.css,red.css,blue.css

Rob_Che
01-19-2009, 12:34 PM
Excellent - I'll give it a go... Cheers edbr . . .

I'll come back when I'm lost . . .

Rob_Che
01-19-2009, 09:09 PM
edbr - I think we've cracked it mate ! (I use 'we' very loosely :))

http://www.perfectpixels.biz/tuts/styleSwitcher/css/edbr.php

It seems to be working now, i really appreciate your help.
It's even starting to make a little bit of sense!

I need to give thanks to DJ too for helping me online and Coloeagle for getting me into this in the first place - thanks Coloeagle !!

Rob

Rob_Che
01-19-2009, 10:13 PM
ooh... this is what i'm after... getting close now!
http://www.perfectpixels.biz/tuts/styleSwitcher/css/edbr2.php

*this file has been moved ! *

edbr
01-19-2009, 11:21 PM
edbr - I think we've cracked it mate ! (I use 'we' very loosely :))

http://www.perfectpixels.biz/tuts/styleSwitcher/css/edbr.php

It seems to be working now, i really appreciate your help.
It's even starting to make a little bit of sense!

I need to give thanks to DJ too for helping me online and Coloeagle for getting me into this in the first place - thanks Coloeagle !!

Rob


see you back here more often now.

davidj
01-20-2009, 08:16 AM
got it!

just finished it!

err.... im i too late

Corrosive
01-20-2009, 04:22 PM
ooh... this is what i'm after... getting close now!
http://www.perfectpixels.biz/tuts/styleSwitcher/css/edbr2.php

*this file has been moved ! *

That's working nicely now Rob

What are you going to use it for? Let us in on the big plan dude!

(P.S. Would be nice if the dropdown list kept the style name you have loaded...just a thought...now I'm going to run away before you kill me.)

Rob_Che
01-20-2009, 05:08 PM
P.S. Would be nice if the dropdown list kept the style name you have loaded...just a thought...now I'm going to run away before you kill me.

I'll be doing it with buttons...
http://www.perfectpixels.biz/tuts/styleSwitcher/edbr2.php

I'll be setting a cookie too so it remembers your preference*

*translation: anyone know how to add a cookie to this? :grin:

Cheers
Rob

Corrosive
01-20-2009, 05:32 PM
I'll be doing it with buttons...
http://www.perfectpixels.biz/tuts/styleSwitcher/edbr2.php

I'll be setting a cookie too so it remembers your preference*

*translation: anyone know how to add a cookie to this? :grin:

Cheers
Rob

At least you recognise witchcraft when you see it! You'd fit right in down our way :wink:

edbr
01-21-2009, 12:25 AM
ive stayed away from them so far but sounds like a project to me !
ill look at this later basically use setcookie("name", $_POST["name"]);
will need a if condition for first visit though i would say and an condition in the style sheet selector, shouldnt be that tricky though

edbr
01-21-2009, 06:15 AM
this works (i think) expiry in a year, base on the previous values red.css etc etc.

<?php
$sheet= $_POST['colour']; //form value
setcookie("cookie", $sheet, time()+(60*60*24*365));


if (isset($_COOKIE["cookie"]))
$style= $_COOKIE["cookie"];


else if (!$_POST['colour']){ $style="black"; } //sets default stylesheet

else if ($sheet==red){ $style="red";}
else if ($sheet==blue){ $style="blue";}
else if ($sheet==black){ $style="black";}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link href="<?php echo $style;?>.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST">
<select name="colour">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>

</select>
<input name="change" type="submit" id="change" value="change" />
</form>

this is the text<br />
<?php echo $_SERVER['HTTP_USER_AGENT'];
echo $_SERVER['HTTP_HOST'];
?>
</body>
</html>

edbr
01-21-2009, 09:54 AM
this is not working . works in chrome not in opera not sure why

Rob_Che
01-21-2009, 12:08 PM
this is not working . works in chrome not in opera not sure why
The page I did with the buttons doesn't even show up on IE6!?
I just get a 404... odd.

Is there PHP cross-browser issues ?

davidj
01-21-2009, 05:24 PM
php is as alien to a browser as a banana is to a dolphin

a browser does not understand or encounter any php. If it does then it will display the code on the page as text.

a server with PHP installed will pass all php page requests to the engine. The php engine will then process the code and return only HTML which is the browsers native language.

Rob_Che
01-21-2009, 05:37 PM
ah... so it's the PHP passing incorrect HTML to the browser !
Yeah ?

davidj
01-21-2009, 05:52 PM
possibly could be a difference in browser cookie settings

edbr
01-21-2009, 11:24 PM
possibly could be a difference in browser cookie settings
did the below as a test using the same set cookie settings and this had no problem so don't think so , but i'm in new territory here.
<?php setcookie("name", "john", time()+(60*60*24*365));
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?php
if (isset($_COOKIE["name"]))
echo "Cookie set " . $_COOKIE["name"] . "!<br />";
else
echo "NO Cookie set!<br />";
?>
</body>
</html>

edbr
01-23-2009, 03:50 AM
this seems to have fixed it
<?php
$sheet= $_POST['colour']; //form value
$expire=time()+60*60*24*30;
setcookie("cookie", $sheet, $expire);

if (isset($_COOKIE["cookie"]))
$style= $_COOKIE["cookie"];

else if (!$_POST['colour']){ $style="black"; } //sets default stylesheet

else if ($sheet==red){ $style="red";}
else if ($sheet==blue){ $style="blue";}
else if ($sheet==black){ $style="black";}
?>
???

davidj
01-23-2009, 06:08 AM
id use a switch instead of handling the elseif's

edbr
01-23-2009, 06:13 AM
yes would be neater , I thought this would be easier to add or change to suit different needs, maybe not though.

Rob_Che
01-24-2009, 10:22 PM
Hi guys...

I have the switcher working here (very rough in header) www.destroybeforereading.com (http://www.destroybeforereading.com)

The cookie doesnt seem to work though... Just discovered I really need it to though as it defaults if I perform a search...
bummer.
EDITED: to add that I get XHTML errors using this...
bummer x 2...

Thanks everyone (again)

Here's my header code:

<?php

$sheet= $_POST['colour']; //form value
$expire=time()+60*60*24*30;
setcookie("cookie", $sheet, $expire);

if (isset($_COOKIE["cookie"]))
$style= $_COOKIE["cookie"];

else if (!$_POST['colour']){ $style="style_1"; } //sets default stylesheet

else if ($sheet==style_1){ $style="style_1";}
else if ($sheet==style_2){ $style="style_2";}
else if ($sheet==style_3){ $style="style_3";}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>"/>

<title>! _Destroy_Before_Reading_ !</title>

<style type="text/css" media="screen"></style>
<link href="http://www.destroybeforereading.com/wp-content/themes/destroyTheme/css/<?php echo $style;?>.css" rel="stylesheet" type="text/css" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>"/>
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>"/>
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>"/>



<?php wp_head(); ?>

</head>
<body>

<div class="wrapper">
<div id="header">

<form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST">
<input name="colour" type="submit" id="change" value="style_1" />
</form>
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST">
<input name="colour" type="submit" id="change" value="style_2" />
</form>
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST">
<input name="colour" type="submit" id="change" value="style_3" />
</form>

</div><!-- header ends -->

Rob_Che
01-24-2009, 11:08 PM
I'll probably use jquery for now until my PHP-fu is up to it (hey DJ!?) I hate having to get people to write my code.. *shamed*

davidj
01-25-2009, 10:42 AM
Main page

place all in the same directory for testing


<?php

/// test if button has been clicked and GET method invoked
if($_GET){

/// just catch a number from the button link to keep process simple
$no = $_GET['colour']; // button value

/// concatinate string with number creating css sheet naming convention
$style = "style_".$no;

/// define cookie arguments
$expire = time()+60*60*24*30;

/// set cookie
setcookie("cookie", $style, $expire);

/// detect if cookie has been set previously
}elseif($_COOKIE["cookie"]){

/// use the cookie value if it has
$style = $_COOKIE["cookie"];

/// finally if the cookie is not set and the GET method not invoked then -
/// this must be a users first time in so lets set a default style
}else{

$style = "style_1";

}


?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="<?php echo $style;?>.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
<input name="colour" type="button" id="change" value="style_1" onclick="document.location.href='?colour=1'"/>
<input name="colour" type="button" id="change" value="style_2" onclick="document.location.href='?colour=2'"/>
<input name="colour" type="button" id="change" value="style_3" onclick="document.location.href='?colour=3'"/>

</p>

<p class="textcolour">test the css sheet color</p>

</body>
</html>



******** style_1.css ************


/* CSS Document */
.textcolour{
color:#F30;
}


******** style_2.css ************


/* CSS Document */
.textcolour{
color:#03C;
}


******** style_3.css ************


/* CSS Document */
.textcolour{
color:#6C3;
}

Rob_Che
01-27-2009, 09:38 AM
Hey DJ - just seen this, sorry...

I'll give it a whirl...

Cheers... Rob