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.
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.
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.
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.
All colors are easily changed from the customization dashboard, plus there are plenty of options to adapt the theme to your specific needs.
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.
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.
Since version 1.0.3 Supple offers a more seamless integration with the new SoundCloud audio embed HTML5 widget.
Responsive Spotify embeds that adapt to any screen size.
Supple includes an icon set covering the most ubiquitous social sites and services, including: Behance, Dribbble, Facebook, Flickr, Google+, Instagram, LastFM, LinkedIn, MySpace, Picasa, Pinterest, SoundCloud, Twitter, Vimeo, YouTube, and deviantART.
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.
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.
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.
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.
Includes support for comment count and comments on permalink pages.
Use your favorite Google Fonts for body text, footer text, navigation, portfolio thumbnails titles, and permalinks and footer headings. Basically all fonts are configurable.
If you feels your content gets a little too wide, you can sequentially disable media queries until your site is just the right width.
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.
At any time, you can enable or disable most of the theme features by simply toggling a checkbox on your dashboard.
Supple is compatible with all modern browsers and devices, including: Firefox, Chrome, Internet Explorer 8 and 9, Safari, iPhone, iPad and Android.
Login to your Tumblr account and head on to your dashboard (http://www.tumblr.com/dashboard)
Click on the Settings icon at the top and then on the tab of the Blog you want to install the theme on.
On the Blog settings page, click on the Customize button on the Theme field.
On the customization dashboard, click on Edit HTML.
Open the archive you downloaded from Themeforest and find the file named: pixelmoxie-supple-1.0.1.html (its located in the folder named theme). Do not open it on a web browser or you’ll see an ugly, garbled mess. Right-click (control-click on a Mac), and open the file on your favorite, no-frills text editor. Copy all the contents of the file and paste them on your dashboard sidebar.
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.
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.
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.
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.
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.
The following are the color variables used through the teme and their default values.
| Variable name | Description | Default value |
|---|---|---|
| Body Background | Main background color | #f5f5f5#f5f5f5 |
| Header Background | Header background color | #00c4f5#00c4f5 |
| Navigation Text | Text color of the navigation menu items | #f5f5f5#f5f5f5 |
| Navigation Text Hover | Text color of the navigation menu items on hover | #f5f5f5#f5f5f5 |
| Navigation Dropdown Text | Text color of the navigation dropdown menues | #707070#707070 |
| Navigation Dropdown Text Hover | Text color of the navigation dropdown menue items on hover | #f5f5f5#f5f5f5 |
| Navigation Dropdown Background | Background color of the navigation dropdowns | #f5f5f5#f5f5f5 |
| Navigation Dropdown Background Hover | Background color of the navigation dropdown items on hover | #00c4f5#00c4f5 |
| Navigation Tags Text | Text color of the navigation tags dropdown items | #f5f5f5#f5f5f5 |
| Navigation Tags Text Hover | Text color of the navigation tags dropdown items on hover | #f5f5f5#f5f5f5 |
| Navigation Tags Background | Background color of the navigation tags dropdown items | #97a0a8#97a0a8 |
| Navigation Tags Background Hover | Background color of the navigation tags dropdown items on hover | #00c4f5#00c4f5 |
| Mobile Navigation Text | Text color of the mobile navigation items | #707070#707070 |
| Mobile Navigation Text Hover | Text color of the mobile navigation items on hover | #a8a8a8#a8a8a8 |
| Mobile Navigation Background | Background color of the mobile navigation menu | #f5f5f5#f5f5f5 |
| Slider Accent | Color of the border underneath the slider | #00c4f5#00c4f5 |
| Slider Arrows | Background color of slider arrows | #00c4f5#00c4f5 |
| Slider Background | Background color of the slider (shows underneath semi-transparent slides) | #f5f5f5#f5f5f5 |
| Slider Controls | Color of the slider controls | #bbbbbb#bbbbbb |
| Slider Controls Active | Color of the slider controls on hover and active | #00c4f5#00c4f5 |
| Slider Heading Background | Generic background color for the slider headings | #f5f5f5#f5f5f5 |
| Slider Heading Background Text | Generic text color for the slider headings | #707070#707070 |
| Slider Subheading Background | Generic background color for the slider subheadings | #322850#322850 |
| Slider Subheading Text | Generic text color for the slider subheadings | #f5f5f5#f5f5f5 |
| Slide [1-5] Heading Text | Individual heading text color for slides one to five | #707070#707070 |
| Slide [1-5] Heading Background | Individual heading background color for slides one to five | #f5f5f5#f5f5f5 |
| Slide [1-5] Subheading Text | Individual subheading text color for slides one to five | #f5f5f5#f5f5f5 |
| Slide [1-5] Subheading Background | Individual subheading background color for slides one to five | #322850#322850 |
| Thumbnail Text | Text color for text based portfolio grid blocks | #f5f5f5#f5f5f5 |
| Thumbnail Title Background | Background color for portfolio thumbnail titles | #f5f5f5#f5f5f5 |
| Thumbnail Type Text | Color for text thumbnails | #ff6b4b#ff6b4b |
| Thumbnail Type Photo | Color for photo thumbnails | #00c4f5#00c4f5 |
| Thumbnail Type Quote | Color for quote thumbnails | #0054b4#0054b4 |
| Thumbnail Type Link | Color for link thumbnails | #ff78b2#ff78b2 |
| Thumbnail Type Chat | Color for chat thumbnails | #ff9933#ff9933 |
| Thumbnail Type Audio | Color for audio thumbnails | #ff4c4c#ff4c4c |
| Thumbnail Type Video | Color for video thumbnails | #af65d7#af65d7 |
| Thumbnail Type Answer | Color for answer thumbnails | #707070#707070 |
| Body Text | Main text color | #707070#707070 |
| Heading Text | Headings text color | #707070#707070 |
| Link Background | Link background color | #f5f5f5#f5f5f5 |
| Link Background Hover | Link background color on hover | #ccf5ff#ccf5ff |
| Link Border | Link bottom border color | #00c4f5#00c4f5 |
| Link Border Hover | Link bottom border color on hover | #00a3cc#00a3cc |
| Link Text | Link text color | #00c4f5#00c4f5 |
| Link Text Hover | Link text color on hover | #00a3cc#00a3cc |
| Perma Heading Background Override | Override title background color on permalink pages with this value | #97a0a8#97a0a8 |
| Perma Heading Text Override | Override title text color on permalink pages with this value | #f5f5f5#f5f5f5 |
| Pagination Link Text | Text color for pagination links | #f5f5f5#f5f5f5 |
| Pagination Link Background | Background color for pagination links | #97a0a8#97a0a8 |
| Pagination Link Text Hover | Text color for pagination links on hover | #f5f5f5#f5f5f5 |
| Pagination Link Background Hover | Background color for pagination links on hover | #00c4f5#00c4f5 |
| Pagination Alert Text | Text color for pagination alert box (no more post to load) | #707070#707070 |
| Pagination Alert Background | Background color for pagination alert box (no more post to load) | #d8e4f0#d8e4f0 |
| Footer Background | Footer background color | #4b4f53#4b4f53 |
| Footer Accent | Color for the border on top of the footer | #00c4f5#00c4f5 |
| Footer Arrow Background | Background color for twitter ticker arrows | #4b4f53#4b4f53 |
| Footer Arrow Background Hover | Background color for twitter ticker arrows on hover | #44474b#44474b |
| Footer Title | Color for the footer titles | #a2a3a4#a2a3a4 |
| Footer Text | Color for the footer widget text | #a2a3a4#a2a3a4 |
| Footer Emphasized Text | Color for the footer emphasized text | #898a8b#898a8b |
| Footer Link Text | Footer link text color | #00c4f5#00c4f5 |
| Footer Link Border | Footer link bottom border color | #00c4f5#00c4f5 |
| Footer Link Background | Footer link background color | #4b4f53#4b4f53 |
| Footer Link Text Hover | Footer link text color on hover | #0aceff#0aceff |
| Footer Link Border Hover | Footer link bottom border color on hover | #00a3cc#00a3cc |
| Footer Link Background Hover | Footer link background color on hover | #44474b#44474b |
| Footer Copyright Text | Text color for the footer copyright and credits | #707375#707375 |
| Footer Copyright Background | Background color for the footer copyright | #373b3e#373b3e |
| Footer Copyright Link | Text color for the footer copyright links | #707375#707375 |
| Footer Copyright Link Hover | Text color for the footer copyright links on hover | #a4a6a8#a4a6a8 |
| Selection Text | Text color for selection | #f5f5f5#f5f5f5 |
| Selection Background | Background color for selection | #97a0a8#97a0a8 |
You can sample some colors from the following color palette and use them for the site accents and post types:
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 Family | Open Sans |
| Body Font Weight | 400 |
| Body Bold Font Weight | 600 |
| Heading Font Family | Open Sans |
| Heading Font Weight | 300 |
| Heading Text Transform | none|capitalize|uppercase|lowercase |
| Navigation Font Family | Open Sans |
| Navigation Font Size | 14 |
| Navigation Font Weight | 700 |
| Navigation Tags Font Family | Open Sans |
| Navigation Tags Font Size | 14 |
| Navigation Tags Font Weight | 600 |
| Slider Heading Font Family | Dosis |
| Slider Heading Font Weight | 200 |
| Slider Heading Text Transform | none|capitalize|uppercase|lowercase |
| Slider Heading Base Font Size | 17 |
| Slider Subheading Font Family | |
| Slider Subheading Font Size | Dosis |
| Slider Subheading Font Weight | 200 |
| Slider Subheading Text Transform | none|capitalize|uppercase|lowercase |
| Slider Subheading Base Font Size | 14 |
| Thumbnail Text Font Family | Open Sans Condensed |
| Thumbnail Text Font Size | 23 |
| Thumbnail Text Font Weight | 300 |
| Thumbnail Title Font Family | Open Sans Condensed |
| Thumbnail Title Font Size | 23 |
| Thumbnail Title Font Weight | 300 |
| Thumbnail Title Text Transform | none|capitalize|uppercase|lowercase |
| Pagination Font Family | Open Sans |
| Pagination Font Size | 14 |
| Pagination Font Weight | 700 |
| Footer Heading Font Family | Open Sans Condensed |
| Footer Heading Font Size | 27 |
| Footer Heading Font Weight | 300 |
| Footer Heading Text Transform | none|capitalize|uppercase|lowercase |
| Footer Widget Font Family | Open Sans Condensed |
| Footer Widget Font Size | 19 |
| Footer Widget Font Weight | 300 |
| Footer Widget Bold Font Weight | 600 |
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.
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 Slider | Enable/disable the homepage slider |
| Enable Slider Autostart | If checked the slideshow will start automatically on page load |
| Enable Slider Centered Captions | Center slider captions vertically, otherwise they will align to the bottom |
| Enable Slider Control Nav | Enable/disable control nav below the slider images |
| Enable Slider Direction Nav | Enable/disable direction nav (right and left arrows) |
| Enable Slider Fullwidth | If enabled, the slider will span the full width of the browser window. If disabled, the slider will be boxed |
| Enable Slider Individual Colors | If enabled, each slide will use individual colors for headings and subheadings |
| Enable Slider Large Captions | Make your slides headings kinda huge |
| Enable Slider Loop | If enabled, the slider will restart from the first slide once it reaches the last one |
| Enable Slider Pause On Hover | Pauses the slideshow when hovering over the slider |
| Enable Slider Smooth Height | Animates 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] Heading | Text to display on each slide heading |
| Slide [1-5] Subheading | Text to display on each slide subheading |
| Slide [1-5] URL | If present, the slide will be wrapped on a hyperlink pointing to this URL |
| Slider Animation | fade|slide |
| Slider Animation Speed | Speed of the animation in milliseconds – default value: 600 |
| Slider Slideshow Speed | Delay between each slide in milliseconds – default value: 4000 |
| Slider Headings Separation | Gap between heading and subheading – default value: 1 |
| Slider Heading Base Font Size | Increase or decrease to control heading font size – default value: 17 |
| Slider Subheading Base Font Size | Increase or decrease to control subheading font size – default value: 14 |
| Slider Maximum Height | Limit 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:
Enable Slider Large Captions optionThe portfolio grid accepts the following posts types: text, photo, photoset, quote, chat, link, audio, video and answer.
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.
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.
h1 tags.Check the Enable Inset Thumbnail Titles to give the thumbnail titles an alternative, softer style.
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.
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.
| 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 |
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. |
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.
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
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.
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!
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.
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.
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.
The following variables affect some labels and titles used on the theme:
| Option Name | Default Value |
|---|---|
| Navigation Pages Dropdown Label | Pages |
| Navigation Tags Dropdown Label | Browse |
| Pagination Load More Label | Load More Posts |
| Pagination Loading Label | Loading, Please Wait |
| Pagination Loading End Label | You Have Reached The End |
| Pagination Next Post Label | Newer Post |
| Pagination Previous Post Label | Older Post |
| Pagination Next Posts Label | Newer Posts |
| Pagination Previous Posts Label | Older Posts |
| About Widget Title | About Me |
| Ask Widget Title | Ask Me Anything |
| Dribbble Widget Title | Dribbble Shots |
| Flickr Widget Title | Latest From Flickr |
| Instagram Widget Title | |
| Text Widget Title | Get In Touch |
| Twitter Widget Title | Latest From Twitter |
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.
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>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 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.
| Variable Name | What It Does |
|---|---|
| Portrait Link URL | If not left blank, your custom portrait image will be wrapped on a hyperlink pointing to this URL. |
| Disqus Shortname | The Disqus shortname for your site—required to enable comments |
| Google Analytics ID | Enter your Google Analytics ID to track your visitors. |
| AddThis Profile ID | Enter your AddThis Profile ID to track AddThis analytics |
| Display Photosets As Sliders | Check 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 |
| Enable Ajax Post Loading | Check to enable loading of the next set of projects using Ajax on the homepage, instead of the traditional pagination |
| Enable Banner Top Bar | Show a colored accent across the top when the slider isn’t visible |
| Enable Fixed Header | Enable/disable the fixed positioning for the site header |
| Enable Header Slider Overlap | Allow the header to sit over the banner slider |
| Enable Flickr Group Feed | Check this if your Flickr ID corresponds to a group pool instead of a individual user account |
| Enable Link Padding On Hover | Enable extra padding around links when hovered |
| Enable Logo Offset On Hover | Enable logo animation when hovered |
| Enable Navigation Home Button | Show/hide the Home button on top navigation |
| Enable Navigation Random Button | Show/hide the Random button on top navigation |
| Enable Navigation RSS Button | Show/hide the RSS button on top navigation |
| Enable Pages Dropdown | If enabled, links to pages on top navigation will be group in a dropdown menu, taking a lot less space |
| Enable Tags Dropdown | Show user defined tags dropdown menu on top navigation |
| Enable Tags Dropdown Block Style | If enabled, the tags dropdown menu will use the same styling as the pages dropdown menu |
| Enable Unclickable [post type] Blocks | Can 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. |
| Enable Footer Equal Column Widths | Make all footer columns the same width, when possible |
| Enable Footer Second Column | Show/hide the second footer column and its contents |
| Enable Footer Third Column | Show/hide the third footer column and its contents |
| Enable Footer [widget name] Widget | Enable/disable individual footer widgets |
| Enable Fullwidth Twitter Ticker | Check to make the Twitter ticker span the full width of the footer |
| Enable Footer Copyright | Show/hide footer copyright notice |
| Enable Footer Credits | Show/hide theme credits |
| Enable Footer Gradients | Show/hide gradients on footer (separation between second and third column) |
| Enable Footer Navigation | Display navigation links on footer mimicking the one on top (useful when fix position header is disabled) |
| Enable Social Links | Enable/disable social icons on site footer |
| Enable Image Feed Alt Styling | Alternative (prefered) styling for the image feeds (Flickr, Dribble and Instagram) |
| Enable Ask Widget Alt Location | Move Ask form to second column |
| Enable Dribbble Widget Alt Location | Move Dribbble Widget to second column |
| Enable Flickr Widget Alt Location | Move Flickr Widget to second column |
| Enable Instagram Widget Alt Location | Move Instagram Widget to second column |
| Enable Text Widget Alt Location | Move Text Widget to first column |
| Keep Ajax Complete Alert Visible | If enabled, the alert that displays once all posts are loaded on the homepage will remain visible. |
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.
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.
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/
These amazingly talented illustrators and designers were generous enough to let their work be displayed on the theme demos.
Jira Jiramakorn – http://www.behance.net/JiraJiramakorn
WARHEAD – http://www.behance.net/WARHEAD
Brian Luong – http://www.behance.net/brianluong
Ignacio Valicenti – http://www.behance.net/idvalicenti
Paul Nolan – http://www.behance.net/pnodesign