Optic Help Documentation

Introduction

Thank you!

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

About Optic

Optic is a modern, responsive, retina ready Tumblr theme. It uses the Masonry jQuery plugin so that your posts stack nice and neatly next to each other. 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.


Set Up

Installing the Optic theme

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

Unzip your download folder and locate the Optic.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

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

Vimeo Video

If you want to have a featured Vimeo video in the sidebar simply add in the videos unique ID in the theme options panel. This can usually be found at the end of the videos page URL for example: https://vimeo.com/4240369.

YouTube Video

If you want to have a featured YouTube video in the sidebar simply add in the videos unique ID in the theme options panel. This can usually be found at the end of the videos page URL for example: http://www.youtube.com/watch?v=ou8vRWTSsJo.


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

Colours

Theme Option Description
Audio Post Background Change the colour of the Audio posts background.
Background Change the colour of the main background.
Blog Title Change the colour of your Tumblr blog title.
Body Font Change the colour of the body font.
Chat Post Background Change the colour of the Chat posts background.
Link Post Background Change the colour of the Link posts background.
Link Post Text Change the colour of the Link posts text.
Menu Link Change the colour of the main menu links.
Menu Link Hover Change the colour of the main menu links hover.
Menu Text Change the colour of the main menu links text.
Permalink Social Links Change the colour of the social share links on the permalink pages.
Permalink Social Links Hover Change the colour of the social share links hover state on the permalink pages.
Photoset Post Background Change the colour of the Photoset posts background.
Post Footer Change the colour of the posts footer background.
Post Footer Icons Change the colour of the posts footer icons.
Post Footer Links Change the colour of the posts footer links.
Post Pagination Background Change the colour of the posts pagination background.
Post Pagination Link Hover Change the colour of the posts pagination link hover.
Post Type Change the colour of the post type icons in the sidebar.
Post Type Hover Change the colour of the post type icons hover in the sidebar.
Post Type Icons Change the colour of the post type icons.
Posts Loading Change the colour of the posts loading message background.
Quote Post Background Change the colour of the Quote post background.
Read More Change the colour of the read more buttons.
Read More Hover Change the colour of the read more buttons hover.
Search Background Change the colour of the search background.
Share Button Change the colour of the share buttons.
Share Button Hover Change the colour of the share buttons hover.

Tick Box Options

Theme Option Description
Fix Sidebar Make the sidebar sticky so that it doesn't scroll.
Mobile Show Ask Button Show / hide the Ask button on the mobile view.
Mobile Show Social Links Show / hide the social links on the mobile view.
Mobile Show Submit Button Show / hide the Submit button on the mobile view.
Repeat Background Image Make the background image repeat or not repeat.
Show Album Artwork Show or hide the audio posts artwork.
Show Archive Button Show or hide the Archive button in the sidebar.
Show Audio Information Show or hide the audio posts information.
Show Latest Tweet Show or hide the Latest Tweet widget in the sidebar.
Show People I Follow Show or hide the Show People I Follow widget in the sidebar.
Show Photo Caption Show or hide the photo posts caption on the home page.
Show Post Types Show or hide the post types in the sidebar.
Show RSS Button Show or hide the RSS button in the sidebar.
Show Random Button Show or hide the Random button in the sidebar.
Show Tumblr Button Show or hide the Tumblr button in the sidebar.
Use Drop Down Menu Use the drop down menu in the sidebar.

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.

Text Inputs

Theme Option Description
Body Font Size Adjust the size of the body text.
Body Google Font Insert your Google Font name here e.g Cabin, Ubuntu, etc.
Body Google Font Code Insert your Google Font code 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.
Drop Down Menu Text Customise the link text for the Pages drop down.
Facebook Link Insert your Facebook profile link here.
Featured Vimeo Video Insert the Vimeo video unique ID here.
Featured YouTube Video Insert the YouTube video unique ID here.
Flickr ID Insert your Flickr ID here.
Flickr Link Insert your Flickr profile link here.
Google Analytics Insert your Google Analytics code here.
GooglePlus Link Insert your GooglePlus profile link here.
Home Link Text Customise the text for the home page link.
Instagram ID Enter your Instagram ID.
Instagram Link Insert your Instagram profile link here.
Linkedin Link Insert your LinkedIn profile link here.
Logo Height Set the height of your logo here e.g 100px.
Picasa Link Insert your Picasa profile link here.
Pinterest Link Insert your Pinterest profile link here.
Soundcloud Link Insert your Sound Cloud profile link here.
Titles Google Font Insert your Google Font name here e.g Cabin, Ubuntu, etc.
Titles Google Font Code Insert your Google Font code link here.
Twitter ID Insert your Twitter ID here.
Twitter Link Insert your Twitter link here.
Vimeo Link Insert your Vimeo 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.

