Scope Help Documentation

Introduction

Thank you!

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

About Scope

Scope is a modern, responsive, retina ready Tumblr theme. It's full of fun little widgets and supports ALL Tumblr post types. You can customise everything through the theme options panel until your heart is content. Take full advantage of the full width image slider and showcase your best work or some pictures of kittens.


Set Up

Installing the Scope theme

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

Unzip your download folder and locate the Scope.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 showing on your blog simply enter your blogs Disqus shortname in the theme options panel.

Columns

If you have a large amount of text that you would like to show in a text post and would prefer it to be in 2 columns then follow the guide below.

When you've finished writing your text post click on the HTML button seen in the screenshot below:

This is the code view of your text. Now what you want to do is wrap the text in 2 DIV's. One named first_column and the next second_column. For example:

		        <div class="first_column">This is the first column of text.</div>
		        <div class="second_column">This is the second column of text.</div>
		        

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

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

Colours

Theme Option Description
Background Change the colour of the main background.
Blog Title Change the colour of your blogs main title, seen in the header.
Description Text Change the description text found in the header underneath the title.
Down Arrow Change the colour of the down arrow underneath the description.
Down Arrow Hover Change the hover state colour of the down arrow.
Header Background Change the colour of the header background if your not using an image.
Link Hover Change the colour of the links hover state.
Main Navigation Change the colour of the links in the main navigation bar.
Main Navigation Background Change the colour of the background of the main navigation bar.
Main Navigation Hover Change the colour of the main navigation links hover state.
Pagination Background Change the colour of the background of the pagination bar.
Pagination Buttons Change the colour of the buttons in the pagination bar.
Pagination Buttons Hover Change the colour of the hover state for the pagination buttons.
Posts Even Background Change the background colour of all the even numbered posts.
Posts Even Links Change the colour of the links in the even numbered posts.
Posts Even Links Hover Change the colour of the links hover state in all the even numbered posts.
Posts Even Text Change the colour of the text in all the odd numbered posts.
Posts Odd Background Change the background colour of all the odd numbered posts.
Posts Odd Links Change the colour of the links in the odd numbered posts.
Posts Odd Links Hover Change the colour of the links hover state in all the odd numbered posts.
Posts Odd Text Change the colour of the text in all the odd numbered posts.
Read More Link Change the colour of the read more button.
Read More Link Hover Change the colour of the read more buttons hover state.
Scroll To Top Change the colour of the scroll to top button found at the bottom of the page.
Scroll To Top Hover Change the colour of the scroll to top hover state.
Scroll To Top Text Change the colour of the scroll to top button text.
Sidebar Background Change the colour of the sidebar background.
Sidebar Button Change the colour of the sidebar buttons
Sidebar Button Hover Change the colour of the sidebar buttons hover state.
Sidebar Button Text Change the colour of the sidebar buttons text.
Sidebar Links Change the colour of the text links in the sidebar.
Social Links Change the colour of the social links in the sidebar
Social Links Hover Change the colour of the social links hover state.
Titles Change the colour of the titles.
Toggle Buttons Change the colour of the sidebar and search toggle buttons.
Toggle Buttons Hover Change the colour of the sidebar and search toggle buttons hover state.
Toggle Buttons Text Change the colour of the toggle buttons text.
Toggle Buttons Text Hover Change the colour of the toggle buttons text hover state.

Tick Box Options

Theme Option Description
Repeat Header Background Make the header background image repeat.
Show Copyright Show or hide the copyright text at the bottom of the sidebar.
Show Latest Tweets Show or hide the latest tweet widget
Show Post Author Show or hide the posts author
Show Post Date Show or hide the posts date stamp.
Show Post Type Icon Show or hide the posts type icons.
Show Search Box Show or hide the search box.
Show Share Buttons Show or hide the posts share buttons.
Show Social Links Show or hide the social links in the sidebar.
Stretch Header Background Stretch the header background image to fit the width and height.

Upload Images

Theme Option Description
Header 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.

Text Inputs

Theme Option Description
500px Link Insert your 500px profile link here.
99designs Link Insert your 99 Designs profile link here.
Behance Link Insert your Behance profile link here.
Blogger Link Insert your Blogger profile link here.
Copyright Add the text you would like to show in the Copyright area in the sidebar.
Delicious Link Insert your Delicious profile link here.
Description Title Change the title for the About Us widget in the sidebar.
DeviantArt Link Insert your DeviantArt profile link here.
Digg Link Insert your Digg profile link here.
Disqus Shortname Insert your Disqus shortname for your blog here.
Dribbble Link Insert your Dribbble profile link here.
Dribbble Username Insert your Dribbble Username here.
eBay Link Insert your eBay profile link 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 Insert your Forrst profile link here.
Foursquare Link Insert your Foursquare profile link here.
FriendFeed Link Insert your FriendFeed profile link here.
Github Link Insert your Github profile link here.
Google Analytics Insert your Google Analytics code here.
Google Body Font Insert your Google Font name here e.g Cabin, Ubuntu, etc.
Google Body Font Code Insert your Google Font code link 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.
Grooveshark Link Insert your Grooveshark profile link here.
Instagram Access Token Enter your Instagram Access Token here for the Instagram widget.
Instagram Username Insert your Instagram Username link here.
Linkedin Link Insert your LinkedIn profile link here.
Picasa Link Insert your Picasa profile link here.
Pinterest Link Insert your Pinterest profile link here.
Posterous Link Insert your Posterous profile link here.
Reddit Link Insert your Reddit profile link here.
Scribd Link Insert your Scribd profile link here.
Skype Link Insert your Skype profile link here.
Soundcloud Link Insert your Sound Cloud profile link here.
Spotify Link Insert your Spotify profile link here.
Steam Link Insert your Steam profile link here.
Stumbleupon Link Insert your StumbleUpon profile link here.
Tumblr Link Insert your Tumblr profile link here.
Tweet Count Enter the amount of tweets you would like to show in the sidebar.
Twitter ID Insert your Twitter name here.
Vimeo Link Insert your Vimeo profile link here.
Wordpress Link Insert your WordPress profile 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.

13.01.2014 - v1.4

  • NEW Option to show / hide the post tags.
  • NEW Added the Tumblr reblog and like buttons in the post footer.
  • FIX Panorama posts now show the correct post icon.
  • FIX Down arrow colour can now be changed in the theme options panel.

29.10.2013 - v1.3

  • NEW Removed full height header from Search and Tag pages.
  • NEW Option to stretch or not stretch Photo post images.
  • NEW Added a Text Widget to the sidebar.
  • FIX Tweet count now updates the amount of tweets shown.
  • FIX Added padding and margin to bottom of widgets.
  • FIX Reduced font weight on UL and OL lists.

14.06.2013 - v1.2

  • NEW Option to show / hide the Reblog and Permalink buttons found in the posts footer.
  • FIX Issue where Twitter feed would not load.
  • FIX Issue where large gap appeared underneath the photoset photos.
  • FIX Issue where photos would not appear in Lightbox.

11.06.2013 - v1.1

  • NEW Option to show / hide the posts date.
  • NEW Option to show / hide the post type icons.
  • NEW Option to show / hide the share buttons.
  • NEW Use a 2 column layout within the text posts. See here for more information.
  • NEW Added some padding to the top of the sidebar.
  • NEW Down arrow now has a animated scroll effect when clicked.
  • NEW Option to add a tagline underneath logo instead of showing description twice.
  • FIX Issue where sidebar and search toggle buttons would move up when down arrow was clicked.
  • FIX Reduced size of titles text on the mobile view.

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



Scroll To Top