[eluser]BoltClock[/eluser]
I've read a few articles on switching CSS stylesheets for different things like font sizes or color schemes. I want to implement color scheming for my site but looking at the code in the articles and tutorials, it seems that I have to tack in quite a number of stylesheet links in the head, resulting in more HTTP requests.
So I was thinking of preparing the CSS in the form of a controller and using a switch to determine the color scheme. A list of links is added to the page with links to switch colors. Each link conducts an Ajax post request to the controller, with one variable $_POST['color'] as the color referred to by the link. I'm visualizing something like:
Controller:
Code:
class Colorschemer extends Controller {
private $color = 'green'; // This is the default color scheme for new visitors
private $colors = array('green', 'orange', 'blue');
// Validate post info
public function __construct() {
parent::Controller();
header('Content-type: text/css');
if ($this->input->post('color') !== false && in_array(strtolower($this->input->post('color')), $this->colors))
$this->color = strtolower($this->input->post('color'));
$this->css();
}
// After constructing, build the CSS
private function css() {
$fontc = '';
$linkc = '';
$bgc = '';
// Et cetera
switch ($this->color) {
default:
case 'green':
/*
Declare hex colors for the above attribute
vars in this block and the following blocks.
*/
break;
case 'orange':
// ...
break;
case 'blue':
// ...
break;
}
?>
/* Build our CSS here, for colors I'd do something like: */
body { color: <?=$fontc?>; }
a { color: <?=$linkc?>; }
/* For images I'd do something like: */
#header { background-image: url('/images/layout/<?=$this->color?>/bg_header.png'); }
<?php
}
}
View:
Code:
<!-- ... -->
<link rel="stylesheet" type="text/css" href="<?=base_url()?>/colorschemer" />
<script type="text/javascript">
// <![CDATA[ I use jQuery here.
$(function() {
$('#colorschemer a').click(function() {
/*
I'm not sure how to do Ajax in jQuery, but I want the link to send a
request to the controller, as above, and refresh the controller in the
<link /> element above so the color scheme updates.
*/
});
});
// ]]>
</script>
<!-- ... -->
<ul id="colorschemer">
<li><a href="#" title="Green">Green</a></li>
<li><a href="#" title="Orange">Orange</a></li>
<li><a href="#" title="Blue">Blue</a></li>
</ul>
<!-- ... -->
I hope the above made sense to you. If this is a better way than leave many HTTP requests for stylesheets hanging unused, I'll need a bit of help in the JavaScript needed to Ajax the controller and stylesheet.
Thanks for your help!
