Help - Search - Members - Calendar
Full Version: loading different stylesheets
Movable Type Community Forum > Additional Resources > Tips and Tricks
gadichon

Hello,
I'm currently setting up my first blog:
trente six quinze journal. Everything is working fine, but i'm still testing, nothing is online really at the moment.

I have prepared 10 different stylesheets (not really different, it's just the font color theme that is changing) and I'd like them to randomly load on my blog (anytime someone loads any page).
i guess it is not that complex, but I definitely need help to build the javascript as I'm quite new to the discipline... biggrin.gif

Is there someone feeling like helping me writing this random css loader javascript?

here are the names of my css:
darkblue.css, lightblue.css, purple.css, pink.css, red.css, orange.css, yellow.css, green.css, lime.css, brown.css etc.

Thanks!
Gaël
smile.gif
kadyellebee
I know how I'd do it with PHP -- I'm not very good with Javascript yet, but if PHP would help you, I'd be happy to write that up smile.gif

Kristine
gramcracker
Seulement parce que tu parles francais...

voila:

CODE
<script language="javascript">
function random(min,max)
{
  return (Math.round(Math.random()*(max-min)))+min;
}

var randstylesheet = "darkblue.css"

switch(random(0,9))
{
  case 0: randstylesheet = "darkblue.css";break;
  case 1: randstylesheet = "lightblue.css";break;
  case 2: randstylesheet = "purple.css";break;
  case 3: randstylesheet = "pink.css";break;
  case 4: randstylesheet = "red.css";break;
  case 5: randstylesheet = "orange.css";break;
  case 6: randstylesheet = "yellow.css";break;
  case 7: randstylesheet = "green.css";break;
  case 8: randstylesheet = "lime.css";break;
  case 9: randstylesheet = "brown.css";break;

}

document.write("<LINK REL=stylesheet HREF=\"" + randstylesheet + "\" TYPE=\"text/css\">");

</script>


Put that in your HEAD section.
rusto
Any blog that bears the description, "numéro spécial filles toutes nues", will even get ME to bone up on my high school French!

smile.gif
gadichon
hé guys!

thank you so much!
1/Gramcracker, I noticed your "formidable" participation to my previous post, but I couldn't guess you'd help in such a "formidable way"!! tongue.gif

2/kadyelleby, thanks a lot for your php proposal, but gramcracker solved the question...

3/rusto: si tu veux voir des filles toutes nues note bien l'adresse de ce site...

4/My blog is really not ready, i'll let you know when it will start.

Thanks to all
Gaël wink.gif
gadichon
hum, just another question:
if I put all the stylesheets in a directory called "style" within the "www" directory, what is the path to the css then? Shall I write it in front of every "case" line in the script? (case 0, case 1, case 2, etc.) like:
CODE
case 0: randstylesheet= "style/darkblue.css"; break;


Merci les amis! mellow.gif
gramcracker
Oui. Tu as raison. smile.gif
arobinsonuk
That's a fantastic idea, and a nice script.
How could it be modified to default to a particular style-sheet if the user's browser does not support the javascript for whatever reason, or is this automatically done from what you've already posted?
gramcracker
I'm no Javascript guru, but I believe you could add this to the head:

CODE
<noscript>
<link href="defaultnoscript.css" rel="stylesheet" type="text/css">
</noscript>
arobinsonuk
Je te remercie pour tes informations wink.gif
gramcracker
De rien, mon ami.
adamrice
A slightly simpler way to deal with the no-javascript issue and the multiple-stylesheets issue in general:

Define a default stylesheet and link that in unconditionally. Then create a set of 10 that contain only the changing bits--the rest can be omitted.

I am pretty sure that if you link in the default stylesheet first, and then (using JS or whatever) link in the color-changing stylesheet second, that will override the first where the two coincide: this is the "cascading" part of "cascading style sheets"

It would also be possible to do all the color-randomizing in JS, without having multiple stylesheets at all, but the actual code for that is a little out of my depth.
gadichon
hey graham

is there an onload thing I should write somewhere in the ≤body≥ ?

I've just finished working i'm gonna make this code run now.
i'll let you know...
gramcracker
Nope, it'll do everything auto-magically.

Or it should, at least.

Let me know if you have any problems. smile.gif
gadichon
adamrice,

thanks for your answer, I know it would have been possible to auto-generate the colors without the set of 10 stylesheets, but I did not want the colors to be completely random. This way of doing makes me keep some control over what colors actually appear...

But don't worry, i've bought a javascript o'reilly book today, and soon i'll be able to help the MT world as well!! biggrin.gif
at least, i hope so...
gadichon
hey, I could not manage to make it work... may be I don't get something:
here is my ≤head≥
CODE
<!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=<$MTPublishCharset$>" />

<meta http-equiv="refresh" content="1200">

<title><$MTBlogName$></title>

<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTBlogURL$>index.rdf" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />

<script language="javascript">


function random(min,max)
{
  return (Math.round(Math.random()*(max-min)))+min;
}

var randstylesheet = "<$MTBlogURL$>style/bleu.css"

switch(random(0,8))
{
  case 0: randstylesheet = "<$MTBlogURL$>style/bleu.css";break;
  case 1: randstylesheet = "<$MTBlogURL$>style/bubble.css";break;
  case 2: randstylesheet = "<$MTBlogURL$>style/jaune.css";break;
  case 3: randstylesheet = "<$MTBlogURL$>style/lime.css";break;
  case 4: randstylesheet = "<$MTBlogURL$>style/mauve.css";break;
  case 5: randstylesheet = "<$MTBlogURL$>style/orange.css";break;
  case 6: randstylesheet = "<$MTBlogURL$>style/pomme.css";break;
  case 7: randstylesheet = "<$MTBlogURL$>style/rouge.css";break;
  case 8: randstylesheet = "<$MTBlogURL$>style/vert.css";break;
}

document.write("<link rel=\"stylesheet\" href=\"" +randstylesheet+"\"  type=\"text/css\">");

</script>

<noscript>
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css">
</noscript>

<script language="javascript" type="text/javascript">
function OpenComments (c) {
   window.open(c,
                   'comments',
                   'width=480,height=480,scrollbars=yes,status=yes');
}

function OpenTrackback (c) {
   window.open(c,
                   'trackback',
                   'width=480,height=480,scrollbars=yes,status=yes');
}
</script>

<script>
<!--
self.moveTo(0,0);self.resizeTo(1024,screen.availHeight);setInterval("x()",10);setInterval("y()",500000);self.focus();
function x(){}
function y(){self.focus()};
//-->
</script>


<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>


I've removed the
CODE
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css type="text/css">
Which is usually up-there (the default one.)
Was it right? It does not work when I put it back anyway.
I have to learn how to make it work.

s'il te plait gramme-crac-coeur aide moi!

sad.gif

bye

Gaël
gramcracker
POS IE5 for Mac. It was messing up the code because of spaces in the switch statement, semicolons after "break", double quotes instead of single-quotes for Javascript in the document.write, and wouldn't do the return statement.

This works on IE5 and Camino for Mac. Haven't tested anything else:

CODE
<script language="Javascript">


function randomcss(min,max)
{
var randstylesheet = "http://www.trentesixquinze.com/style/bleu.css";
var randnumber = (Math.round(Math.random()*(max-min)))+min;


switch(randnumber)
{
case 0: randstylesheet = "http://www.trentesixquinze.com/style/bleu.css";break
case 1: randstylesheet = "http://www.trentesixquinze.com/style/bubble.css";break
case 2: randstylesheet = "http://www.trentesixquinze.com/style/jaune.css";break
case 3: randstylesheet = "http://www.trentesixquinze.com/style/lime.css";break
case 4: randstylesheet = "http://www.trentesixquinze.com/style/mauve.css";break
case 5: randstylesheet = "http://www.trentesixquinze.com/style/orange.css";break
case 6: randstylesheet = "http://www.trentesixquinze.com/style/pomme.css";break
case 7: randstylesheet = "http://www.trentesixquinze.com/style/rouge.css";break
case 8: randstylesheet = "http://www.trentesixquinze.com/style/vert.css";break
}


document.write('<link rel=\"stylesheet\" href=\"' +randstylesheet+'\"  type=\"text/css\">');

}


randomcss(0,8);


</script>
gadichon
Yessss tongue.gif
It works great you genius!
Thank you so much. It works perfect either with IE5 mac (you're right that's what I use) or Safari...
Haven't tried with the others.

Anyway it works fine, I just need to make my colors a bit nicer and to change the layout a bit and then i'll start my blog.

I'll let you know, it'll be full of nice stuff.


Thank you again grammy-award-cracker
gaël
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.