Theme guide

By going to the “Appearance” panel when you customize your theme, you are presented with many options that can let you change the colour scheme of Purify, as well as showing/hiding different features such as enabling comments or showing links to your social network sites.

Sidebar Background color
Sidebar Text color
Background color
Post Background color
Text color
Link color
Meta color
Sidebar Seperator color
Seperator Color
Title Font
Post Font
Secondary Font
Custom Title Font
Custom Post Font
Custom Secondary Font
Sidebar Header Image
Background Image
Sidebar Header
No Background Image
Use Light Social Icons
Use Light Post Icons
Use Light Tag Backgrounds
Use Light More and Top Link
Use White Post Border
Use New Photosets on Index Page
Use New Photosets on Permalink Pages
Facebook Comments On
Show Social Bar
Static Sidebar
Use Tags With Permalinks
Use Infinite Scroll With Tags With Permalinks
Use Larger More Button
Use Larger Title Font
Use Extra Large Title Font
Use Larger Post Font
Use Larger Secondary Font
Use Larger Sidebar Header Font
Use Extra Large Sidebar Header Font
Use Uppercase Titles
Use Bold Titles
Wider Sidebar
Larger Social Icons
Use 400px Post Size
Disqus Shortname
Google Analytics Web Property ID
Clicky Site ID
Facebook App ID
Typekit ID
Email Address
Twitter Username
Facebook URL
Flickr URL
Vimeo URL
LastFM Username
LinkedIn URL
YouTube Channel URL
Dribbble Username
Myspace URL
Tags Label
More Button Label

Sidebar Background color

Background color of the Sidebar.

Sidebar Text color

Text and link color of the Sidebar.

Background color

Background color of the whole page. This will only be visible if “No Background Image” is selected.

Post Background color

This is the background color of each post, both on the index page and on each permalink page.

Text color

The main text color. Used on everything that isn’t a link and not on the sidebar.

Link color

The main link color that is used for the headers of each post and all links within posts.

Meta color

Color for all the “meta tags” that are associated with every post. E.g. “permalink” and “notes”. Remember that this color will be faded by 50% and show it’s full color when it is hovered.

Sidebar Seperator color

This is black by default. The separator is the black line that is used to separate each section on the sidebar. This color is faded at 20%.

Seperator Color

This is black by default. The separator is the black line that is used to separate each section on posts. This color is faded at 20%.

Title Font

Font for post titles.

Post Font

Font for posts.

Secondary Font

Font used for all fonts other than titles and post content, such as meta data and sidebar font.

Custom Title Font

Custom title font. Just input your CSS code for the font, such as “‘Comic Sans’, sans-serif”.

Custom Post Font

Custom post font. Just input your CSS code for the font, such as “‘Comic Sans’, sans-serif”.

Custom Secondary Font

Custom secondary font. Just input your CSS code for the font, such as “‘Comic Sans’, sans-serif”.

Sidebar Header Image

Upload an image here that will replace the heading on the sidebar. Useful if you have a logo, fancy font image etc. For this to apply, Sidebar Header must be checked.

Background Image

This already has a default which is the subtle canvas texture. Any background you upload will repeat. For some good background patterns that repeat - check out subtlepatterns.com

Sidebar Header

Check this option to have an image instead of a text heading on the sidebar.

No Background Image

If this is checked, the background will revert to use a single color, which can be set using Background Color.

Use Light Social Icons

This will make the social icons on the sidebar white. They are black by default. Useful if you wish to have a dark sidebar background color.

Use Light Post Icons

This will make the post icons white. They are black by default. Useful if you wish to have a dark post background color.

Use Light Tag Backgrounds

This will make the tag and type filter buttons on the sidebar white. They are black by default. Useful if you wish to have a dark sidebar background color.

Use Light More and Top Link

This will make the more and back to top buttons white. They are black by default. Useful if you wish to have a dark background color or image.

Use White Post Border

