Nimble Help Documentation

Introduction

Thank you!

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

About Nimble

Nimble is a modern, clean and business style Tumblr theme. It features over 150 theme options and is 100% responsive and retina ready. Nimble has many custom areas such as the Testimonials and Services areas ready for you to fill with your business's services and feedback. PSD's have been supplied to make it easier for you to get the perfect sized images for the theme.


Set Up

Installing the Nimble theme

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

Unzip your download folder and locate the Nimble.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 set up the commenting system on the posts permalink pages you will need to sign up to www.disqus.com.

Once you've created your new blog settings there copy your disqus shortname and paste it into 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.

Twitter

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.

Instagram

To get your Instagram feed widget showing you will need your Access Token from Instagram. Follow the steps below to find your token.

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.

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.


Services

If you would like to show off some of your services then this is the place to do it. Simply add in your services title and then some text and your away. You can easily remove the Services area by unticking the 'Show Services' option in the theme options panel.

Theme Option Description
Service 1 Link Enter the link you wish to use for the button on Service 1.
Service 1 Link Text Enter the button text for Service 1 here.
Service 1 Text Enter the description for Service 1 here.
Service 1 Title Enter the title for Service 1 here.

Repeat the above entries for services 2, 3 and 4 but enter them in the number corresponding to the service from left to right.


Testimonials

To add a new testimonial to the rotation below the blog posts. Simply find Testimonial 1, 2, 3, 4 and 5 in the theme options panel. If you only have 3 then not to worry, just add in 3 and only 3 will show. If you'd like to add more then 5 then please email me at support@wildemedia.co.uk.

Theme Option Description
Testimonial 1 Enter your clients testimonial here.
Testimonial 1 Client Enter the name of your client here.

Repeat the above for Testimonials 2 to 5.


Theme Options

There are over 150 theme options for the Nimble theme. 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 Nimble theme.

Colours

Theme Option Description
Background Change the colour of the main background.
Blog Title Change the colour of your Tumblr blog title.
Buttons Change the background colour of the buttons used throughout the theme.
Buttons Hover Change the background colour of the buttons hover effect.
Buttons Text Change the colour of the buttons text.
Copyright Background Change the colour of the bottom footer bar where the copyright text sits.
Footer Change the colour of the background on the footer.
Footer Border Change the colour of the footers top border.
Footer Titles Change the colour of the footer widget titles.
Link Hover Change the colour of the links hover state.
Menu Link Change the colour of the main navigation link.
Menu Link Hover Change the colour of the main navigation link hover state.
Post Tags Background Change the colour of the post tags background colour.
Post Tags Hover Change the colour of the post tags background hover state.
Results Background Change the colour of the Tag and Search pages result bar.
Scroll To Top Change the colour of the scroll to top buttons background
Scroll To Top Hover Change the colour of the scroll to top buttons hover state.
Slide Caption Background Change the background colour of the image sliders captions.
Slide Caption Text Change the colour of the image sliders caption text.
Slide Nav Change the colour of the image sliders left and right arrows.
Slide Nav Hover Change the colour of the image sliders left and right hover states.
Slide Nav Text Change the colour of the image sliders left and right arrows.
Social Links Change the colour of the social network icons in the footer.
Social Links Hover Change the colour of the social network icons hover state.
Tagline Background Change the colour of the tagline's background.
Testimonials Background Change the colour of the Testimonials background colour.
Text Change the colour of the body text.
Text Link Change the colour of the text links.
Text Link Hover Change the colour of the text links hover state.
Theme Change the colour of the themes highlight.
Toggle Nav Change the background colour of the navigation toggle button on the mobile view.
Toggle Nav Hover Change the background colour of the navigation toggle button's hover state.
Toggle Nav Text Change the colour of the navigation toggle buttons text.

Font Options

Theme Option Description
Body Change the font for the body text.

Tick Box Options

Theme Option Description
Background Fixed Make the background image fixed so that it does not scroll.
Background Repeat Make the background image repeat or not repeat.
Background Stretch Make the background image stretch the height and width of the browser window.
Show Album Artwork on Audio Posts Show or hide the audio posts artwork.
Show Archive Button Show or hide the Archive button.
Show Copyright Show or hide the copyright text in the footer.
Show Image Slider Show or hide the image slider on the home page.
Show RSS Icon Show or hide the RSS icon in the footer.
Show Random Button Show or hide the Random post button.
Show Services Show or hide the services area.
Show Share This Buttons Show or hide the share buttons on the posts permalink page.
Show Social Links Show or hide the social links in the footer.
Show Tag Cloud Show or hide the tag cloud in the footer.
Show Tagline Show or hide the tagline banner.
Show Testimonials Show or hide the testimonials banner.
Show Tumblr Icon Show or hide the Tumblr icon in the footer.
Show Twitter Feed Show or hide the Twitter feed in the footer.

Upload Images

Theme Option Description
Background Upload an image for the blogs background.
Logo Upload your logo for the header.
Logo Retina Upload the retina version of your logo for the header.
Slide1 Upload an image for slide 1 of the image scroller.
Slide2 Upload an image for slide 2 of the image scroller.
Slide3 Upload an image for slide 3 of the image scroller.

