Random style sheet selection on homepage that is then consistent throughout the site?

diafol · 2010-05-26T01:44:26+00:00

JS can write cookies - but you don't want this.
php/other server side languages can use querystrings (url parameters) to propagate the chosen css sheet.

However, the best way - if you don't want to use cookies would be to use session variables.

php example:

Link list

<ul>
<li><a href="<?php echo $_SERVER['PHP_SELF'];?>?css=colourful">colourful</a></li>
...(other options)...
</ul>

OR form dropdown:

<form ... method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
 <label for="dd">Pick a style:</label>
 <select id="dd" name="dd">
  <option value = "colourful">colourful</option>
  ...(other options)...
 </select>
 <input id="send" name="send" value="Change" type="submit" />
</form>

You can pick up the data via $_GET (link list) or $_POST (form).

These values are then transferred to a session variable (e.g. $_SESSION).

If this is what you want to do be aware that the page needs to be refreshed unless you use Ajax - this can change the css file directly (via js) AND set the session variable - so js to change the css without refresh and then a session variable (php) to propagate the css info on subsequent pages.

printman55 0 Light Poster · 2010-05-26T02:09:59+00:00

Thanks for your code. What I really need is to have the homepage randomly or sequentially select a stylesheet from a group of say three. Apply that stylesheet to the homepage and then use the same stylesheet for all internal pages as the user navigates the site. The next time the user visits the site in another sesson the site style may or maynot be different. How would that code look for the homepage and an internal page?

diafol · 2010-05-26T03:59:36+00:00

OK - php or js can select a random stylesheet. Using sessions - you can propagate the css along the pages.

At the very top of every page:

<?php
session_start();
if(!isset($_SESSION['css'])){
  $css_list = array("colourful.css","darkness.css","bright.css");
  $int = mt_rand(0, count($css_list)-1);
  $_SESSION['css'] = $css_list[$int];
}
?>

Then in your head area (every page):

<link rel="stylesheet" rev="stylesheet type="text/css" media="screen" href="/css/<?php echo $_SESSION['css'];?>" />

CAVEATS:
1. you MUST have php installed on your machine (localhost) or remote server. If not look at 'XAMPP' (Google it).
2. Change the '/css/' path to where you store your css files.
3. The array list items (files) must be separated by commas and enclosed in quotes (single or double).
4. This is off the top of my head - it may not work - but it's not far off.

printman55 0 Light Poster · 2010-05-26T06:44:36+00:00

If you add this code to every page doesn't that make the style on every page random as opposed to the same style that was selected on the homepage?? What I'm going for is a unique style for the entire site every time the user starts a new session.

diafol · 2010-05-26T11:57:54+00:00

Have you tried it? Try it before making assumptions.
No it won't rendomize on every page. That's the whole point of using $_SESSION and session_start()

printman55 0 Light Poster · 2010-05-26T17:49:48+00:00

Sorry you are right.
I added the code to the pages: http://www.rspsitedesign.com/Random/index.php
In Firefox with cookies activated, the code seem to work and is consistent in the toggle between home and inside. I could never get it to be other than yellow (color.css) With cookies disallowed, the css is not consistent.
Seems like there need to be a default section to default to a specific stylesheet if the user doesn't allow cookies.
Here is the code for the pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
  
      session_start();
   
      if(!isset($_SESSION['css'])){
   
      $css_list = array("bright.css","dark.css","color.css");
   
      $int = mt_rand(0, count($css_list)-1);
  
      $_SESSION['css'] = $css_list[$int];
   
      }
 
      ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Test</title>
<link rel="stylesheet" rev="stylesheet type="text/css" media="screen" href="<?php echo $_SESSION['css'];?>" />
</head>

<body >
   
     

<p>&nbsp;</p>
<p>&nbsp;</p>
<p ><div align="center" class="ffundlink"><a href="inside.php">Inside Page>></a></div></p>
<p><div align="center" class="strongtext2">HELLO</div>
</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
  
      session_start();
   
      if(!isset($_SESSION['css'])){
   
      $css_list = array("bright.css","dark.css","color.css");
   
      $int = mt_rand(0, count($css_list)-1);
  
      $_SESSION['css'] = $css_list[$int];
   
      }
 
      ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<link rel="stylesheet" rev="stylesheet type="text/css" media="screen" href="<?php echo $_SESSION['css'];?>" />