This will make the subtle post border white. It is black by default. Useful if you wish to have a dark background color or image.

Use New Photosets on Index Page

Use the new photoset layouts on the index page. If this isn’t checked photoset posts will just stack photos on top of one another (default).

Use New Photosets on Permalink Pages

Use the new photoset layouts on permalink pages. If this isn’t checked photoset posts will just stack high res photos on top of one another (default).

Facebook Comments On

This needs to be checked in order for your Facebook comments to appear. Once this is checked, enter your Facebook App ID to complete setting up Facebook comments.

Show Social Bar

If this is checked, the social media bar will show underneath the pages on the sidebar. The social media bar is a row of circle buttons that can give users one click access to your profiles or other website. Simply submit the following in order to have the links show up in the social bar.

Static Sidebar

The sidebar is default position fixed, meaning it won’t move when the page scrolls. However, if you have a lot of pages and a large description / blog title - this means content on your sidebar may not be visible to users with small resolutions. If you enable a static sidebar, then the sidebar will scroll with the page allowing for all sidebar content to be visible.

Use Tags with Permalinks

With this option enabled, tags will link to permalink pages instead (e.g. “design” will link to “blogname.tumblr.com/tagged/design). This means that although it won’t perform the fading in / fading out filtering animations, it will load ALL items under that tag as a new page. The maximum amount of tags that will load is 25 and they will be sorted by popularity. For more info read this blog post.

Use Infinite Scroll with Tags with Permalinks

Use infinite scrolling (no need for a more button) with “tags with permalinks” option enabled.

Use Larger More Button

Make the load more posts button in the bottom right hand corner larger.

Use Larger Title Font

Increases the size of the Title font by 2px.

Use Extra Large Title Font

Increases the size of the title font by 4px.

Use Larger Post Font

Increases the size of the Post font by 2px.

Use Larger Secondary Font

Increases the size of the secondary font by 2px.

Use Larger Sidebar Header Font

Increases the size of the Sidebar header font by 2px.

Use Extra Large Sidebar Header Font

Increases the size of the sidebar header font by 4px.

Use Uppercase Titles

Makes all post titles uppercase. This is enabled by default.

Use Bold Titles

Makes all titles bold.

Wider Sidebar

Makes the sidebar wider. This is useful is you have lots of tags, or a long blog description.

Larger Social Icons

Uses social icons 1.5 times larger than the default icons.

Use 400px Post Size

The homepage posts will be 400px wide, which is almost twice the size of the default which is 250px.

Disqus Shortname

If you wish to have comments on your Tumblr, enter your disqus shortname here to activate comments. To get your disqus shortname, sign up to disqus.com to receive one.

Google Analytics Web Property ID

If you wish to track google analytics stats on your blog, sign up to google analytics and place your Google Analytics Web Property ID in here to active analytics.

Clicky Site ID

Enter your Clicky ID so Clicky stats can be tracked for your site.

Facebook App ID

You need to enter your Facebook APP ID to enable Facebook comments on your blog. To obtain one, follow this guide up to where it says “modify Tumblr theme” (that part is already taken care of by the Purify theme). Enter your Facebook ID to enable Facebook comments.

Typekit ID

It is possible to use your Typekit account to use custom fonts for the headings.

1. Enter your Typekit User ID which can be found in the Kit Editor. inside the “Embed Code” option found on the top right.

2. Back in the Kit Editor, click on “using fonts in CSS” which is on the top left underneath the Selectors section. This will show a pop up of how to use the fonts in CSS. Copy the text from the third box, but only the part that comes after “font-family”.

E.g. if it has this:

h1 { font-family: futura-pt,sans-serif; }

Then you only need to copy this part:

futura-pt,sans-serif

With that copied, enter it into the Custom Title Font field.

3. Remember to publish your kit settings and wait a few moments but if you follow the steps your headings should change to your new Typekit settings.

Email Address

e.g. yourname@gmail.com

Twitter Username

e.g. rainerbird

Dribbble Username