+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: CSS color scheme switching (/showthread.php?tid=3887)
Pages:
1
2
CSS color scheme switching - El Forum - 10-27-2007
[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!
CSS color scheme switching - El Forum - 10-27-2007
[eluser]obiron2[/eluser]
One of the big advantages of CSS is the Cascading of different styles.
If you are just going to set a bunch of variables and pass them through Ajax, you would do just as well to pup them into a javascript array and set the styles usind DOM notation in a clientside javascipt function. This way there is no requirement to go back to the server with an HTTP request, which would result in a delay between rendering the page and applying the styles.
Personally I would go for setting a CSS url in the header for the specific colour scheme as it gives you more future flexibility.
Let me know how you get on though, whichever method you choose, because I am going to be looking to do something similar.
Obiron
CSS color scheme switching - El Forum - 10-27-2007
[eluser]BoltClock[/eluser]
About using the DOM to change the colors, wouldn't that end up being a lot of JavaScript? But I understand that HTTP requests tend to have delays.
[quote author="obiron2" date="1193505611"]Personally I would go for setting a CSS url in the header for the specific colour scheme as it gives you more future flexibility.[/quote]
I don't quite catch what you mean. Could you elaborate?
CSS color scheme switching - El Forum - 10-27-2007
[eluser]xwero[/eluser]
I'm wondering why you would change the colors in your script setup a base css file with no color values in it and then you make a file with all elements that need colors, copy it for how many themes you want to support and add the colors. name them according to your theme and change the color file.
I hope this makes sense?
CSS color scheme switching - El Forum - 10-27-2007
[eluser]BoltClock[/eluser]
I have one master stylesheet that puts all structure together. The color stylesheets specify only the colors and background images for their schemes, which means mostly only color, background and border colors.
CSS color scheme switching - El Forum - 10-27-2007
[eluser]xwero[/eluser]
why can't you do something like
Code:
// controller
if(isset($_POST['color']))
{
setcookie("cookie[theme]", isset($_POST['color']);
}
if($this->input->cookie('theme'))
{
$this->load->view('page',array('csstheme'=>$this->input->cookie('theme'));
}
else
{
setcookie("cookie[theme]", 'green');
}
// view
<link rel="stylesheet" type="text/css" href="theme_<?php echo $this->input->cookie('theme'); ?>.css" />I don't understand why you would want to have an dynamic css file to make a theme switcher?
CSS color scheme switching - El Forum - 10-27-2007
[eluser]BoltClock[/eluser]
OK, but how do I get the new color scheme to take effect without manually refreshing the page?
CSS color scheme switching - El Forum - 10-27-2007
[eluser]xwero[/eluser]
You can refresh your page via php or you can do it like this
Code:
$('#colorschemer a').click(function() {
var baseurl = $('link[@title=csstheme]').attr('href');
baseurl = baseurl.substr(0,baseurl.lastIndexOf('/')+1);
$('link[@title=csstheme]').attr('href') = baseurl+'theme_'+$(this).attr('title')+'.css';
[removed].reload();
});update : [removed] has replaced window dot location and the javascript code hasn't got a set cookie function but that is easy using the baseurl variable and the cookie plugin.
CSS color scheme switching - El Forum - 10-28-2007
[eluser]esra[/eluser]
[quote author="BoltClock" date="1193518836"]OK, but how do I get the new color scheme to take effect without manually refreshing the page?[/quote]
You might take a look at the Theme Switcher plugin for WordPress. It uses AJAX to handle theme switching without page refreshes and does write the user selection to a cookie. I'm sure that there are other similar solutions. Try doing some web searches for 'style switching ajax', 'theme switching ajax'. 'css switching ajax', etc.
CSS color scheme switching - El Forum - 10-28-2007
[eluser]BoltClock[/eluser]
So far I've had no luck in using the DOM to alter the href attribute for my color scheme <link />. The solutions that I found all need me to load all stylesheets in the page head.