</head>

<body >


<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="ffundlink"><div align="center" class="ffundlink"><a href="index.php" >HOME>></a></div></p>
<p><div align="center" class="strongtext2">HELLO ON THE INSIDE</div>
</p>
</body>
</html>

diafol · 2010-05-27T02:16:22+00:00

<?php
 
      session_start();
 
      if(!isset($_SESSION['css'])){
 
      $css_list = array("bright.css","dark.css","color.css");
 
      $int = mt_rand(0, count($css_list)-1);
 
      $_SESSION['css'] = $css_list[$int];
 
      }
 
      ?>

This goes right at the top of the page - above the Doctype declaration. session_start() can hit problems once you get html output.

diafol · 2010-05-27T02:24:55+00:00

Session data is saved in a cookie, although the session id can be passed in the url (every URL!). This method is not suggested.

Data can be transferred from one page to another by 4 main methods:

POST (form)
GET (url)
COOKIE (js and server-side)
SESSION (server-side)

files and dbs can store data, but you usually have to have some sort of session data to make these viable.

If people disable cookies - just have a fallback style - simple.

I have to admit, if a site I looked at frequently had a different style every time I visited it, I would stop visiting - unless it was csszengarden of course.

printman55 0 Light Poster · 2010-05-27T02:54:12+00:00

Thanks for the feedback. Will you ad code to what you already have done to test for disabled cookies and if they have been disabled, then use default.css?
Would really appreciate it! I also assume browsers look at session the same as cookies?

diafol · 2010-05-27T03:43:17+00:00

Sorry, I have provided more than I should already. Your site - your work - I assume your Google skills are as good as anybody's. Good luck though.

diafol · 2010-05-28T03:34:22+00:00

OK, won't leave you hanging. Excuse my grumpiness. I suppose if I offer to help, I should help.

1) Create a file called css_checker.php . This will be an include file that you can place in every file in your site.

2) Place the following code inside the file:

session_start();
if(!isset($_SESSION['css'])){
	$css_list = array("default.css", "bright.css","dark.css","color.css");
	$int = mt_rand(0, count($css_list)-1);
	$_SESSION['css'] = $css_list[$int];
	$css_file = $_SESSION['css'];
}

$headScriptCSS = "<link id=\"css\" type=\"text/css\" href=\"$css_file\" rel=\"stylesheet\" rev=\"stylesheet\" media=\"screen\" />
<script type=\"text/javascript\">
/*
Adapted from http://www.quirksmode.org/js/cookies.html
This JS tries to write a cookie and then tries to read it.
If successful - leave the randomized css file - php can handle it via sessions
Else - use the default css file
*/
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = \"; expires=\"+date.toGMTString();
	}
	else var expires = \"\";
	document.cookie = name+\"=\"+value+expires+\"; path=/\";
}

function readCookie(name) {
	var nameEQ = name + \"=\";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,\"\",-1);
}
createCookie('boo','boovalue',1);
if(readCookie('boo')){
	eraseCookie('boo');
}else{
	document.getElementById('css').href = 'default.css';
}
</script>";
?>

3)In ALL your files then - place the following php:

<?php
	include("css_checker.php");
?>

<!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" lang="en-GB" xml:lang="en-GB"> 
<head> 
<?php echo $headScriptCSS;?>
</head>
<body>
<h1>How does this look?</h1>
<p>Hello <span>Everybody</span></p>
</body>
</html>

OK, so what this does is write a randomized css file via php:

a) If sessions OK and aalready set - carry on with set css file
b) If not set - pick a random css file and place this into a session variable
c) If cookies not available (check via js functions) - overwrite the css file with default.css

You may be wondering why we bother using js - well, php can't write a cookie AND read a cookie in the same page. You need a refresh/reload or navigate to another page before you can check it via php - not very useful if you have to do this every time you change page.

