Rapture Help Documentation

Introduction

Thank you!

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

About Rapture

Rapture is a fully responsive and retina ready Tumblr theme designed and built for professionals to showcase their portfolio. The theme has been neatly hand coded and can easily be customised by the end user.


Set Up

Installing the Rapture theme

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

Unzip your download folder and locate the Rapture.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 Edit Theme 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. The sizes you will need to make your logo are 200px by 70px for the normal size and 400px by 140px for the retina size.

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

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


Theme Options

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

Upload Images

Theme Option Description
Background Upload your background image.
Logo Upload your logo for the header.
Logo Retina Upload the retina version of your logo for the header.
Slide 1 Upload an image for slide 1 of the image scroller.
Slide 2 Upload an image for slide 2 of the image scroller.
Slide 3 Upload an image for slide 3 of the image scroller.
Slide 4 Upload an image for slide 4 of the image scroller.
Slide 5 Upload an image for slide 5 of the image scroller.
Affiliate 1 Image Upload an image for the affiliate banner area.
Affiliate 2 Image Upload an image for the affiliate banner area.
Affiliate 3 Image Upload an image for the affiliate banner area.
Affiliate 4 Image Upload an image for the affiliate banner area.

Colours

Theme Option Description
Background Change the colour of the main background.
Header Change the colour of the main header background.
Header Title Change the colour of the main header title.
Titles Change the colour of the titles in the posts.
Body Font Change the colour of the main body font.
Link Hover Change the colour of the link hover effect.
Theme Change the colour of the main theme.
Tagcloud Links Change the colour of the tag cloud links.

Font Options

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

Tick Box Options

Theme Option Description
Repeat Background Image Make the background image repeat or not repeat.
Show Image Slider Show or hide the image slider on the home page.
Show Search Box Show or hide the search box in the sidebar.
Show Affiliates Show or hide the affiliates banner widget in the sidebar.
Dark Shadows Use dark shadows on the posts background.
Show Theme Author Show or hide the themes author link at the bottom of the sidebar.
Show Tag Cloud Show or hide the tag cloud in the sidebar.
Show Tumblr Controls Show or hide the Tumblr Controls in the header.

Text Inputs

Theme Option Description
Body Font Size Change the size of the main body font.
Body Font Line Height Change the line height of the main body font.
Google Analytics Paste in your Google Analytics code here.
Google Font Put the name of the Google Web Font you want to use here.
Google Font Code Put the code for the Google Web Font you want to use here.
Disqus Shortname Enter your Disqus comments shortname here to use the comments system.
Slide 1 Link Add a link for slide 1 in the image slider.
Slide 2 Link Add a link for slide 2 in the image slider.
Slide 3 Link Add a link for slide 3 in the image slider.
Slide 4 Link Add a link for slide 4 in the image slider.
Slide 5 Link Add a link for slide 5 in the image slider.
Twitter ID Add in your Twitter username for the follow button in the sidebar.
Tweet Count Enter a number for the amount of tweets you would like to show.
Flickr ID Enter your Flickr ID for the follow button in the sidebar.
Instagram Access Code Enter your Instagram Access Code here for the Instagram feed.
Instagram Username Enter your Instagram Username for the follow button in the sidebar.
Dribbble Username Enter your Dribbble Username for the feed in sidebar.
Affiliate 1 Link Add a link for affiliate banner 1 in the sidebar.
Affiliate 2 Link Add a link for affiliate banner 2 in the sidebar.
Affiliate 3 Link Add a link for affiliate banner 3 in the sidebar.
Affiliate 4 Link Add a link for affiliate banner 4 in the sidebar.

Changelog

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

31.01.2014 - v2.0

  • NEW Theme is now fully responsive and retina ready.
  • NEW Updated the corner ribbon graphics to pure CSS for full customisation.
  • NEW Added new Instagram, Flickr and Dribbble widgets to the sidebar.
  • NEW Option to upload a retina size (@2) logo.
  • NEW Use of Google Web Fonts for titles.
  • NEW Mobile optimised navigation menu.
  • NEW Responsive video, audio and photoset posts.
  • NEW Responsive image slider in header area.
  • NEW Theme now uses no images so user has full control over colour options.
  • NEW Updated the Tag Cloud with an option that shows amount of posts with certain tags.
  • NEW Social network icons now in the sidebar.
  • NEW Option to be able to set amount of tweets to show in the Twitter feed.
  • NEW Added the new Reblog and Like Tumblr buttons in the posts footers.
  • NEW An icon font is now used for all icons so they can easily be customised.
  • UPDATE Revised the documentation with updated layout and instructions.

11.11.2011 - v1.1

  • NEW Rearranged elements slightly.
  • NEW Added captions to the image slider.
  • NEW Updated the help file with Tumblr's new layout.
  • NEW Added some different background images.

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