Supple

Supple Tumblr Theme Documentation v1.2

About this theme

Supple is a versatile portfolio theme for Tumblr by Pixel Moxie. Supple is aimed at creatives—designers, illustrators, photographers, video artists—and allows you to display your work in a grid-like fashion, flexibly enough so you can define the aspect ratio of your thumbnails: from landscape to portrait, including square and anything in between.

Supple supports all of Tumblr post types, including video from YouTube and Vimeo, SoundCloud and Spotify Embeds.

Theme Features

Retina Ready

Supple uses a combination of raster and webfont icons. The images and icons used on Supple user interface are neatly organized on standard and high resolution sprites and their PSD sources are included for you to modify if necessary.

Responsive Homepage Slider

Supple allows you to display a fullwidth slider with custom captions on the index page, above your portfolio content. Up to five slides are available, each with an optional heading and subheading. You can define default colors for all of the headings and subheadings or custom colors for each slide, center the headings vertically or align them to the bottom, and even swap their positions. You can optionally apply a see-through pattern on top of the slides—useful to disguise artifacts due to the images being upscaled.

Responsive Photosets

Photosets in Supple can be displayed using Tumblr standard layouts—which you define when you create or edit your post—or as a flexible image slider. No matter what you choose, your photosets will remain responsive and adapt to any screen size. When using the standard layout, images will open in a touch enabled lightbox, similar in style to Tumblr's native one.

Customizable Look And Feel

All colors are easily changed from the customization dashboard, plus there are plenty of options to adapt the theme to your specific needs.

Dynamically Load The Next Set Of Portfolio Projects

You can optionally replace the regular pagination links with a button that loads the next set of projects when clicked, without the need to refresh the page.

Instagram, Dribbble, Flickr and Twitter Feeds

Populate your footer with snapshots from your Flickr, Dribbble or Instagram accounts. Flickr accepts IDs for both individual accounts and group pools. Retrieve your tweets using your Twitter username or a custom query.

SoundCloud Embed Support

Since version 1.0.3 Supple offers a more seamless integration with the new SoundCloud audio embed HTML5 widget.

Spotify Embed Support

Responsive Spotify embeds that adapt to any screen size.

Social Icons

Supple includes an icon set covering the most ubiquitous social sites and services, including: Behance, Blogger, deviantART, Dribbble, Facebook, Flickr, Google+, Instagram, LastFM, LinkedIn, MySpace, Picasa, Pinterest, Quora, SoundCloud, Twitter, Vimeo, YouTube and 500px.

Customizable Footer

Supple allows you to display up to three columns on your site footer—the second and third can be disabled. The About Widget lets you upload a custom user portrait to replace your site avatar. The first column can optionally display a navigation section that mimics the one on top.

The Text Widget can be useful to display your contact or any other information—it shows on the middle column by default and it can be moved alternatively to the first column.

The third column can show the Flickr, Instagram and Dribbble Widgets, as well as the Ask Me Anything form. All of these can be enabled/disabled at will and moved independently to the second column.

The Twitter Widget cycles your tweets in ticker-like fashion and can span two or three columns.

Filter Posts By Tag

You can define up to ten custom post tags on Tumblr customization dashboard and then enable the option to display the tags dropdown on the navigation bar. Then simply tag your posts accordingly to allow your visitors to filter your projects by type.

Supports For All Post Types

Although Supple excels at displaying images and video, all Tumblr post types are supported, including: text, photo/photosets, quote, link, chat, audio, video, and answer.

Support For User Defined Pages

Create your custom static pages in the dashboard and add a link to them so they show up on the Navigate section on the blog footer. Supple offers support for Ask and Submit pages as well.

Disqus Commenting System

Includes support for comment count and comments on permalink pages.

Google Fonts

Use your favorite Google Fonts for body text, footer text, navigation, portfolio thumbnails titles, and permalinks and footer headings. Basically all fonts are configurable.

Optional Media Queries

If you feels your content gets a little too wide, you can sequentially disable media queries until your site is just the right width.

Custom Image Logo

Upload your own standard and high resolution logo images. Use the included PSD template if you need help placing the logo in the allocated space.

Portfolio Grid “Like” and “Reblog” Buttons

Since version 1.1, you can individually enable “like” and “reblog” buttons to be shown on the portfolio grid thumbnails.

Features on demand

At any time, you can enable or disable most of the theme features by simply toggling a checkbox on your dashboard.

