Zurich Help Documentation


Thank you!

You are amazing! Thank you for purchasing the Zurich Tumblr theme. I hope you enjoy using it as much as I enjoyed building it for you.

About Zurich

Zurich is a modern, responsive, retina ready Tumblr theme. The main reason for creating this theme was my trip to Switzerland in the summer. The theme was created so that users could have a nice, clean theme that was easily customisable to their taste.

Set Up

Installing the Zurich theme

Now you've got your new Tumblr theme you'll want to install it right away!

Unzip your download folder and locate the Zurich.html file, it will be in the root of the folder.

Now go and open that bad boy up in your favourite text editor. Don't open it in a web browser as it will look a mess. Instead right click and select Open... I use Espresso for the Mac. But there are free programs such as TextWrangler for Mac and Notepad++ for PC. Every PC comes with NotePad installed for free as well.

Using TextEdit on a Mac?

If you've opened up the HTML file in TextEdit it may have messed it up completely. Bad times. If you follow this guide: http://support.apple.com/kb/TA20406. It'll show you how to open HTML files properly within TextEdit.

Now what?

Now you've got the file open, select everything within it either by dragging your cursor from the beginning of the first line all the way to the bottom, or by pressing CMD + A (Mac) or CTRL + A (PC). Now copy all of that selected code by going to Edit then clicking Copy or by pressing CMD + C (Mac), CTRL + C (PC). That code is now stored on your clipboard.

Log into your Tumblr Dashboard. Now that your logged into Tumblr click on the little Clog icon at the very top of the site. See image below...

Now select the blog you would like to install the theme on from the list on the left.

Now click on the Customise button. Geez Tumblr have made it long winded!

Finally! You are now on the Customise screen for you blog. Click on the Edit HTML button in the left sidebar. This opens up Tumblr's text editor.

Delete all the code in this area so it's nice and clean. You don't want to leave anything in here as it might mess up your shiny new theme.

Now go ahead and paste in the new code. CMD + V (Mac) or CTRL + V (PC) will paste in the code quicker than a flash. Or you can go up to the Edit menu item and click on Paste. Either way works fine.

Now hit the Update Preview image. You'll notice the preview on the right updates with your new theme. There might be a few issues as it will still be using your old themes options. So hit the green Save button and then click the grey Appearance button. Refresh this page now (F5 or right click and click Reload / Refresh). Now your new themes options have loaded in. Hit the green Save button again. Now go to your blogs page and you'll see the new theme is installed! Easy as pie, not as yummy though.

Now you can head on to the Customisation area of this document to find out how to make your theme look the way you want.

Custom Pages

To create a custom page for your blog make sure that you are in the Customise screen. Follow the steps above to get to the correct place. Scroll down on the theme options sidebar and you'll see an 'Pages' button. Click on this and then click on the 'Add a page' button.

This then opens up the Add page pop up. Enter all the details you need for your new page. Here is an example:

Click the 'Create page' button when you're finished and then click the Save button. Your new page has now been created and a link has been automatically added to your main navigation menu.

Mobile View

So you've downloaded and installed your new Tumblr theme and you want to get rid of the boring default Tumblr mobile layout. OK so what you need to do first is make sure your in the Customise screen. Scroll down and click on the 'Advanced' button. This drops down some more options. Simply untick the 'Use optimized mobile layout' option and hit the green Save button.

And... YOUR DONE! Now go and enjoy your nice new mobile friendly blog.

Setting up your retina logo is easy! A retina version of your logo will help it to look awesome on all devices with a high pixel density. I've included the PSD files for you to get the sizes perfect.

Google Fonts

To use ANY of the hundred of Google Fonts that are available simply follow these simple steps.

First off get yourself over to the Google Fonts directory and pick yourself a tasty new font. http://www.google.com/webfonts#.

Once you've picked a font click on the Quickuse button underneath that particular font.

Now copy the 2 elements highlighted in red in the below screenshot and paste each part into the themes options.

Paste the link and the font name in the theme options here:

Disqus Comments

To get Disqus comments to appear on your blog simply sign up to Disqus and create a shortname for your blog. Then copy that into the Disqus Shortname option of the theme.



To get your new Twitter feed working you'll need to allow Tumblr access to your Twitter feed.

To do this you'll need to be logged into your Tumblr account and then click the settings button at the top of the page.

Make sure to select your blog on the left menu.

Scroll down the page until you find the Twitter section. Once you've found that click the Sign in to Twitter button shown below.


To get your Dribbble widget up and running simply add in your Dribbble username in the theme options and hit Save. Ta da! Easy peasy.


I've gone through many different solutions for the Instagram feed and they have sometimes worked for some customers and others have not. So it was a 50/50 chance it would work for you. I have now how ever decided to add the Instagram Access Token approach instead. If you have any issues with this widget please do get in contact with me by emailing support@wildemedia.co.uk.

1. To find out what your Instagram Access Token is simply click this link and allow the widget access to your Instagram account. Give me my Instagram Access Token.

2. Copy the code that appears on the next page and paste it into the Instagram Access Token text option on the theme options panel.


To get your Flickr widget up and running simply add in your Flickr ID in the theme options and hit Save.

To find out what your Flickr ID is visit this website: http://idgettr.com/. When there change 'username' in the link to your Flickr username and hit the Find button. This will show your ID (highlighted in red below).

Copy the result and paste it into the themes 'Flickr ID' option and hit Save.

Theme Options

Below is a list of ALL the theme options added into this theme. Customise these options until your heart is content for a unique version of the Zurich theme.


Theme Option Description
Background Change the colour of the main background.
Body Font Change the colour of the main body font.
Link Hover Change the colour of the text link hover effect.
Mobile Header Background Change the colour of the mobile view header background.
Navigation Background Change the colour of the navigation background in the sidebar.
Sidebar Background Change the colour of the sidebar background.
Theme Change the colour of the main theme (shown in red on live preview).
Titles Change the colour of the posts titles.

Tick Box Options

Theme Option Description
Repeat Background Image Make the background image repeat instead of stretch.
Show Related Posts Show the related posts widget on the posts permalink page.
Show Search Box Show or hide the search box in the sidebar.
Show Social Networks Show or hide the social network icons in the sidebar.

Upload Images

Theme Option Description
Repeat Background Image Make the background image repeat instead of stretch.
Logo Upload your own logo for the header.
Logo Retina Upload a retina version of your logo (double the size of your normal logo).

Text Inputs

Theme Option Description
DeviantArt Link Insert your DeviantArt profile link here.
Disqus Shortname Insert your Disqus shortname for your blog here.
Facebook Link Insert your Facebook profile link here.
Featured Vimeo Video Add your featured Vimeo Video link here.
Featured Vimeo Title Add your featured Vimeo Video widget title here.
Featured YouTube Video Add your featured YouTube Video link here.
Featured YouTube Title Add your featured YouTube Video widget title here.
Flickr ID Insert your Flickr ID here.
Google Analytics Insert your Google Analytics code here.
Google Font Insert your Google Font name here e.g Cabin, Ubuntu, etc.
Google Font Code Insert your Google Font code link here.
Googleplus Link Insert your GooglePlus profile link here.
Instagram Username Insert your Instagram Username link here.
Linkedin Link Insert your LinkedIn profile link here.
Max Related Posts Specify the amount of related posts you want to show.
Picasa Link Insert your Picasa profile link here.
Skype Link Insert your Skype profile link here.
Tumblr Link Insert your Tumblr profile link here.
Twitter ID Insert your Twitter ID here.
Twitter Link Insert your Twitter profile link here.
Vimeo Link Insert your Vimeo profile link here.


Check out all the issues I've fixed, featured I've added and old stuff I've updated.

11.09.2013 - v1.4

  • NEW Added the option to set the amount of tweets shown in the sidebar.
  • NEW Added the option to change the colour of the mobile view header background.
  • NEW Added the option to change the colour of the navigation menu in the sidebar.
  • FIX Fixed the Twitter widget in the sidebar.
  • FIX Fixed the Instagram widget in the sidebar.
  • UPDATE Moved the media queries to the top of the HTML file.

04.03.2013 - v1.3

  • NEW Added Pinterest, Instagram, Dribbble, Picasa, YouTube and SoundCloud icon links to the sidebar.
  • NEW Added a featured Vimeo and YouTube video in the sidebar.
  • NEW Sidebar now scrolls so more content can be added without it getting cut off.
  • FIX Removed the extra comma that appeared after the last tag.
  • FIX Search button now has a background colour matching the theme colour.
  • FIX Read More button now has a background colour matching the theme colour.
  • FIX Styled the Question post and added in the users avatar image.
  • UPDATE Enlarged the Instagram, Dribbble and Flickr images in the sidebar.

16.01.2013 - v1.2.1

  • FIX Reverted back to a previous version of jQuery.

14.01.2013 - v1.2

  • FIX Error when clicking on photos for large view
  • FIX Background image not stretching when Repeat Background wasn't ticked.
  • FIX Spotify player now resizes properly.

11.11.2012 - v1.1

  • NEW Added scroll to top button.
  • FIX Sidebar toggle button now has right colour for hover action.
  • FIX Background colour now works when setting one in the theme options.
  • FIX Background image repeat now works.
  • DELETE All references to parallax effect.

22.10.2012 - v1

Initial Release


These are all the awesome plugins / guides / people that help to create this theme.

Scroll To Top