I haven't tested it - I think I've spent enough time on this! I should state that the JS is adapted from www.quirksmode.org - my JS skills are simply not up to it.

Hope it works.

printman55 0 Light Poster · 2010-05-28T17:59:47+00:00

Many thanks for the extra effort.
I noticed a whole lot of "\"'s in the code:

$headScriptCSS = "<link id=\"css\" type=\"text/css\" href=\"$css_file\" rel=\"stylesheet\" rev=\"stylesheet\" media=\"screen\" />"

Also in the quirks mode js
For example:

else var expires = \"\";

quirksmode has it this way:

else var expires = "";

I'm thinking just cut and paste the quirksmode js.
however the code line that defines $headScriptCSS is a question are all the "\" suppossed to be there?
Also is all the Js ok to put inside the php tags or should I add html head tags?

diafol · 2010-05-28T20:55:10+00:00

Somebody moved my last post to a totally unrelated thread. Here's the current permalink: http://www.daniweb.com/forums/post1232806.html#post1232806

Don't know how the hell that happened.

> I'm thinking just cut and paste the quirksmode js.
however the code line that defines $headScriptCSS is a question are all the "\" suppossed to be there?
Also is all the Js ok to put inside the php tags or should I add html head tags?

Look, printman - have you tried it? If not, why not?

The ' \" ' means that you escape double quotes within double quotes - and yes they're supposed to be there, otherwise you'll get a parse error. The js script is placed inside a php string for simplicity. If you want to change the script at any time - you change the script in the css_checker.php file (or whatever I called it) and that's it. You can use an external js file if you really want - I really don't care. I you run into trouble with my solution, I'll give you a hand, coz I understand it and it won't waste too much of my time. I won't help you with somebody else's script, life's too short.

printman55 0 Light Poster · 2010-05-28T22:39:38+00:00

OK sorry about the question.
Here is the link to the test pages http://www.rspsitedesign.com/Random/index2.php
If cookies are disallowed the style sheet reverts to dark.css if cookies allowed, then no stylesheet is selected.
css_checker.php:

<?php
  
session_start();
if(!isset($_SESSION['css'])){
	$css_list = array("default.css", "bright.css","dark.css","color.css");
	$int = mt_rand(0, count($css_list)-1);
	$_SESSION['css'] = $css_list[$int];
	$css_file = $_SESSION['css'];
}

$headScriptCSS = "<link id=\"css\" type=\"text/css\" href=\"$css_file\" rel=\"stylesheet\" rev=\"stylesheet\" media=\"screen\" />
<script type=\"text/javascript\">
/*
Adapted from http://www.quirksmode.org/js/cookies.html
This JS tries to write a cookie and then tries to read it.
If successful - leave the randomized css file - php can handle it via sessions
Else - use the default css file
*/
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = \"; expires=\"+date.toGMTString();
	}
	else var expires = \"\";
	document.cookie = name+\"=\"+value+expires+\"; path=/\";
}

function readCookie(name) {
	var nameEQ = name + \"=\";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,\"\",-1);
}
createCookie('boo','boovalue',1);
if(readCookie('boo')){
	eraseCookie('boo');
}else{
	document.getElementById('css').href = 'default.css';
}
</script>";
?>

index2.php

