change tumblr layout theme with script

Question

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.

Answer 1

OK, so this page is working:

http://layouttestblog2.tumblr.com/tagged/test

It changes the background colour as the variable matches test.

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') 
}

So the first if statement works, because background-color is a css property. masthead-background and and masthead-bg are not css properties.

If you try

 if (_secondaryDir == 'test'){
   $('body').css('background-image','http://www.rexwallpapers.com/images/wallpapers/landscape/sunshine/sunshine_5.jpg')
}

That should work

(Don't worry about test tumblr accounts, I have about 8 for testing).

EDIT

I made a mistake with my css syntax.

It should look like this:

body {
   background-image:url("imagefile.png");
}

Or (shorthand)

body {
   background:url("imagefile.png") 0 0 no-repeat;
}

So the jquery should look like this:

 if (_secondaryDir == 'bespoke'){
    $('body').css('background','url("http://www.rexwallpapers.com/images/wallpapers/landscape/sunshine/sunshine_5.jpg")')
}else if (_secondaryDir == "tailoring") {
    $('body').css('background','url("http://upload.wikimedia.org/wikipedia/commons/d/d7/Sad-pug.jpg")') 
}else if (_secondaryDir == "wedding") {
    $('body').css('background','url("http://www.vam.ac.uk/users/sites/default/files/album_images/56177-large.jpg")') 
}else if (_secondaryDir == "suits") {
    $('body').css('background','url("http://www.roopevintage.com/blog/wp-content/uploads/2010/11/NHS-524-Tortoise.jpg")') 
}else {
    $('body').css('background-image','url("http://irishmarxism.files.wordpress.com/2012/06/default1.jpg")')
}

The final else statement uses a default image if none of the other criteria match, so this should work on any other page.

Apologies for the mix up.

You can see this working here: http://madox-test.tumblr.com/ check the page links on the left.

Answer 2

OK so based on the feedback in your comment, here is a system I use on my own (and other) tumblrs.

First make sure you have a link to jquery in your theme, many themes do but if yours doesn't add this to the head of the document.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Now we can write some script to catch the url params.

<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 == 'food'){
     $('body').css('background-image','path/yourimage.png')
  }else{
     $('body').css('background-image','path/fallbackimage.png') 
  }

</script>

This would check the secondary directory some.tumblr.com/tagged/food

If it matches food then the background should change.

You can then write an else if statement and add in more parameters.

Hope that is enough information, if you need more let me know.