Compatibility

Supple is compatible with all modern browsers and devices, including: Firefox, Chrome, Internet Explorer 8 and 9, Safari, iPhone, iPad and Android.

Installation

Login to your Tumblr account and head on to your dashboard (http://www.tumblr.com/dashboard)

dashboard

Click on the Settings icon at the top and then on the tab of the Blog you want to install the theme on.

settings

On the Blog settings page, click on the Customize button on the Theme field.

customize

On the customization dashboard, click on Edit HTML.

edit html

Open the archive you downloaded from Themeforest and find one of the following files: pixelmoxie-supple-1.2.0.html or pixelmoxie-supple-1.2.0.txt. They are located in the folder named theme, and the only difference between them is the file extension.

Right-click (control-click on a Mac), and open either file on your favorite no-frills text editor. Copy the file content and paste it on your dashboard sidebar replacing all of the original code.

Important: If using TextEdit on a Mac, you want to check Ignore rich text commands in HTML files on the preferences, or TextEdit will mess up your HTML source. Follow the instructions listed here if having trouble. Or you could also give TextWrangler a try. TextWrangler is a no-frills, very capable text editor for the Macintosh, and it’s been recommended by some of Supple existing users.

paste html

Click on Update Preview (CTRL+S). Your blog should start looking like Supple. If the preview doesn’t look quite right, it’s because Tumblr hasn’t recognized and applied the theme’s variables yet. It’ll all be fine after you save your changes and refresh your browser window.

Click on the Appearance button and you’ll be taken to the main sidebar. Under the Advanced section, make sure to uncheck “Use optimized mobile layout” if you don’t want to display Tumblr iphone theme on mobile devices.

uncheck use optimized mobile layout

Save your changes by clicking the Save button and then refresh your browser window (F5 or CMD + F5).

Congratulations! Your Tumblr theme is now installed.

Customization

Jump To:

Now it’s time to personalize your portfolio! Below is a screen grab of the available theme options and some notes and hints about customization.

theme options

Your Custom Logo

The first step on making your Tumblr portfolio unique should be to brand it with your own logo. You must upload your logo as a PNG image with a transparent background, both in standard and high resolution versions. Your logo should be 72 pixels tall and no whitespace or transparent pixels should be left on the sides.

Make use of the included PSD template to place your logo correctly—it should be vertically centered inside the 72 pixel tall space. If yours is a typographic logo, try to vertically center the text x-height for best results, as shown in the image. Trim any empty space to the right or left and export your logo as a transparent PNG, then do the same for the high resolution version. If your logo is entirely font or vector based, you can save the lowres file under another filename (append @2x at the end), then just scale it to 200% and export your image. From Photoshop, use the Save For Web command. You can further compress your PNG images using a service like TinyPNG to improve page load times.

The font used on the included PSD is called Mission Script by Lost Type and you can download it here.

Color Variables

The following are the color variables used through the teme and their default values.

Variable nameDescriptionDefault value
Body BackgroundMain background color#f5f5f5#f5f5f5
Body TextMain text color#707070#707070
Disqus AccentHyperlinks on the Disqus comment section will use this color#00c4f5#00c4f5
Footer AccentColor for the border on top of the footer#00c4f5#00c4f5
Footer Arrow BackgroundBackground color for twitter ticker arrows#4b4f53#4b4f53
Footer Arrow Background HoverBackground color for twitter ticker arrows on hover#44474b#44474b
Footer BackgroundFooter background color#4b4f53#4b4f53
Footer Copyright BackgroundBackground color for the footer copyright#373b3e#373b3e
Footer Copyright LinkText color for the footer copyright links#707375#707375
Footer Copyright Link HoverText color for the footer copyright links on hover#a4a6a8#a4a6a8
Footer Copyright TextText color for the footer copyright and credits#707375#707375
Footer Emphasized TextColor for the footer emphasized text#898a8b#898a8b
Footer Link BackgroundFooter link background color#4b4f53#4b4f53
Footer Link Background HoverFooter link background color on hover#44474b#44474b
Footer Link BorderFooter link bottom border color#00c4f5#00c4f5
Footer Link Border HoverFooter link bottom border color on hover#00a3cc#00a3cc
Footer Link TextFooter link text color#00c4f5#00c4f5
Footer Link Text HoverFooter link text color on hover#0aceff#0aceff
Footer TextColor for the footer widget text#a2a3a4#a2a3a4
Footer TitleColor for the footer titles#a2a3a4#a2a3a4
Header BackgroundHeader background color#00c4f5#00c4f5
Heading TextHeadings text color#707070#707070
Link BackgroundLink background color#f5f5f5#f5f5f5
Link Background HoverLink background color on hover#ccf5ff#ccf5ff
Link BorderLink bottom border color#00c4f5#00c4f5
Link Border HoverLink bottom border color on hover#00a3cc#00a3cc
Link TextLink text color#00c4f5#00c4f5
Link Text HoverLink text color on hover#00a3cc#00a3cc
Mobile Navigation BackgroundBackground color of the mobile navigation menu#f5f5f5#f5f5f5
Mobile Navigation TextText color of the mobile navigation items#707070#707070
Mobile Navigation Text HoverText color of the mobile navigation items on hover#a8a8a8#a8a8a8
Navigation Dropdown BackgroundBackground color of the navigation dropdowns#f5f5f5#f5f5f5
Navigation Dropdown Background HoverBackground color of the navigation dropdown items on hover#00c4f5#00c4f5
Navigation Dropdown TextText color of the navigation dropdown menues#707070#707070
Navigation Dropdown Text HoverText color of the navigation dropdown menue items on hover#f5f5f5#f5f5f5
Navigation Tags BackgroundBackground color of the navigation tags dropdown items#97a0a8#97a0a8
Navigation Tags Background HoverBackground color of the navigation tags dropdown items on hover#00c4f5#00c4f5
Navigation Tags TextText color of the navigation tags dropdown items#f5f5f5#f5f5f5
Navigation Tags Text HoverText color of the navigation tags dropdown items on hover#f5f5f5#f5f5f5
Navigation TextText color of the navigation menu items#f5f5f5#f5f5f5
Navigation Text HoverText color of the navigation menu items on hover#f5f5f5#f5f5f5
Pagination Alert BackgroundBackground color for pagination alert box (no more post to load)#d8e4f0#d8e4f0
Pagination Alert TextText color for pagination alert box (no more post to load)#707070#707070
Pagination Link BackgroundBackground color for pagination links#97a0a8#97a0a8
Pagination Link Background HoverBackground color for pagination links on hover#00c4f5#00c4f5
Pagination Link TextText color for pagination links#f5f5f5#f5f5f5
Pagination Link Text HoverText color for pagination links on hover#f5f5f5#f5f5f5
Perma Heading Background OverrideOverride title background color on permalink pages with this value#97a0a8#97a0a8
Perma Heading Text OverrideOverride title text color on permalink pages with this value#f5f5f5#f5f5f5
Selection BackgroundBackground color for selection#97a0a8#97a0a8
Selection TextText color for selection#f5f5f5#f5f5f5
Slide [1-5] Heading BackgroundIndividual heading background color for slides one to five#f5f5f5#f5f5f5
Slide [1-5] Heading TextIndividual heading text color for slides one to five#707070#707070
Slide [1-5] Subheading BackgroundIndividual subheading background color for slides one to five#322850#322850
Slide [1-5] Subheading TextIndividual subheading text color for slides one to five#f5f5f5#f5f5f5
Slider AccentColor of the border underneath the slider#00c4f5#00c4f5
Slider ArrowsBackground color of slider arrows#00c4f5#00c4f5
Slider BackgroundBackground color of the slider (shows underneath semi-transparent slides)#f5f5f5#f5f5f5
Slider Controls ActiveColor of the slider controls on hover and active#00c4f5#00c4f5
Slider ControlsColor of the slider controls#bbbbbb#bbbbbb
Slider Heading Background TextGeneric text color for the slider headings#707070#707070
Slider Heading BackgroundGeneric background color for the slider headings#f5f5f5#f5f5f5
Slider Subheading BackgroundGeneric background color for the slider subheadings#322850#322850
Slider Subheading TextGeneric text color for the slider subheadings#f5f5f5#f5f5f5
Thumbnail TextText color for text based portfolio grid blocks#f5f5f5#f5f5f5
Thumbnail Title BackgroundBackground color for portfolio thumbnail titles#f5f5f5#f5f5f5
Thumbnail Type AnswerColor for answer thumbnails#707070#707070
Thumbnail Type AudioColor for audio thumbnails#ff4c4c#ff4c4c
Thumbnail Type ChatColor for chat thumbnails#ff9933#ff9933
Thumbnail Type LinkColor for link thumbnails#ff78b2#ff78b2
Thumbnail Type PhotoColor for photo thumbnails#00c4f5#00c4f5
Thumbnail Type QuoteColor for quote thumbnails#0054b4#0054b4
Thumbnail Type TextColor for text thumbnails#ff6b4b#ff6b4b
Thumbnail Type VideoColor for video thumbnails#af65d7#af65d7

You can sample some colors from the following color palette and use them for the site accents and post types:

Google Web Fonts

You can choose from Google’s vast library of fonts for most of this theme elements—simply enter the font family name and weight into the corresponding text fields. The following fonts fields can be edited.

Body Font FamilyOpen Sans
Body Bold Font Weight600
Body Font Weight400
Footer Heading Font FamilyOpen Sans Condensed
Footer Heading Font Size27
Footer Heading Font Weight300
Footer Heading Text Transformnone|capitalize|uppercase|lowercase
Footer Widget Bold Font Weight600
Footer Widget Font FamilyOpen Sans Condensed
Footer Widget Font Size19
Footer Widget Font Weight300
Heading Font FamilyOpen Sans
Heading Font Weight300
Heading Text Transformnone|capitalize|uppercase|lowercase
Navigation Font FamilyOpen Sans
Navigation Font Size14
Navigation Font Weight700
Navigation Tags Font FamilyOpen Sans
Navigation Tags Font Size14
Navigation Tags Font Weight600
Pagination Font FamilyOpen Sans
Pagination Font Size14
Pagination Font Weight700
Slider Heading Base Font Size17
Slider Heading Font FamilyDosis
Slider Heading Font Weight200
Slider Heading Text Transformnone|capitalize|uppercase|lowercase
Slider Subheading Base Font Size14
Slider Subheading Font Family
Slider Subheading Font SizeDosis
Slider Subheading Font Weight200
Slider Subheading Text Transformnone|capitalize|uppercase|lowercase
Thumbnail Text Font FamilyOpen Sans Condensed
Thumbnail Text Font Size23
Thumbnail Text Font Weight300
Thumbnail Title Font FamilyOpen Sans Condensed
Thumbnail Title Font Size23
Thumbnail Title Font Weight300
Thumbnail Title Text Transformnone|capitalize|uppercase|lowercase

In the example below, the font family name would be Dosis, and its weight 600.

Head over http://www.google.com/webfonts to discover more fonts. This theme uses Open Sans, Open Sans Condensed and Dosis out of the box, in various weights.

For footer headings and thumbnail titles, and for the slider headings as well, narrower fonts work best and let you to fit more characters into each single line if you need to

Here's a selection of nicely designed Google Web Fonts:

The variables Slider Heading Base Font Size and Slider Subheading Base Font Size control the size of the slider headings text. You can decrease them to make the text smaller.

Specifying script subsets

If you need support for characters not available on the default Latin script subset that loads by default, since version 1.2, Supple lets you specify a custom script subset to load.

Some of the fonts in the Google Font Directory support multiple scripts (like Latin and Cyrillic for example). It’s fundamental that you pick a font that includes the characters you need for the text in your website to display correctly, then specify the correct subset using the select box labeled Google Fonts Subset. The available sets are:

Latin (default)
Latin extended
Cyrillic
Cyrillic extended
Greek
Greek extended
Khmer
Vietnamese

Keep in mind that the chosen subset will be loaded for every font family from the Google Font directory used on your website.

Using the Homepage Slider

You can display up to five slides on the homepage slider. The following are the slider related variables and their accepted/default values.

Checkboxes

Enable SliderEnable/disable the homepage slider
Enable Slider AutostartIf checked the slideshow will start automatically on page load
Enable Slider Centered CaptionsCenter slider captions vertically, otherwise they will align to the bottom
Enable Slider Control NavEnable/disable control nav below the slider images
Enable Slider Direction NavEnable/disable direction nav (right and left arrows)
Enable Slider FullwidthIf enabled, the slider will span the full width of the browser window. If disabled, the slider will be boxed
Enable Slider Individual ColorsIf enabled, each slide will use individual colors for headings and subheadings
Enable Slider Large CaptionsMake your slides headings kinda huge
Enable Slider LoopIf enabled, the slider will restart from the first slide once it reaches the last one
Enable Slider Pause On HoverPauses the slideshow when hovering over the slider
Enable Slider Smooth HeightAnimates the slider height when transitioning between slides of different height

Images

Slide [1-5]Upload or clear the image for each individual slide

Strings

Slide [1-5] HeadingText to display on each slide heading
Slide [1-5] SubheadingText to display on each slide subheading
Slide [1-5] URLIf present, the slide will be wrapped on a hyperlink pointing to this URL
Slider Animationfade|slide
Slider Animation SpeedSpeed of the animation in milliseconds – default value: 600
Slider Slideshow SpeedDelay between each slide in milliseconds – default value: 4000
Slider Headings SeparationGap between heading and subheading – default value: 1
Slider Heading Base Font SizeIncrease or decrease to control heading font size – default value: 17
Slider Subheading Base Font SizeIncrease or decrease to control subheading font size – default value: 14
Slider Maximum HeightLimit the slider height when displayed on large screen resolutions – for example: 400

Note: slides headings and subheadings span only a single line. If you need to fit more text you can do one of the following:

The Homepage Portfolio Grid

The portfolio grid accepts the following posts types: text, photo, photoset, quote, chat, link, audio, video and answer.

Setting the thumbnails aspect ratio and alignment

With Supple you’re not limited to displaying landscape thumbnails on your portfolio grid, in fact, you’re not limited to any fixed aspect ratio at all.

Use the Thumbnail Height Percentage variable to set the height of the thumbnails as a percentage of the thumbnail width. For example, enter “75” for landscape, “100” for square, or “135” for portrait shaped thumbnails.

The variable Thumbnail Vertical Align controls how taller images are aligned vertically inside the thumbnail available space. Acceptable values are “top”, “middle” or “bottom”.

The option Enable Grid Fit Extra Column allows you to fit an extra column per row per layout—this can be useful when displaying portrait oriented thumbnails so they don’t take that much space.

Faking the Titles for the Photo, Photoset, Audio and Video Post Types

These post types do not have the option for entering a title when you create them. To display a post title on their thumbnail hover state, use the Caption and Description fields, respectively. You can do that by editing the HTML source and wrapping the first line of text with h1 tags, or even easier, select the first short paragraph and make it bold. If you fail to do this for Audio post types, the title will be taken from the audio file's ID3 info if it contains a track name.

Make the first short paragraph bold to a make “fake” title for a photo or photoset post.
Optionally, you can edit the HTML Source, and wrap the first line with h1 tags.

Using Inset Titles

Check the Enable Inset Thumbnail Titles to give the thumbnail titles an alternative, softer style.

Landscape oriented thumbnails with inset titles disabled.
Portrait oriented thumbnails with inset titles enabled.

Audio and Video Posts Poster Images

The audio post types will use the audio file's ID3 info album art, if it has one. Make sure to upload a cover image if the mp3 file doesn’t have one associated it with it.

For Vimeo and YouTube video embeds, Supple will grab the original video thumbnails using YouTube and Vimeo APIs. If you wish to display a different image as your video thumbnail, you can do the following: place your cursor after the bolded first line (your video post fake title), and click on the Insert/edit image icon. You can then enter the URL of the image you wish to use.

If you wish to host the image on Tumblr, you can always create an image post and set it to private so it doesn’t show on the portfolio, then grab the image URL from that post. Supple will use the first image it encounters on the description of a Video post if you insert one, and hide it on the permalink page for that post.

Inserting an image right after the “fake title” for a Spotify embed. This image will be used as the post thumbnail. The same can be done for video posts to replace the automatically generated video poster.

Important: If you’re displaying video files from your hard drive using Tumblr’s own video player, this step is critical. You need to specify a poster image for the video using the method outlined above, otherwise your thumbnail won’t display an image at all and you will experience slow load times when viewing the homepage.

SoundCloud and Spotify Embeds

Besides self-hosted mp3s, Supple offers support for displaying SoundCloud and Spotify audio embeds. Use the same method as with video posts (insert an external image below the “fake” title) to display a cover image on the portfolio grid.

“Like” and “Reblog” Buttons

Check the Enable Thumbs Like Buttons and Enable Thumbs Reblog Buttons to individually enable the “Like” and “Reblog” buttons on the portfolio grid. On desktop screens, the buttons will be visible when hovering over the portfolio thumbnails, while on mobile devices, they will be visible at all times. You can also set the icons opacity and have options to use “white”, “grey” or “black” buttons.

Portfolio Grid Related Variables

Enable Grid Blur Effect On Hover Enable blur effect on hover—for webkit browsers only. This is disabled by default as the animations may become sluggish on underpowered systems
Enable Grid Fit Extra Column Fit an extra column per row per layout
Enable Grid Text Overflow Enable text to extend outside of the thumbnail to the right for text based blocks.
Thumbnail Height Percentage Defines the thumbnail height as a percentage of its width.
Thumbnail Vertical Align Align the image vertically inside the thumbnail (top|middle|bottom)
Thumbnail Title Opacity Opacity of the thumbnail title (0-1)
Thumbnail Title Padding Padding inside the thumbnail title (5)
Thumbnail Inset Title Margin When using inset titles, margin around the thumbnail title
Thumbnail Inset Title Opacity Opacity of the thumbnail inset titles (0-1)
Thumbnail Inset Title Radii Border radius of the thumbnail inset titles (0-5)
Thumbnail Overlay Opacity Opacity of the solid color overlay (0.9)
Thumbnail Post Type Icon Opacity Opacity of the post type icon for text based blocks
Thumbnail Image Blur Radii Intensity of the blur effect for thumbnail images
Thumbnail Text Blur Radii Intensity of the blur effect for text based blocks
Enable Thumbs Like ButtonsEnable or disable the “like” buttons for the portfolio grid thumbnails.
Enable Thumbs Reblog ButtonsEnable or disable the “reblog” buttons for the portfolio grid thumbnails.
Tumblr Button OpacityOpacity of the “like” and “reblog” buttons icons (somewhere between 0 and 1).
Use Tumblr Black ButtonsEnable “like” and “reblog” black buttons. Overrides default white buttons.
Use Tumblr Grey ButtonsEnable “like” and “reblog” grey buttons. Overrides both black and white buttons.

Permalink Pages

The following are the options related to permalink pages (project details)

Enable Permalink Blocky Headings Show permalink title as a big block on top of the post if enabled—this applies to Text posts only
Enable Permalink Comments Turn Disqus comments on and off
Enable Permalink Date Show/hide the publication date of the post
Enable Permalink Notes Show/hide post notes
Enable Permalink Sharing Show/hide shares count and AddThis popup
Enable Permalink Tags Show/hide posts tags
Override Perma Headings Background Color If this option is unchecked, the colored blocks on top of permalink pages (for text, quote, chat and answer posts) will share the same color settings with the blocks the portfolio grid. Check this option to override the colors with the values from the options Perma Heading Background Override and Perma Heading Text Override.
Prevent Image UpscalingPrevent single and photoset images from being enlarged beyond their natural size.

About Photosets Permalink Pages

Photosets are display using Tumblr traditional photoset layout—albeit totally responsive—by default. You can optionally display your photosets using an image slider similar to the homepage slider. To do that, just check the option Display Photosets As Sliders, but be careful: images should be around 1140 pixels wide so they’re not blown up and look pixelated. The permalink slider inherits it behaviour from the options set for the homepage slider, but doesn’t feature the navigation arrows. It will be smoother if the images are all the same height and have a landscape orientation.

Disabling Media Queries

We think you’ll seldom need to do this, but if your content gets too wide, you can disable media queries as you see fit, making your site narrower. Media queries should be disabled sequentially and in the following order:

Enable 1440px Media Query
Enable 1280px Media Query
Enable 1024px Media Query
Enable 768px Media Query
Enable 480px Media Query

Filter Posts By Tag

To allow visitors to filter your portfolio post using the dropdown menu on the navigation bar, simple specify your customs tags (fields labeled Custom Tag 1-10) and then tag your posts accordingly.

Twitter: Latest Tweets

Since version 1.0.3, Supple has changed the way tweets are displayed on your site. In order to be compatible with the new Twitter v1.1 API, Supple uses Tumblr own “tweets.js” script. This means that now you need to take different steps in order to display your latest tweets, but the process is still pretty straightforward.

Instead of entering your Twitter username like before, now you need to enable Twitter integration in your Tumblr preferences. To do that, go to your dashboard and click on the gear icon at the top, then select the blog on which you want to show your tweets. Scroll down the settings page until you get to the Twitter sign-in option—the process is quite self-explanatory.

In order to control how many tweets are being cycled on the ticker, head to the customization sidebar and look for the Twitter Count option. That’s pretty much it!

Flickr Feed

Use this tool to find your Flickr user or group id. Just enter the address of your photostream or group pool and it’ll find the number for you.

Enter your Flickr ID and then enable the Flickr widget. You can use an individual or group pool ID, but if pooling from a group, you need to enable the option Enable Flickr Group Feed to switch to the right API. Set the number of images to retrieve in the Flickr Count field.

Dribbble Shots

Displaying shots from your Dribbble account is just as easy. Make sure the Dribble widget is enabled and enter you Dribbble Username. Edit the fields Dribbble Count and Dribbble Widget Title to control the numbers of shots to display and the text shown above them.

Instagram Shots

Displaying your Instagram feed requires an extra piece of info, but thanks to this tool this is quite easy as well. Besides your Instagram User ID, you’ll need an Instagram Access Token. Go to http://projects.craftedpixelz.co.uk/jqinstapics/, scroll down and press the Retrieve my details bro! button to get your details and complete the fields with the corresponding info. Edit the Instagram Count and Instagram Widget Title if needed.

Labels and Titles

The following variables affect some labels and titles used on the theme:

Option NameDefault Value
Navigation Pages Dropdown LabelPages
Navigation Tags Dropdown LabelBrowse
Pagination Load More LabelLoad More Posts
Pagination Loading LabelLoading, Please Wait
Pagination Loading End LabelYou Have Reached The End
Pagination Next Post LabelNewer Post
Pagination Previous Post LabelOlder Post
Pagination Next Posts LabelNewer Posts
Pagination Previous Posts LabelOlder Posts
About Widget TitleAbout Me
Ask Widget TitleAsk Me Anything
Dribbble Widget TitleDribbble Shots
Flickr Widget TitleLatest From Flickr
Instagram Widget TitleInstagram
Text Widget TitleGet In Touch
Twitter Widget TitleLatest From Twitter

About Widget

The About Widget—displayed on the footer first column—will show your site description, along with your site avatar, or your custom portrait image, if you choose to upload one.

Text Widget

The Text Widget—displayed on the second column by default—can be useful to include your contact information or any other info. Use the template below to display your data as shown in the demo, then copy that code and paste it on the Text Widget Description field.

<em>ADDRESS:</em> 221 Wall Street, <br> 
New York, United States <br> 
<em>TEL:</em> +12 346-678-90 <br> 
<em>FAX:</em> +12 346-678-90 <br> 
<em>EMAIL:</em> <a href="mailto:johndoe@gmail.com">johndoe@gmail.com</a>

Ask Me Anything Widget

You can choose to show the Ask form on your footer—on the third column by default. If you allow users to ask you questions and disable this box, a link to the ask page will be shown on the Pages navigation dropdown. You can include an additional message below the form, copy and paste the text into the Ask Widget Description field.

Social Sites and Services

Social icons will be displayed on the site footer for the following sites/services, if not left blank.

URL [social service name]

Behance, Dribbble, Facebook, Flickr, Google+, Instagram, LastFM, LinkedIn, MySpace, Picasa, Pinterest, SoundCloud, Twitter, Vimeo, YouTube, and deviantART.

Other Options

Variable NameWhat It Does
AddThis Profile IDEnter your AddThis Profile ID to track AddThis analytics
Display Photosets As SlidersCheck this to display use an image slider on your photosets permalinks, otherwise Tumblr default layouts—as defined when you create the set—will be used
Disqus ShortnameThe Disqus shortname for your site—required to enable comments
Enable Ajax Post LoadingCheck to enable loading of the next set of projects using Ajax on the homepage, instead of the traditional pagination
Enable Ask Widget Alt LocationMove Ask form to second column
Enable Banner Top BarShow a colored accent across the top when the slider isn’t visible
Enable Dribbble Widget Alt LocationMove Dribbble Widget to second column
Enable Fixed HeaderEnable/disable the fixed positioning for the site header
Enable Flickr Group FeedCheck this if your Flickr ID corresponds to a group pool instead of a individual user account
Enable Flickr Widget Alt LocationMove Flickr Widget to second column
Enable Footer [widget name] WidgetEnable/disable individual footer widgets
Enable Footer CopyrightShow/hide footer copyright notice
Enable Footer CreditsShow/hide theme credits
Enable Footer Equal Column WidthsMake all footer columns the same width, when possible
Enable Footer GradientsShow/hide gradients on footer (separation between second and third column)
Enable Footer NavigationDisplay navigation links on footer mimicking the one on top (useful when fix position header is disabled)
Enable Footer Second ColumnShow/hide the second footer column and its contents
Enable Footer Third ColumnShow/hide the third footer column and its contents
Enable Fullwidth Twitter TickerCheck to make the Twitter ticker span the full width of the footer
Enable Header GradientShow or hide the gradient behind the logo
Enable Header Slider OverlapAllow the header to sit over the banner slider
Enable Image Feed Alt StylingAlternative (prefered) styling for the image feeds (Flickr, Dribble and Instagram)
Enable Instagram Widget Alt LocationMove Instagram Widget to second column
Enable Link Padding On HoverEnable extra padding around links when hovered
Enable Logo Offset On HoverEnable logo animation when hovered
Enable Navigation Home ButtonShow/hide the Home button on top navigation
Enable Navigation Random ButtonShow/hide the Random button on top navigation
Enable Navigation RSS ButtonShow/hide the RSS button on top navigation
Enable Pages DropdownIf enabled, links to pages on top navigation will be group in a dropdown menu, taking a lot less space
Enable Social GradientShow or hide the gradient at the base of the social media icons
Enable Social LinksEnable/disable social icons on site footer
Enable Tags Dropdown Block StyleIf enabled, the tags dropdown menu will use the same styling as the pages dropdown menu
Enable Tags DropdownShow user defined tags dropdown menu on top navigation
Enable Text Widget Alt LocationMove Text Widget to first column
Enable Tumblr Controls Alt PositionIf this is check, the Tumblr controls iframe will be positioned below the header/navigation/searchbox on certain screen sizes and devices.
Enable Unclickable [post type] BlocksCan be enabled/disabled for individual post types. If this option is disabled, blocks on the homepage grid will act as a big hyperlink to the post details page. If enabled, text will be selectable and only the post type icon will act as a hyperlink.
Google Analytics IDEnter your Google Analytics ID to track your visitors.
Keep Ajax Complete Alert VisibleIf enabled, the alert that displays once all posts are loaded on the homepage will remain visible.
Portrait Link URLIf not left blank, your custom portrait image will be wrapped on a hyperlink pointing to this URL.

Included PSD Files

Use the “logo.psd” and “logo@2x.psd” to help you place your custom logo (standard and high resolution) on the allocated space.

We also included the “sprites.psd” and “sprites@2x.psd” files on the package in case you wish to modify the icons/images used on the user interface.

Support

Thank you for purchasing this theme, your support is more than appreciated!

If after reading this guide you still need help setting up your theme, or if you find a bug that needs to be ironed out, you’re welcome to contact us through our Themeforest profile page.

Credits & Thanks

The following resources have been used in the making of this theme:

Sass – http://sass-lang.com/

Compass – http://compass-style.org/

normalize.css – http://necolas.github.com/normalize.css/

Frameless Grid – http://framelessgrid.com/

Open Sans – http://www.google.com/webfonts/specimen/Open+Sans

Open Sans Condensed – http://www.google.com/webfonts/specimen/Open+Sans+Condensed

Dosis – http://www.google.com/webfonts/specimen/Dosis

IcoMoon App – http://icomoon.io/app/

Iconic – http://somerandomdude.com/work/iconic/

FlexSlider 2 – http://www.woothemes.com/flexslider/

jQuery Cycle Plugin – http://jquery.malsup.com/cycle/

Tweet! – http://tweet.seaofclouds.com/

Jflickrfeed – http://www.gethifi.com/blog/a-jquery-flickr-feed-plugin

Jribbble – http://lab.tylergaw.com/jribbble/

jQInstaPics – http://projects.craftedpixelz.co.uk/jqinstapics/

FitVids – http://fitvidsjs.com/

HiSRC – https://github.com/teleject/hisrc

ImagesLoaded – https://github.com/desandro/imagesloaded

Superfish – http://users.tpg.com.au/j_birch/plugins/superfish/

Images used in the demos

These amazingly talented illustrators and designers were generous enough to let their work be displayed on the theme demos.

Demo 1 – view it here

Jira Jiramakorn – http://www.behance.net/JiraJiramakorn

WARHEAD – http://www.behance.net/WARHEAD

Demo 2 – view it here

Brian Luong – http://www.behance.net/brianluong

Ignacio Valicenti – http://www.behance.net/idvalicenti

Paul Nolan – http://www.behance.net/pnodesign