03.04.2014 - v1.6.8

  • FIX Added the FitVideo.js plugin to handle videos in posts.
  • FIX Fixed the width issue on the embed videos in text posts.
  • FIX Issue where the share button for posts would all sit to the left of the screen before everything loaded.
  • FIX Issue where tags were cut off on the permalink pages.

09.08.2013 - v1.6.7

  • NEW Added the animated 'Share' button to the home page posts.
  • NEW Removed the horizontal scrollbar.
  • NEW The social share button links now appear in new tabs.
  • NEW Added Email, Website, Github and Forrst links to the sidebar.
  • NEW Beefed up the SEO.
  • NEW Added some Facebook Open Graph meta tags.
  • NEW Added tags to all the post types.
  • FIX The back to top button no longer appears at the top on first load.

14.06.2013 - v1.6.6

  • NEW Installed Tumblr's own Twitter feed functionality.
  • NEW Option to set the size of the body text font.
  • NEW Installed an Instagram feed widget that uses the Access Tokens.
  • NEW Option to show / hide the Ask, Submit and Social Links on the mobile view.
  • FIX Issue where videos would not appear in the sidebar or posts.
  • FIX Issue where Twitter Feed suddenly stopped.
  • FIX Issue where Instagram Feed wouldn't work.

08.05.2013 - v1.6.5

  • NEW Customise the text for the Home and Pages button.
  • NEW Option to turn the drop down menu on or off.
  • NEW Option to turn the Archive, Tumblr, RSS and Random buttons in the sidebar on or off.
  • FIX Added the option to change the colour of the social links on the permalink pages.
  • FIX Issue where there was a large gap underneath photosets on first load.
  • FIX Issue where Photo and Photoset posts captions would appear twice on the permalink pages.
  • FIX Issue where links added to photos would not work.

14.04.2013 - v1.6.4

  • NEW Reblog button has been added to the posts footer.
  • FIX Issue with the audio player showing up twice on newly loaded Audio posts.
  • FIX Issue with SoundCloud player sizing.
  • FIX Issue where photosets wouldn't work on newly loaded posts.

16.03.2013 - v1.6.3

  • NEW Vimeo, Soundcloud, Dribbble and Picasa to sidebar.
  • NEW Vimeo and YouTube video widgets.
  • NEW Back to Top button to the bottom of the posts.
  • NEW Facebook, Twitter, Google Plus and Pinterest links are now on the index page.
  • NEW Updated theme docs to a responsive layout.
  • UPDATE Increased spacing between posts..
  • FIX Disqus comments being cut off.
  • FIX Sidebar being cut off on small screens.
  • FIX Google Plus button now shows on permalink pages.
  • FIX Height of blog title when no logo was used.
  • FIX Fixed some CSS issues.

15.01.2013 - v1.6.2

  • NEW Now you can adjust the height of the logo div if you have a portrait logo.
  • FIX Reverted to the previous version of jQuery as Masonry broke with the latest.

20.12.2012 - v1.6.1

  • NEW 4 new social network icons added to the sidebar including: Instagram, LinkedIn, Flickr and YouTube.
  • NEW Updated post type icons with new ones.
  • NEW Added Pretty Print to make your code snippets look awesome.
  • NEW Photosets now use a responsive version of the default Tumblr layout.
  • UPDATE Increased the height of the Latest Tweet widget.
  • UPDATE Album Art now stretches to the full width of the post container.
  • FIX Issue where Spotify player would stick out of the post.
  • DELETE Removed the FlexSlider from photosets.

