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

Question

printman55 0 Light Poster

16 Years Ago

Here is a thread that I found in a Google search:
http://www.daniweb.com/forums/thread62265.html It gives code that will generate a style sheet link on the home page. Can anyone add additional code that could be added to internal pages to pick up on the homepage selection and use it on the rest of the internal pages. I would be great if cookies could be avoided as some users don't like them and a site then would not look great. Here is a link to a simple two page site that uses cookies, but it has issues if cookies are disallowed:
Many Thanks.

user-interface web-design

3 Contributors
28 Replies
382 Views
4 Days Discussion Span
Latest Post 16 Years Ago Latest Post by Member #120589

Dani AI

Generated 9 Months Ago

A few follow-ups and a cookie-free alternative that matches what asked for (one random look per browser session), while tying back to ’s server-side option.

The idea: pick a stylesheet once and keep it for that browser tab/window session without using cookies. Use HTML5 sessionStorage (cleared when the tab/window is closed) and create the stylesheet link as early as possible in the <head> so the chosen CSS is applied immediately.

Place this as the very first thing in every page’s <head> (before any static stylesheet links):

<script>
(function(){
  try {
    var theme = sessionStorage.getItem('themeCSS');
    if(!theme){
      var choices = ['bright.css','dark.css','color.css'];
      theme = choices[Math.floor(Math.random()*choices.length)];
      sessionStorage.setItem('themeCSS', theme);
    }
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.id = 'theme-css';
    link.href = '/css/' + theme;
    document.head.appendChild(link);
  } catch(e){
    // sessionStorage not available — let server/default CSS apply
  }
})();
</script>

If the server needs to know the chosen theme (for server-side rendering or analytics), add a small DOM-ready script that appends a ?css=theme to internal links so the server can pick it up on the next request:

<script>
document.addEventListener('DOMContentLoaded',function(){
  var theme = sessionStorage.getItem('themeCSS');
  if(!theme) return;
  document.querySelectorAll('a[href]').forEach(function(a){
    try{
      var u = new URL(a.href, location.href);
      if(u.origin === location.origin){ u.searchParams.set('css', theme); a.href = u.href; }
    }catch(e){}
  });
});
</script>

Also include a <noscript> fallback to a sensible default for users with JS disabled:

<noscript><link rel="stylesheet" href="/css/default.css"></noscript>

Notes and caveats: sessionStorage is per-tab/window (good for “one style per session”); if you want persistence across browser restarts use localStorage or a server-side persistent cookie. Test for CSP rules (inline scripts can be blocked), test paths and mobile browsers, and combine this client-side method with ’s server-side session approach if you need server awareness or a non‑JS fallback.

All 28 Replies

Member #120589

16 Years Ago

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.

Member #120589

16 Years Ago

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.

Edited 16 Years Ago by Member #120589 because: n/a

Member #120589

16 Years Ago

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

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

Will upload the zip file for the example...

//EDIT - here we go

//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.

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

cookiecss.zip (4.08 KB)

Edited 16 Years Ago by Member #120589 because: n/a

Member #120589

16 Years Ago

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.

Edited 16 Years Ago by Member #120589 because: n/a

Member #120589

16 Years Ago

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.

Edited 16 Years Ago by Member #120589 because: n/a

printman55 commented: He was very helpful in helping to develop the code I needed. Ardav is a real asset to the community. +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

He was very helpful in helping to develop the code I needed. Ardav is a real asset to the community.

printman55 0 Light Poster · Answer 1 · 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?

printman55 0 Light Poster · Answer 2 · 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.

Member #120589 · Answer 3 · 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 · Answer 4 · 2010-05-26T17:49:48+00:00

Sorry you are right.
I added the code to the pages:
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>

Member #120589 · Answer 5 · 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.

Member #120589 · Answer 6 · 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 · Answer 7 · 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?

Member #120589 · Answer 8 · 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.

Member #120589 · Answer 9 · 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 · Answer 10 · 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?

Member #120589 · Answer 11 · 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 · Answer 12 · 2010-05-28T22:39:38+00:00

OK sorry about the question.
Here is the link to the test pages
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 2,532 Code tags enforcer Team Colleague Featured Poster · Answer 13 · 2010-05-28T23:48:30+00:00

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

Member #120589 · Answer 14 · 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 · Answer 15 · 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 · Answer 16 · 2010-05-29T02:54:27+00:00

Here is the link:

Member #120589 · Answer 17 · 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.

Member #120589 · Answer 18 · 2010-05-29T04:30:18+00:00

Have a look at the pages I uploaded:

printman55 0 Light Poster · Answer 19 · 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??? !!?

printman55 0 Light Poster · Answer 20 · 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.

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_ 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?

printman55 0 Light Poster · Answer 21 · 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:
and

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.

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

Wonderful!!
I tested in IE,FF and Safari. They all are now consistent.

Many, many thanks!!!
I really appreciate you sticking with me on this!!!
Is there some place I can pass along kudos for your help??

Member #120589 · Answer 23 · 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.

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

Dani AI

Recommended Answers Collapse Answers

All 28 Replies

Recommended Answers