homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Random Choice

 4:54 am on Mar 18, 2003 (gmt 0)

Hello everyone and what a great forum you have...

I am currently in the middle of building a site for a client whom had an unusual request..

Q. Can you have my site in differant colours?, one for every day?

Well i thought about this and created a number of .css files and have placed them in a directory on my server.

I have found i can link to these files and everything works out great however i just cant seem to get the site to randomly pick a new css file each time a new user is resolved.

Is there any advise on how i can perform this action?

Thanks in advance



 5:08 am on Mar 18, 2003 (gmt 0)

There is nothing in CSS directly for this but..

The neatest way would probably be to use something server side to supply your CSS file. For example a PHP script.

To avoid converting all your pages from index.html to index.php you could call it directly from the link code like this..

<link rel="stylesheet" type="text/css" media="screen" href="randomstyle.php">

(I won't go into the details of the php script because its outwith the topics of this forum - suffice to say it shouldn't be too complex)

Alternatively, if you can't use server side stuff, then you could use a bit of Javascript access the DOM and change which stylesheet was enabled.


 5:24 am on Mar 18, 2003 (gmt 0)

thanks for the reply,

I do have php enabled on my server although i have a lack of scripting knowledge...

I have four .cssfiles saved in a directory on my server

i currently have the following html to call the style sheet:

<link rel="stylesheet" href="http://www.mysite.com/style/sheet1.css" type="text/css" />

That works fine although for me to have my site use the other three style sheets i have to manually edit the url.. Is there a way of editing the above so it calls any one of four at any random time?

[edited by: Nick_W at 7:07 am (utc) on Mar. 18, 2003]
[edit reason] No urls please [/edit]


 9:58 am on Mar 18, 2003 (gmt 0)

there's the ALA PHP switcher [alistapart.com] or Contrastweb switcher [contrastsweb.com], and infact many more [css-discuss.incutio.com].
Any one of those should suit the requirements.

I'd walk you through it myself, but I don't actually get PHP and whatnot, so you can just stare aimlessly at those like I do, with glazed eyes, figure it out yourself, or wait for other peeps to chime in.


 11:06 am on Mar 18, 2003 (gmt 0)

Firstly, you need to know which version of PHP is running on your server. Copy this code exactly and save it as a text file called "phpinfo.php".

<?php phpinfo()?>

Upload it and call the file directly. Eg: [mysite.com...]
This will tell you the version of PHP your server is running. If it is 4.2.0 or higher, then use the following code in your HTML file to create a random stylesheet:

<link rel="stylesheet" href="http://www.mysite.com/style/sheet<?php echo rand(1,7)?>.css" type="text/css" />

If you're on an earlier version of PHP, you will need this code instead:

<link rel="stylesheet" href="http://www.mysite.com/style/sheet<?php srand((double)microtime()*1000000); echo rand(1,7)?>.css" type="text/css" />

Now save the HTML file with the extension ".php" instead of ".html". It's worth learning to use PHP files because they can do many useful things, such as giving you the date the file was last updated automatically. Or mix files together to create a new page.

Upload the new file and you should see a random stylesheet chosen each time you Refresh the page.

What the code does is replace the last digit of your stylesheet file. Assuming your sheets are numbered "sheet1", "sheet2", "sheet3" and so on, PHP picks a random number (between 1 and 7 in my examples). You can change that to whatever you wish. Just alter the number range in the brackets after the word "rand".

The result is sent to the browser as if you'd written it by hand.

If you need any more help with this, let me know. I tested it and it worked fine.


 8:57 pm on Mar 18, 2003 (gmt 0)

thanks alot, unfortunatly my server is down at present so i cant check the code just yet but as soon as i have i willl let you all know.

Thanks again


 10:33 am on Mar 22, 2003 (gmt 0)

<script type="text/javascript">
var CSSpages=new Array(
document.writeln('<link rel="stylesheet" type="text/css" href="' + CSSpages[Math.floor(Math.random()*(CSSpages.length))] + '">');



 12:42 pm on Mar 22, 2003 (gmt 0)

All the scripts suggested are totally random. You said you wanted it to change only every day, right?

<link rel="stylesheet" type="text/css" href="path_to_file/<?php echo date("w")+1;?>.css">

That will output a value between 1 and 7, changing every 24 hours (according to the server time)... Works with older versions of PHP too.

<script type="text/javascript">
now = new Date();
day = now.getDay() + 1;
document.write('<link rel="stylesheet" type="text/css" href="path_to_file/' + day + '.css">');

Same thing, but using JavaScript...


 3:00 pm on Mar 22, 2003 (gmt 0)

i enterd the below in my site.

<link rel="stylesheet" type="text/css" href="http://www.example.com/antzoo/style/<?php echo date("w")+1;?>.css">

it didnt work, am i doing something wrong?

[edited by: Nick_W at 3:06 pm (utc) on Mar. 22, 2003]
[edit reason] No urls please [/edit]


 3:03 pm on Mar 22, 2003 (gmt 0)

You need to put "sheet" in front of the <?php start tag... 'cause your CSS files are called sheet1, sheet2, etc, right?


 3:24 pm on Mar 22, 2003 (gmt 0)

<link rel="stylesheet" type="text/css" href="http://www.example.com/antzoo/style/sheet<?php echo date("w")+1;?>.css">

i cant understand why this is not working... can you have alook at my source and see if theres anything you notice?

Thanks alot.


is the one im trying to work


is what it should look like,

i apreciate it thanks


[edited by: Nick_W at 4:33 pm (utc) on Mar. 22, 2003]
[edit reason] See Sticky Mail [/edit]


 3:47 pm on Mar 22, 2003 (gmt 0)

No personal URLs please ;)

The code you posted:
<link rel="stylesheet" type="text/css" href="http://www.example.com/antzoo/style/sheet<?php echo date("w")+1;?>.css">
should work, provided there are no other characters than those...


 12:24 pm on Mar 24, 2003 (gmt 0)

Have you saved the file with the extension ".php"?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved