Desire Help Documentation

Introduction

Thank you!

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

About Desire

Desire features a flat, clean and modern design with crisp details and beautiful colours. Every part of the theme can be customised right down to the icon colours. There are plenty of widgets to chose from and social media icons for you to add in the sidebar.


Set Up

Installing the Desire theme

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

Unzip your download folder and locate the Desire.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 make the Disqus comments appear on the posts permalinks set up an account over at www.disqus.com. Once you have a shortname for you blog enter it in the Disqus Shortname option in the theme options panel.


Widgets

Tag Cloud

The Tag Cloud requires you to do a little setting up before it will work. This does allow you to customise it to your liking though. I was using a Tag Cloud that just worked out of the box but unfortunately it clashes with some of the of Javascript and also is VERY slow to load.

Head on over to the Tag Cloud generator website here: http://post-theory.com/tumblr-tag-cloud-javascript

Scroll down to the generator and fill in all the details you would like your Tag Cloud to show. Have a look at the details I entered in the screenshot below...

Once your happy with the information that is being shown in the example. Now copy the script link, example highlighted in red in the below image. Just make sure to copy the link that is in between the quotes.

Now log in to your Tumblr and go to the customisation screen and enter the code in the Tag Cloud Code input.

Hit the Update Preview and Save buttons at the top and you'll see the Tag Cloud update.

Latest Tweets

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..

Dribbble

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.

Instagram

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 click the Get Token button. Instagram Access Token Generator.

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

Flickr

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 Desire theme.

Colours

Theme Option Description
Background Change the colour of the main background.
Body Text Change the colour of the body text.
Header Border Change the colour of the header bottom border.
Icon Answer Change the colour of the Answer Icons.
Icon Audio Change the colour of the Audio Icons.
Icon Chat Change the colour of the Chat Icons.
Icon Link Change the colour of the Link Icons.
Icon Photo Change the colour of the Photo Icons.
Icon Photoset Change the colour of the Photoset Icons.
Icon Quote Change the colour of the Quote Icons.
Icon Text Change the colour of the Text Icons.
Icon Video Change the colour of the Video Icons.
Main Nav Links Change the colour of the main navigation links in the header.
Main Nav Links Hover Change the colour of the main navigation link hover in the header.
Mobile Nav Background Change the colour of the mobile navigation background.
Mobile Nav Links Change the colour of the mobile navigation links.
Pagination Button Change the colour of the pagination buttons found in the footer.
Pagination Button Hover Change the colour of the pagination buttons hover found in the footer.
Pagination Pages Text Change the colour of the pagination text found in between the next and previous buttons.
Post Background Change the colour of the post background.
Post Footer Background Change the colour of the post footer background.
Post Footer Border Change the colour of the post footer border.
Post Type Icons Change the colour of the post type icons.
Search Button Change the colour of the search button.
Search Button Hover Change the colour of the search button hover state.
Sidebar Buttons Change the colour of the sidebar buttons.
Sidebar Buttons Hover Change the colour of the sidebar buttons hover state.
Sidebar Text Change the colour of the sidebar text.
Sidebar Text Links Change the colour of the sidebar text links.
Sidebar Titles Change the colour of the sidebar titles.
Social Links Hover Change the colour of the social links hover state.
Tag Background Change the colour of the tag background.
Tag Background Hover Change the colour of the tag background hover state.
Tag Background Change the colour of the tag background.
Title Change the colour of the main title.

Fonts

Theme Option Description
Body Change the font of the main body text.

Tick Box Options

Theme Option Description
Show Affiliate Banners Show / Hide the Affiliate Banner in the sidebar.
Show Album Art on Audio Posts Show / Hide the album artwork on audio posts.
Show Avatar Show / Hide the avatar in the sidebar.
Show Search Box Show / Hide the search form in the sidebar.
Show Social Links Show / Hide the social network links in the sidebar.
Show Tags Show / Hide the tags in the posts.

Upload Images

Theme Option Description
Background Upload an image for the blogs background.
Banner Image Upload your affiliate banner image.
Logo Upload your logo for the header.
Logo Retina Upload the retina version of your logo for the header.

Text Inputs

Theme Option Description
Banner Link Insert the link for the sidebar affiliate banner image.
Body Font Size Change the size of the main body font.
Disqus Shortname Insert the Disqus shortname for you blog to show comments.
Dribbble Icon Link Insert the link for Dribbble icon in the sidebar.
Dribbble Username Insert your Dribbble username to make the widget appear in the sidebar.
Facebook Icon Link Insert the link for Facebook icon in the sidebar.
Flickr ID Insert your Flickr ID to make the widget appear in the sidebar.
Flickr Icon Link Insert the link for Flickr icon in the sidebar.
Forrst Icon Link Insert the link for Forrst icon in the sidebar.
Google Analytics Insert the Google Analytics code for tracking visits.
Google Font Insert the name of the Google Webfont you would like to use.
Google Font Code Insert the code for the Google Webfont you would like to use.
Google Plus Icon Link Insert the link for Google Plus icon in the sidebar.
Home Page Link Change the home page link name.
Instagram Access Token Insert your Instagram Access Token to make the widget appear in the sidebar.
Instagram Icon Link Insert the link for Instagram icon in the sidebar.
Instagram Username Insert the your Instagram username here.
LinkedIn Icon Link Insert the link for LinkedIn icon in the sidebar.
Pinterest Icon Link Insert the link for Pinterest icon in the sidebar.
Tweet Count Set the amount of tweets you would like to show in the sidebar.
Twitter ID Insert your Twitter ID here.
Twitter Icon Link Insert the link for Twitter icon in the sidebar.
Vimeo Icon Link Insert the link for Vimeo icon in the sidebar.
YouTube Icon Link Insert the link for YouTube icon in the sidebar.

Changelog

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

06.03.2014 - v2.1

  • NEW Added the Tag Cloud widget to the sidebar.
  • FIX Issue where Twitter feed would not show in the sidebar.
  • UPDATE Added instructions on how to set up the Tag Cloud widget.

02.10.2013 - v2.0

  • NEW Fully responsive, retina ready layout added.
  • NEW Added Instagram and Dribbble widgets to the sidebar.
  • NEW Responsive videos and photosets.
  • NEW Customise all the colours within the themes option panel.
  • NEW Upload a retina version of your logo for retina displays.
  • NEW The theme now features the new Like and Reblog buttons.
  • NEW Fancy menu for sharing the posts on Twitter, Facebook and Pinterest.
  • NEW Added social network buttons for Instagram, Linkedin, Google Plus, Vimeo, Dribbble, Forrst, Flickr and Pinterest.
  • NEW Fontello icon font has been used for the icons so they look great on retina displays and are easily customised.
  • UPDATE The Flickr feed is now compatible with iOS devices.
  • UPDATE Compressed some of the CSS styles to make the file smaller.
  • UPDATE Tidied up the HTML file so that it is easier to read and customise.

07.06.2011 - v1.5

  • NEW Added a Flickr Feed to the sidebar.
  • NEW Replaced Cufon Font Replacement with Google Web Fonts.
  • NEW Added the choice of 5 different custom fonts.
  • FIX Fixed the bug with the tags overlapping and splitting.
  • FIX Fixed the bug with the Social Network links not working when adding them in the Appearance tab.

31.03.2011 - v1.4

  • NEW Added the option to add affiliate banners to the sidebar through the Appearance tab.
  • NEW Added a tag cloud to the sidebar. Added a rollover effect to the sidebar and main navigation.
  • NEW Edited the post icons so you can now have any colour or image as the background.
  • NEW Added a drop shadow to the photo and video posts.
  • NEW Added the option to change the colour of the text in the sidebar through the Appearance tab.
  • FIX Fixed recurring problem with the Twitter feed not appearing.
  • UPDATE Added extra characters to Cufon for foreign languages.

04.03.2011 - v1.3

  • NEW Option to show / hide the avatar, social icons, Twitter, Following and Likes tabs.
  • NEW Option to change the colour of the main title and links.
  • NEW Option to enter your Google Analytics ID for visitor tracking.
  • FIX Issue where header would not move down when a large logo was uploaded.

17.02.2011 - v1.2

  • FIX Fixed the Twitter link problem where it would give an error.

25.01.2011 - v1.1

  • NEW Added a nice jQuery 'Scroll to Top' button.
  • NEW Added 'ShareThis' buttons to each post.
  • NEW Added PrettyPhoto to Photo posts.
  • FIX Fixed Disqus comments widget.
  • FIX Fixed link date on date of post.
  • FIX Fixed some validation errors.
  • UPDATE Added all the heading sizes.
  • UPDATE Updated the documentation with Disqus and ShareThis instructions.
  • DEL Removed the tags and note counts from the Permalink Pages.

07.01.2011 - v1

Initial Release

Rating the Theme

It would be awesome if you could rate the theme for me. If you feel the theme deserves less than 5 stars please contact me before rating and I will try to improve your experience with the theme.

Check out the screenshot below on how to rate a file.



Scroll To Top