Silverterra 3d blog

Goal: tricky way of stylesheet change on a page

I’ve read many blogs about this theme, but I’m not satisfied.
Here is my way. Short and effective.
My blog has a cloudy design, but I have an other image in my head with a golf ball. I don’t want to drop the first one and I want to realize the second one as well. Basically the background image different and some page element’s color out of the body box.
1. create the base
I need a new stylesheet file with the modified elements (this file named as golf.css):

#sidebar a {
  color:#fff;
}
#sidebar ul ul li {
  color: #DEF585;
}  
#sidebar h2 {
  color: #fff;
}
#sidebar ul p, #sidebar ul select {
  color: #BEDDBE;
}
#backfly {
  background: url("images/golfBallWallPaper.jpg");
}
#cssgolf{ /* this one put to the original stylesheet file ! */
  display: none;
}

and I will include this file into an identified but not valid style block:

<stylex id="cssgolf">
<?php include_once('css/golf.css'); ?>
</stylex>

This is not a valid style block (I need to hide it – #cssgolf{ display: none; }) – no effects on the page!
2. play with the style
I put a switcher somewhere to the page (beside the blog name a small icon – golf ball or clouds ) and I will put the following code behind this control:

...
    var stx = true,
        ff = /firefox/i.test(navigator.userAgent)
          || /msie/i.test(navigator.userAgent); // check if ff or ie
        
    $('#schg').click(function(){
    
      var t = $('#cssgolf')[0].outerHTML;
      if(stx | ff){
        if(stx){
          $('#cssgolf')[0].outerHTML= t.replace(/stylex/g,'style');
        }
        else{
          $('#cssgolf')[0].outerHTML = t.replace(/style/g,'stylex');
        }
      }
      else{
        document.styleSheets['cssgolf'].disabled = ! document.styleSheets['cssgolf'].disabled;
      }
      stx = !stx;

      $(this).attr('src', stx ? 'images/golf.png' : 'images/cloud.png');
      
      cookies.set('css', stx ? 0 : 1);

    });
    
    if(cookies.get('css') == 1){$('#schg').click();}
...

3. how it’s working
I have an invalid style block without noticable effects. This is good at the start.
When I want to fire the new style I need to activate/fix that. Just replace the invalid stylex tag with the valid style word (this is simple with regex) and the new style is working now.

After this point there are two ways to follow:
– I can disable the style block by the ID (chrome, opera working, but not in firefox and ie)
– I need to invalidate the style block again to disable it (firefox, ie) – that’s why I check the browser is ff/ie at the second line in the code.
…may be this is the better solution because this works in all browsers…

Of course I will change the switcher image depends on the selected style. Done.

or

Here is a soft version of this solution detailed above.
Soft because the new style block is a valid one but has a special condition which is prevents applying. This style block will be inactive every time. The never matching condition e.g. device-width: 1px – like this:

<style id="golf" media="screen and (device-width:1px)">
<?php include_once('css/golf.css'); ?>
</style>

references for available conditions: jump to read

In this case this is an inactive style block again.
We can activate this with dropping the bad condition (just clear or drop the media tag).
And after this point the method is the same. Disable or inactivate the style block again and again…

see also: cookies class

Wednesday, June 18th, 2014 at 11:07.
Filed under css, tricky.