<?php
	include("css_checker.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Test</title>
<?php echo $headScriptCSS;?>
</head>

<body >
   
     

<p>&nbsp;</p>
<p>&nbsp;</p>
<p ><div align="center" class="ffundlink"><a href="inside2.php">Inside Page>></a></div></p>
<p><div align="center" class="strongtext2">HELLO</div>
</p>
</body>
</html>

inside2.php

<?php
	include("css_checker.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<?php echo $headScriptCSS;?>




</head>

<body >


<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="ffundlink"><div align="center" class="ffundlink"><a href="index2.php" >HOME>></a></div></p>
<p><div align="center" class="strongtext2">HELLO ON THE INSIDE</div>
</p>
</body>
</html>

peter_budo · 2010-05-28T23:48:30+00:00

Sorry guys for inconvenience, posts moved as necessary. They will just sport new titles ;)

diafol · 2010-05-29T01:28:41+00:00

Doh! Placed the last line in the wrong place. Change

if(!isset($_SESSION['css'])){
	$css_list = array("default.css", "bright.css","dark.css","color.css");
	$int = mt_rand(0, count($css_list)-1);
	$_SESSION['css'] = $css_list[$int];
	$css_file = $_SESSION['css'];
}

To this:

if(!isset($_SESSION['css'])){
	$css_list = array("default.css", "bright.css","dark.css","color.css");
	$int = mt_rand(0, count($css_list)-1);
	$_SESSION['css'] = $css_list[$int];
}
$css_file = $_SESSION['css'];

BTW - did try it this time - php version works for me. Didn't try it with cookies off.

printman55 0 Light Poster · 2010-05-29T02:53:45+00:00

made the change...
What I see happening is with cookies allowed, when you toggle between home and inside page the stylesheet changes. What I'm striving for is to have the stylesheet stay consistent in each session. The stylesheet would only change if a new instance of the browser is activated.

With cookies disallowed, the stylesheet reverts to default.css (orange). This is perfect and the desired result.

printman55 0 Light Poster · 2010-05-29T02:54:27+00:00

Here is the link:
http://www.rspsitedesign.com/Random/index2.php

diafol · 2010-05-29T03:45:50+00:00

Well, can't say that I know what's going on there - works fine for me:

Here's a typical page with the php hardcoded:

<?php
session_start();
if(!isset($_SESSION['css'])){
	$css_list = array("default.css", "bright.css","dark.css","color.css");
	$int = mt_rand(0, count($css_list)-1);
	$_SESSION['css'] = $css_list[$int];
	echo "int =" . $int;
}	
$css_file = $_SESSION['css'];

 
$headScriptCSS = "<link id=\"css\" type=\"text/css\" href=\"$css_file\" rel=\"stylesheet\" rev=\"stylesheet\" media=\"screen\" />
<script type=\"text/javascript\">
/*
Adapted from http://www.quirksmode.org/js/cookies.html
This JS tries to write a cookie and then tries to read it.
If successful - leave the randomized css file - php can handle it via sessions
Else - use the default css file
*/
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = \"; expires=\"+date.toGMTString();
	}
	else var expires = \"\";
	document.cookie = name+\"=\"+value+expires+\"; path=/\";
}
 