26.11.2012 - v1.6

  • NEW Option to show / hide search form.
  • NEW Option to show / hide post types.
  • NEW Option to change colour of widget titles text.
  • NEW Option to change the colour of the body text.
  • NEW Added Dribbble feed to sidebar.
  • NEW Added Latest Tweet feed to sidebar.
  • NEW Change all titles colours at once.
  • NEW Change colour of ‘read more’ link on text posts.
  • NEW Use a Google Font for the body text as well as the Titles.
  • NEW Added a ‘Back to top’ button on the mobile view.
  • NEW Added option to upload a retina logo.
  • NEW Included PSD’s for the normal and retina logo sizes.
  • NEW Show / Hide Twitter Feed in theme options panel.
  • UPDATE Posts on permalink now have the same background colour as the index page posts.
  • UPDATE Enlarged social network links on the Share banner on the permalink page.
  • UPDATE Social links are now hidden on mobile view to focus on the posts.
  • UPDATE Disqus comments code now only loads if needed.
  • FIX Issue where Google Plus link wasn’t working.
  • FIX Issue where background image would not repeat when selected in theme options.
  • FIX Issue where link posts title link would not go to the correct path.
  • FIX Fixed the spacing issue on mobile layout.
  • FIX Fixed issue where Artist wouldn’t appear on Audio posts.
  • FIX Took Ask and Submit pages out of the Pages dropdown as they wouldn’t appear when no pages were created.
  • DELETE Removed the ‘Twitter Link’ option in the theme options panel.

19.10.2012 - v1.5.1

  • NEW Option to change the colour of the Share button in the themes options panel.
  • NEW Option to turn the audio information on or off in the theme options panel.
  • FIX Issue with audio players appearing at the bottom of newly loaded posts.
  • FIX Issue when other posts would overlap audio posts on newly loaded posts.
  • FIX Issue where 'Flash 9 required' error message would still appear on new audio posts.

14.10.2012 - v1.5

  • NEW Option to show / hide album artwork on audio posts.
  • NEW Option to stop posts overflowing the width of the browser.
  • NEW Audio posts now display track information such as artist, album, etc.
  • NEW Change the colour of the audio posts background.
  • NEW Added styling to PRE tags.
  • NEW Added link to text blog title.
  • NEW Minimised the CSS in the optic.html file and created a separate CSS file.
  • FIX Removed Likes button in post footer so View Button didn't disappear.
  • FIX Share buttons issue where buttons would move down in FireFox.
  • FIX Link targets now open in new tabs.
  • FIX Audio player now shows on new posts that are loaded in when scrolling down.

04.09.2012 - v1.4

  • NEW Option to change the background color of the posts footer.
  • NEW Option to change the colour of the links and icons in the posts footer.
  • NEW Removed post rollover and added a post footer instead.
  • NEW Instructions files are now included in the download folder.
  • NEW Uploaded files to Tumblr instead of DropBox folder.
  • NEW Javascript files are now included in the download incase of customisation requirements.
  • FIX Sorted out the issue with 'People I Follow' widget not working.
  • FIX When scrolling down then opening / closing the sidebar browser doesn't go back to the top.
  • FIX Stopped 'Show Sidebar' button from showing when the page first loads.

27.08.2012 - v1.3

  • NEW Flickr Feed.
  • NEW Apple Touch icon for saving a bookmark to the home screen on an iPhone or iPad.
  • NEW More information on setting up the Instagram feed.
  • FIX Moved the Ask and Submit buttons to the Page drop down.
  • FIX Styled the Header tags.
  • FIX Rebranded and updated the help documentation.
  • FIX Added SEO information (meta data).
  • FIX Width issue on Spotify posts.

11.08.2012 - v1.2

  • FIX Issue with photosets slider not working on initial posts.
  • FIX Slow loading time caused by Disqus loading on index page when not needed.
  • FIX No background to the captions.
  • FIX Few CSS additions to make things look more pretty.
  • FIX Issue where Ask and Submit buttons wouldn't appear when no custom pages were added.
  • FIX Adjusted styling of video post hover so videos can be played on the index page.

08.08.2012 - v1.1

  • NEW Instagram feed in sidebar.
  • NEW View Post button on posts rollover.
  • NEW Pinterest button on posts rollover.
  • NEW Titles added on sidebar widgets.
  • FIX Image width on photo posts on iPhone.
  • FIX Photosets permalink page now shows content.

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