Glide Help Documentation

Introduction

Thank you!

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

About Glide

Glide 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 Glide theme

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

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

Image Slider

Fancy showcasing some of your best shots or work? Then why not add the image slider to the Glide theme. You can easily get this feature working by simply uploading your images through the options panel.

Please make sure your images are now larger or smaller than 1400 x 300px in size.

You can also select the sliders rotation effect. Find 'Slider Effect' in the theme options panel and type in fade or slide.

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

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


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.

Recent Posts

The Recent Posts widget show your 5 latest posts. If you have less than 5 posts the list will not show up. Easy thing to do would be to turn it off through the theme options panel or blog your little heart out.

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

To have a featured Vimeo Video show up in the sidebar simply enter the Video unique ID number in the Feature Vimeo Video text input in the themes options panel.

YouTube Video

To have a featured Vimeo Video show up in the sidebar simply enter the Video unique ID number in the Feature YouTube Video text input in the themes options panel.


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

Colours

Theme Option Description
Background Change the colour of the main background.
Content Border Change the colour of the contents borders.
Link Hover Change the colour of the text link hover effect.
Nav Background Change the colour of the main navigation bar.
Nav Link Change the colour of the main navigation bar links.
Post Icon Background Change the colour of the post icons background.
Primary Content Change the background colour of your posts.
Secondary Content Change the background colour of the sidebar.
Sidebar Buttons Change the colour of the buttons seen in the sidebar.
Sidebar Titles Change the colour of the sidebar titles.
Social Links Change the background colour of the social links.
Tagline Change the text colour of the tagline.
Tagline Background Change the background colour of the tagline bar.
Text Change the colour of the main body text.
Theme Change the themes main colour (green in live preview).

Fonts

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

Tick Box Options

Theme Option Description
Background Fixed Position the background image so that it is fixed.
Background Repeat Make the background image repeat or no-repeat.
Background Stretch Stretch your background image so it covers the entire background.
Show Album Artwork Show or hide the audio posts artwork.
Show Archive Icon Show or hide the Archive icon link.
Show Copyright Show or hide the copyright text at bottom of sidebar.
Show Image Slider Show or hide the image slider on the home page.
Show Mobile Search Box Show or hide the mobile search box.
Show Profile Image Show or hide your profile image in the sidebar.
Show RSS Icon Show or hide the RSS link in the sidebar.
Show Random Button Show or hide the Random post button.
Show Recent Posts Show or hide the Recent Posts widgets in the sidebar.
Show ShareThis Buttons Show or hide the ShareThis buttons on the posts.
Show Site Description Show or hide the site description.
Show Social Links Show or hide the Social Links widget in the sidebar.
Show Tag Cloud Show or hide the Tag Cloud in the sidebar.
Show Tagline Show or hide the tagline underneath the image slider.
Show Tumblr Icon Show or hide the Tumblr icon in the social widget.
Show Twitter Feed Show or hide the Twitter Feed in the sidebar.
Use DropDown Menu Use the dropdown menu if you have many custom pages.
Use Home Icon Turn on or off the home page link house icon.

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.
Profile Upload your mugshot for the sidebar.
Slide1 Upload an image for slide 1. 1400 x 300px.
Slide2 Upload an image for slide 2. 1400 x 300px.
Slide3 Upload an image for slide 3. 1400 x 300px.

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.
Delicious Link Insert your Delicious profile link here.
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.
DropDown Menu Link Customise the 'Pages' link text.
eBay Link Insert your eBay profile link here.
Facebook Link Insert your Facebook profile link here.
Featured Vimeo Title Insert the title you would like to give the Vimeo video widget.
Featured Vimeo Video Insert the Vimeo video unique ID here.
Featured YouTube Title Insert the title you would like to give the YouTube video widget.
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.
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 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 Link Insert your Instagram profile link here.
Instagram Username Insert your Instagram Username link here.
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 150px.
Picasa Link Insert your Picasa profile link here.
Pinterest Link Insert your Pinterest 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.
Slider Effect Enter 'fade' or 'slide' here to change the image sliders animation effect.
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.
Tag Cloud Code Insert your Tag Cloud link here.
Tagline Enter the text you would like to appear for the tagline.
Twitter ID Insert your Twitter ID 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.
Posterous Link Insert your Posterous profile link here.

Changelog

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

24.06.2013 - v2.0.7

  • FIX Twitter feed now appears in the sidebar. This issue was created by the update to the Twitter API.
  • FIX Size issue of the Instagram and Dribbble images on large screen sizes.
  • UPDATE The Disqus comments code has been updated so the comments system will now appear on all blogs.

02.06.2013 - v2.0.6

  • NEW Added a new way of showing your latest Instagram images with the use of Access Tokens.
  • UPDATE Added some more information about the widgets to the instructions file.

15.05.2013 - v2.0.5

  • NEW Make the slider images fade or slide. See Image Slider for more information.
  • FIX Installed a stable Twitter feed that shows up 100% of the time ;)
  • FIX Installed a better Instagram feed.

