I would like to add different theme designs to my tumblr blog. The design should change if I click on a tag. For example if I click on the tag "food" the background, the sidebar image and the font should change into a theme related to food. Since I don´t get nowhere if I try to change the tag site itself (tumblr doesn´t let me overwrite this side with a new page) I started to look if I could work this out with the script functions. I found a code which was close to that what I searched for and it worked (I only got to change the background thought because I could not find a way to change the sidebar image with this). With this code I installed a button which should change the theme and send you to the fitting tag site. The problem now is that the change of the site applies BEFORE I reach the right site. 

For example: I´m on my home site and if I click now on the button for the tag “food” the design of the home site changes and AFTER THAT the tag site will load and the style is getting normal again. It should be switched. First load the right site and then the change of the design. It should keep the design aslong you are browsing through the tag related pages and should change back if you leave the pages. Does someone know how the fix this?

Here´s the code I found:

```
<script language="JavaScript">
<!--
function changeBGC(color){
document.body.style.backgroundColor = color;

}
//-->
</script>

<a href="tagged/food" onClick="javascript:changeBGC('#000099')">Click Blue</a>

```

*Update 16.07.14 after feedback:*

Here is the end of my code from the blog (I didn’t touch the rest of the code):

```
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> {block:IfSoundCloudLinkForPlayer} <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> <script src="http://static.tumblr.com/j8hz7jr/nqTn1t8gg/stratus.js"></script> {/block:IfSoundCloudLinkForPlayer} <script src="http://static.tumblr.com/79xqv9n/d4nn7c5ja/theme.min.js"></script> <script>$('#loading').hide();</script> {block:IfGoogleAnalyticsID} <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '{text:Google Analytics ID}']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script> {/block:IfGoogleAnalyticsID} <!--OO.TS.--> 

     <script type="text/javascript">

  var _href             = document.location.href;       
  var _primaryDir       = document.location.pathname.split("/")[1];
  var _secondaryDir     = document.location.pathname.split("/")[2];

  if (_secondaryDir == 'test'){
     $('body').css('background-color','#C0C0C0')
  }
  if (_secondaryDir == 'test'){
     $('body').css('masthead-background','http://www.rexwallpapers.com/images/wallpapers/landscape/sunshine/sunshine_5.jpg')
  }else{
     $('body').css('masthead-bg','#08298A') 
  }
</script>                           
    </body> </html>

```

I had been messing around with different parameters earlier but this is what it looks at the moment. The masthead-background was just a random picture I found in the internet. I tried different links but no one worked so I guess my personal pictures would not work likewise. Like I already said the only thing working is the change of background-color.