function readCookie(name) {
	var nameEQ = name + \"=\";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
function eraseCookie(name) {
	createCookie(name,\"\",-1);
}
createCookie('boo','boovalue',1);
if(readCookie('boo')){
	eraseCookie('boo');
}else{
	alert('no');
	document.getElementById('css').href = 'default.css';
}
alert(document.getElementById('css').href);
</script>";
?>

<!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>PHP Test</title>
<?php echo $headScriptCSS;?>
</head>
 <body>
 
<p>1</p>
<p><a href="untitled.php">Page 1</a> | <a href="untitled2.php">Page 2</a> | <a href="untitled3.php">Page 3</a> | <a href="untitled4.php">Page 4</a></p>
<p ><div align="center" class="ffundlink"><a href="inside2.php">Inside Page</a></div></p>
<p><div align="center" class="strongtext2">HELLO</div>
</p>
</body>
</html>

I've set a JS alert to show what's going on.
I've got 4 pages (entitled untitled.php/untitled2.php/untitled3.php/untitled.php4/). They are all identical except for no.4 where I've randomized the existing session - so that it 'resets'. Movement between 1,2,3 should be same CSS, but once 4 is hit - a different one should be set after that.

The only difference in page 4:

session_start();
//if(!isset($_SESSION['css'])){
	$css_list = array("default.css", "bright.css","dark.css","color.css");
	$int = mt_rand(0, count($css_list)-1);
	$_SESSION['css'] = $css_list[$int];

//}

It's odd that it doesn't work for you.

diafol · 2010-05-29T04:30:18+00:00

Have a look at the pages I uploaded: http://www.cemeg.wetwork.org.uk/cookiecss/untitled.php

printman55 0 Light Poster · 2010-05-29T06:43:29+00:00

So with cookies enabled, does not the background color change when you toggle between home and inside pages and back??? !!?

diafol · 2010-05-29T15:03:20+00:00

Yes it does, so you've probably got different code to me:

Try this - I've sectioned the include file and javascript -

http://www.cemeg.wetwork.org.uk/cookiecss/untitled.php

Will upload the zip file for the example...

//EDIT - here we go

cookiecss.zip

//Just be aware that even when you get a random css file - it may be the same one as previously chosen! I had a run of the same file 4 times in a row when getting a random file (page4 in the example). That's just probability.

printman55 0 Light Poster · 2010-05-29T17:34:22+00:00

Many thanks for sharing your code. I incorporated your code into my pages and everything seems to be working.
http://www.rspsitedesign.com/Random/index2.php
The error was I had this line in the head section:

<?php echo $css_file;?>

As opposed to this line:

<link id="css" type="text/css" href="<?php echo $css_file;?>" rel="stylesheet" rev="stylesheet" media="screen" />

What I've wanted to do all along is not have default.css as a random choice, but use it only if cookies are disallowed. So it could be deleted from the array in css_checker.php. I don't know how to change the code in the css_checker.js file because the code here if cookies cannot be written pulls the default.css file out of the array. Will you change the code to accomplish this?

diafol · 2010-05-29T17:44:12+00:00

In the css_checker.php/css_checker2.php files, do this:

$css_list = array("bright.css","dark.css","color.css");

default.css will not be chosen if cookies available.

No need to change the js. Just keep the default.css in there. It doesn't do anything with the php array. JS is run after the server sends the info to the browser (client). So all php is output as plain HTML (usually!) before JS knows anything about it.

All you need to do is delete:

//THis is just for output to the screen - so you can see which file is loaded
function print_css_span(){
	document.getElementById('cssspan').innerHTML = document.getElementById('css').href;
}

Take off the onload attribute in your pages (if you used it):

<body onload="print_css_span();">

If this works for you, please mark the thread solved.

printman55 0 Light Poster · 2010-05-29T19:50:02+00:00

Thanks for all the help!!
I deleted the default.css from the array.
I now have two links:http://www.rspsitedesign.com/Random/index2.php
and
http://www.rspsitedesign.com/Random/untitled.php
This last one is a modified version of your html.
Here I did not use the css_checker2.php file as this changes the stylesheet selection while navigating the site.
So it appears that once the computer selects a stylesheet, it will keep it in place...
In internet explorer if cookies are deactivated, it continues to use the default.css even if they are reactivated. There are two ways to get another selection: go to another computer or reboot.
In Firefox if cookies are deactivated, it goes to the default.css. Upon reactivation of cookies, it reverts back to the last selected stylesheet it was using before the deactivation of cookies. A reboot does get you a new stylesheet.
Interesting aspect of session.

diafol · 2010-05-29T19:58:23+00:00

reboot will probably clear session data. IE is a pig. We can probably use a line to prevent default.css from being called by php. Like this:

session_start();
if(!isset($_SESSION['css']) || $_SESSION['css'] == 'default.css'){
	$css_list = array("bright.css","dark.css","color.css");
	$int = mt_rand(0, count($css_list)-1);
	$_SESSION['css'] = $css_list[$int];
}	
$css_file = $_SESSION['css'];

If the browser is closed - it can still remember session data - FF really likes to do this.

printman55 0 Light Poster · 2010-05-29T21:15:17+00:00

Wonderful!!
I tested in IE,FF and Safari. They all are now consistent.
http://www.rspsitedesign.com/Random/untitled.php
http://www.rspsitedesign.com/Random/index2.php
Many, many thanks!!!
I really appreciate you sticking with me on this!!!
Is there some place I can pass along kudos for your help??

diafol · 2010-05-29T23:44:02+00:00

Yep - you can mark this post solved - there'll be a link somewhere around here.

If you feel I deserve it, where you see the Up/Down arrows (with a zero inside it) - press the Up arrow - and add a comment and reputation points. That'd be great.

My code - any code that I publish can be used any way you want. As long as you don't claim it as your own (e.g. for assessments etc). Also the js used is not mine, but from quirksmode. If you want to use it commercially, check with them first.

Good luck with it.