25.02.2013 - v2.0.4

  • NEW Theme now support the Panorama post type.
  • NEW Added a new media query for massive monitors.
  • NEW Styled the Question post type.
  • NEW Added an easier way to add your own Tag Cloud code. See this tutorial on how to set it up.
  • NEW Upgraded the help docs to a responsive, clean layout.
  • NEW Show or hide the Latest Posts and Search widgets.
  • FIX Fixed the buggy Audio post layout.
  • FIX Removed height from profile image.
  • FIX Removed the extra comma on the last tag in the posts footers.

30.01.2013 - v2.0.3

  • NEW Adjust the size of the logo height and width in the theme options.
  • NEW Specify the titles for the YouTube and Vimeo videos in the sidebar.
  • UPDATE Upgraded to a better, quicker version of the Tag Cloud.
  • FIX Layout of the Spotify posts and the player would poke outside of the post container.
  • DELETE Removed unwanted images from the images folder.

16.01.2013 - v2.0.2

  • FIX Updated link to previous version of jQuery as it broke a fair few things.

19.12.2012 - v2.0.1

  • NEW 8 more social network icons including Instagram.
  • NEW Control the image slider with the keys on your keyboard.
  • UPDATE Updated FlexSlider to v2.1.
  • FIX Removed padding from underneath the videos in the sidebar.
  • FIX Height issue with the header in Safari and iOS devices.
  • FIX Issue where the content would flicker in Safari and iOS devices when FlexSlider was used.

17.12.2012 - v2.0

  • NEW Option to upload a retina version of your logo.
  • NEW Option to fix, stretch and repeat background images through the options.
  • NEW Converted all icons to an icon font for retina displays.
  • NEW 13 new social network icons.
  • NEW Instagram and Dribbble feeds in the sidebar.
  • NEW Pretty Print for code and pre tags.
  • FIX Removed padding from underneath the videos in the sidebar.
  • FIX Height issue with the header in Safari and iOS devices.
  • FIX Issue where the content would flicker in Safari and iOS devices when FlexSlider was used.
  • DELETE Removed the Flexslider from Photosets reverted to responsive default layout.

30.08.2012 - v1.9

  • NEW Apple Touch icon for when you save a bookmark on iOS devices.
  • NEW SEO meta data has been added to the header.
  • NEW Option to add any Google font.
  • NEW Upgraded the instructions file.

25.07.2012 - v1.8

  • NEW Option to remove the image slider from the Photosets.

11.07.2012 - v1.7

  • NEW Added more instructions to the help file.
  • FIX Issue with profile pictures not showing up after uploading.

19.06.2012 - v1.6

  • NEW Option to change colour of sidebar titles, menu link, content borders and tagline.
  • NEW Home icon for 'Home' link. This can be turned off or on.
  • NEW Option to turn the tag cloud on or off and set an amount to be shown.
  • FIX Issue where Twitter Feed would show even if Twitter ID wasn't added in the theme options panel.
  • FIX Width issue on the drop down menu when long page titles were used.

13.06.2012 - v1.5

  • NEW Option to use CSS3 animated drop down menu for the custom pages if you have multiple pages.
  • NEW Option to turn the drop down menu on or off in the theme options panel.
  • NEW Change the 'Pages' menu link text in the theme options panel.

30.05.2012 - v1.4

  • NEW 10 more social links.
  • NEW Show / hide Archive, RSS, Random and Tumblr links.
  • UPDATE Sprite PSD.

22.05.2012 - v1.3

  • NEW Photoset now use FlexSlider plugin.
  • FIX Padding and Margin on paragraph and header tags.
  • DELETE Removed the drop shadow from the content divs..

15.05.2012 - v1.2

  • NEW Added a Twitter widget to the sidebar.
  • NEW Change the navigation bar background colour in Appearance options.
  • NEW Change the colour of the Twitter widget background in the Appearance options.
  • NEW Flickr Feed, Twitter, Vimeo and YouTube now only appear if the details have been entered.
  • FIX Fixed broken link for notes link in posts footer.
  • FIX Images that were linked elsewhere were overflowing when the browser resized.
  • FIX Fixed big gap that appeared underneath footer when not showing Flickr feed.
  • FIX Fixed issue where you couldn't change background colour because of the default image background.

03.05.2012 - v1.1

  • NEW Added scroll to top button.
  • NEW Added ShareThis buttons to posts permalink pages.
  • NEW After interacting with the slider it resumes play again.
  • NEW Added 20 Google fonts to choose from.
  • NEW Added ability to change every colour in the Appearance panel.
  • NEW Added Google Analytics, add your Google ID in the Appearance panel.
  • NEW Image scroller now slide for better touch interaction on iPad and iPhone.
  • NEW Also added the ability to change the sliders animation.
  • FIX Fixed a broken link on chat post type icon.
  • FIX Fixed a broken link on Tumblr icon in header.
  • FIX When interacted with the slider on iPad or iPhone the scroller would stop rotating.

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