Text Inputs

Theme Option Description
99designs Link Insert your 99 Designs link here.
Behance Link Insert your Behance profile link here.
Blogger Link Insert your Blogger link here.
Body Font Size Change the size of the main body font.
Copyright Link Change the link for the copyright section.
Copyright Text Change the text that appears in the copyright section of the footer.
Delicious Link Insert your Delicious link here.
DeviantArt Link Insert your DeviantArt profile link here.
Digg Link Insert the link to your Digg page.
Disqus Shortname Enter your blogs Disqus shortname here for comments to appear on posts.
Dribbble Link Insert your Dribbble profile link here.
Dribbble Username Insert your Dribbble Username here.
Ebay Link Enter the link to your eBay shop here.
Envato Link Enter the link to your Envato profile here.
Facebook Link Insert your Facebook profile link here.
Flickr ID Insert your Flickr ID here.
Flickr Link Insert your Flickr profile link here.
Forrst Link Enter the link to your Forrst profile here.
Foursquare Link Enter the link to your Foursquare profile here.
FriendFeed Link Enter the link to your FriendFeed profile here.
Github Link Enter the link to your GitHub profile here.
Google Analytics Insert your Google Analytics code here.
Google Font Enter the name of the Google font you wish to use for the titles.
Google Font Code Enter the Google font code your would like to use for the titles.
GooglePlus Link Insert your GooglePlus profile link here.
Grooveshark Link Enter your Grooveshark link here.
Instagram Link Insert your Instagram profile link here.
Instagram Username Enter your Instagram username here for the widget in the footer.
Linkedin Link Insert your LinkedIn profile link here.
Logo Height Set the height of your logo here e.g 100px.
Logo Width Set the width of your logo here e.g 200px.
Picasa Link Insert your Picasa profile link here.
Pinterest Link Insert your Pinterest profile link here.
Reddit Link Insert your Reddit link here.
Scribd Link Enter your Scribd profile link here.
Service 1 Link Enter the link for the button.
Service 1 Link Text Enter the text for the button.
Service 1 Text Enter the text you would like to show for this service.
Service 1 Title Enter the services title.
Service 2 Link Enter the link for the button.
Service 2 Link Text Enter the text for the button.
Service 2 Text Enter the text you would like to show for this service.
Service 2 Title Enter the services title.
Service 3 Link Enter the link for the button.
Service 3 Link Text Enter the text for the button.
Service 3 Text Enter the text you would like to show for this service.
Service 3 Title Enter the services title.
Service 4 Link Enter the link for the button.
Service 4 Link Text Enter the text for the button.
Service 4 Text Enter the text you would like to show for this service.
Service 4 Title Enter the services title.
Skype Link Enter your Skype contact link here.
Slide 1 Button Link Enter the link for the slides button.
Slide 1 Button Text Enter the link button text.
Slide 2 Button Link Enter the link for the slides button.
Slide 2 Button Text Enter the link button text.
Slide 3 Button Link Enter the link for the slides button.
Slide 3 Button Text Enter the link button text.
Soundcloud Link Insert your Sound Cloud profile link here.
Spotify Link Enter the link to your Spotify profile.
Steam Link Enter the link to your Steam profile.
Stumbleupon Link Insert your Stumbleupon link here.
Tag Cloud Code Enter the code for you Tag Cloud here.
Tagline Enter your tagline text here.
Tagline Button Link Enter the tagline button link here.
Tagline Button Text Enter the tagline button text here.
Testimonial 1 Enter your testimonial text here.
Testimonial 1 Client Enter your clients name here.
Testimonial 2 Enter your testimonial text here.
Testimonial 2 Client Enter your clients name here.
Testimonial 3 Enter your testimonial text here.
Testimonial 3 Client Enter your clients name here.
Testimonial 4 Enter your testimonial text here.
Testimonial 4 Client Enter your clients name here.
Twitter ID Insert your Twitter ID here.
Vimeo Link Insert your Vimeo profile link here.
Wordpress Link Insert your WordPress site link here.
YouTube Link Insert your YouTube profile link here.

Changelog

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

17.01.2014 - v1.4

  • NEW [GROUPS] Added post author underneath the date on the permalink page.
  • NEW [GROUPS] Added the Blog Authors widget in the sidebar on the permalink page.
  • NEW Option to show / hide the Tumblr controls at the top of the blog.
  • FIX Disqus comments now WORK!
  • FIX Removed double 'read more' button from text posts.

09.10.2013 - v1.3

  • NEW Option to use avatar images in the testimonial scroller.
  • NEW Option to show / hide the search form.
  • NEW The theme now features a 2 column page layout.
  • NEW Added more spacing to the links in the navigation.
  • FIX Issue where the tweets linked to an error page.
  • FIX Removed the odd comma on the permalink pages.

14.06.2013 - v1.2

  • FIX Issue where Twitter feed would not load.
  • FIX Issue where Instagram feed would not load.
  • FIX Issue where Disqus comments would not load.

01.05.2013 - v1.1

  • FIX Issue where slider images wouldn't sit in the center.

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


Credits

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

Scripts

Images


Scroll To Top