New CSS on each page load

Forum Moderators: not2easy

Message Too Old, No Replies

New CSS on each page load

Spyce

12:01 pm on Nov 10, 2011 (gmt 0)

Hi, I was just wondering if it was possible to load a new CSS file each time a person loads the page? If so, how would I go about doing that?

EDIT:

Of course! I've been searching for this for what seems like ages, then when I ask, I finally find the answer myself. How typical! lol This can get deleted :-p

rocknbil

4:54 pm on Nov 10, 2011 (gmt 0)

Yes, but for others, it's a good idea to post your solution.

The "right" way would be to set your server to output no-cache headers for CSS and add appropriate headers for no-cache in the documents. One "easy" way is to make use of the query string. This works to avoid caching images too.

You (somehow) generate a unique number,

$rnum = my_unique_number();

then append it to the css

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

Though that's a php pseudo-example, you can do it with anything, I think even JS will work. This forces the browser to download the resource with every request. The browser will pass the query string to the .css resource, but being a static resource (like images) it won't actually do anything with it.

alt131

6:45 pm on Nov 10, 2011 (gmt 0)

Hi Spyce, I second Rocknbil's request you post the solution for the benefit of later readers. The other interesting issue is "why" you want to do that. One of the benefits of css is that it's cacheable - so it would be really interesting to know why you want the opposite.

topr8

6:56 pm on Nov 10, 2011 (gmt 0)

>>The other interesting issue is "why" you want to do that.

i agree, because for instance if you wanted to change the colour scheme of a page or the background image etc, with each page load, then changing the style sheet would not be the best way to do this.

Spyce

12:59 am on Nov 11, 2011 (gmt 0)

Never-mind, the solution I found actually didn't work like I thought it would. The line of code I ran across was specific to a certain developing platform- I hadn't realized that when I looked at the site.

So... I haven't found a solution yet, lol.

I don't have a real solid reason as to why I want to do that. It's more just for personal experimentation that anything else. I just didn't know if it was possible to do. I actually like to take nice, hi-quality, hi-resolution photos and use them as backgrounds (think professional shots of a beach) to my pages. And with each page load, I would have a different beach picture as a background and also, since each image is different, I would also have the fonts change color, and maybe the background of my content and sidebar divs would change too. If I have one background for example of some nice blue/green water, and maybe a couple palm trees- I'm going to have lots of blues and greens in that stylesheet. But now let's say I have an image of the sunset on the beach- I'm probably going to have lots of pinks, purples and oranges- a stylesheet with lots of blue and green wouldn't work.

So css1.css would have one image and set of colors associated with it; css2.css would have a different background image and set if colors associated with it... on and on and on.

Now, I have to say, my experience with PHP is very, very minimal. I understand this part:

then append it to the css

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

But the first part:

The "right" way would be to set your server to output no-cache headers for CSS and add appropriate headers for no-cache in the documents. One "easy" way is to make use of the query string. This works to avoid caching images too.

You (somehow) generate a unique number,

$rnum = my_unique_number();

I'm totally lost. I get what you're saying, I just don't know how to write PHP code. I can muddle through pre-written code and edit it to my needs, but I'm more of a designer rather than a coder- anything more advanced than HTML & CSS is totally beyond me, lol. So while I can get through the pre-written code, writing it my own is totally beyond my skillset.

So let's say I have 5 stylesheets- css1, css2, css3, css4, css5. Right now, if I was to try what you suggested, this is how my code would look and I know already that it's wrong:

<html>
<head>

$rnum = my_unique_number(5);

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

<title></title>

</head>
<body>

<div style="height: 1000px;"></div> <!-- Just to make the page scroll -->

</body>
</html>

How would the code know to pull a random number between 1 and 5? All I specified was the number 5... do I have to make the code say:

$rnum = my_unique_number(1,5);

I'll just have to play around and see what I can come up with :-p Thanks for the tip though! I hope I can make it work. It's simple enough, I just need to do some research into how to write that piece of random number code.

rocknbil

6:02 pm on Nov 11, 2011 (gmt 0)

The first part isn't PHP, it's a server config - but you can forget that part anyway - given this,

So css1.css would have one image and set of colors associated with it; css2.css would have a different background image and set if colors associated with it... on and on and on.

This really isn't the most efficient way to do this. There are probably a couple hundred, but I'd approach it by using a single style sheet and setting different classes (with a subset of another hundred or so approaches. :-P ). One example,

#header { background-position: top left; background-repeat: no repeat; }
body.theme1 #header { background-image: url(/images/theme-1-header.jpg); }
body.theme2 #header { background-image: url(/images/theme-2-header.jpg); }
body.theme3 #header { background-image: url(/images/theme-3-header.jpg); }

Statically, you'd just set a different body class on each theme.

<body class="theme1">

Dynamically, you'd modify the body class with Javascript. jQuery makes it easy, but can be done with a few lines of straight Javascript . . . .

<script type="text/javascript">
// Don't forget to include a jQuery library before this
$(function(){
$(.'change_theme a').click(function() { return swap_theme($(this).attr('data-theme')); });
});
//
function swap_theme(the_theme) {
$('body').css('class',the_theme);
return false;
}
</script>

<ul class="change_theme">
<li><a href="" data-theme="theme1">Theme 1</a></li>
<li><a href="" data-theme="theme2">Theme 2</a></li>
<li><a href="" data-theme="theme3">Theme 3</a></li>
</ul>

This is for html 5, there is no data-.... attribute in XHTML or HTML < 5, (ab)use rel instead

Not working code, but this approach will work. What's happening:

$(function(){
$(.'change_theme').click(function() { return swap_theme(this.attr('data-theme')); });
});

On click of any link in a UL with the change_theme class, attach the behavior in the function wrapped in click() to the links themselves (so you don't have use do inline Javascript, onclick="return some_function()"). The return false in both the function and in the actual function swap_theme stops the link from navigating. Here we pass the clicked link's data attribute value as a parameter : swap_theme($(this).attr('data-theme'))

In the swap_theme function, is sets the CSS for <body> to whatever that value is. (I didn't use the jQuery function addClass so you don't have to deal with removing any class already set.)