Horizontalism is a portfolio Tumblr theme aimed for any creative professional. It has quite a unique look as it makes extensive use of the horizontal scrolling. It’s quite versatile and packed with options.
HOMEPAGE/TAG LIST WITH THUMBNAILS
Unlike most Tumblr themes, the Horizontalism theme shows thumbnails of all posts types with links to the individual pages. The thumbnails are available in the homepage and tag pages (and also when searching).
TWO HOMEPAGE LAYOUT OPTIONS
You can now choose between the original horizontal scrolling layout and the new grid layout.
ALL POST TYPES
All posts types are supported: photo / photoset / panorama, audio, video, text, quote, chat, link, reblogs and answer.
Search will appear on the header.
All colors are editable using the Customize panel.
You can choose your a set of 3 Google WebFont to use in your site.
All text in the theme uses Tumblr localization tags, so you can have your site in your favorite language.
LOGO AS AN IMAGE
You can have your logo as an image or just text. You can use both simultaneously as well.
You can have pages as main navigation or tags as main navigation. The main will go on top and the other one under it.
PAGES AND ASK FORM SUPPORTED
Create all pages that you need using this theme. Ask is also supported. Links will appear on the top.
CUSTOMIZABLE NAVIGATION (BASED ON TAGS)
You can setup up to 9 tags to use as navigation (main or secondary). They can be customized using the Customize Panel.
GOOGLE ANALYTICS READY
Just add your analytics code and you’re set.
FACEBOOK / TWITTER / GOOGLE+ / PINTEREST SHARE OPTIMIZED
Share any page using the share plugin that is installed. Any of these options can be turned off.
NEW LIKE / REBLOG BUTTONS
You can now click like or reblog from any article page.
SOCIAL NETWORK LINKS SUPPORTED
Behance, Creative Commons, Dribbble, Facebook, Flickr, Google, Instagram, LinkedIn, Picasa, Pinterest, Tumblr and Twitter are supported. Just enter the URL for each of them. The links will appear on the footer.
Tags added by the user in the post tags field that have an effect in the appearance of the page.
RESPONSIVE WEB DESIGN
Works in several platforms, the screen adaptes to the size of the iPhone, iPad, Android devices and also your desktop computer.
To install the theme, please follow these steps:
- Open the .txt or .html file using a text application (the first line of the file should start with <html …)
- Select all text and copy
- Login to your Tumblr account
- Go to Settings (gear wheel icon on the top)
- Select the Tumblr site on the left panel
- Click the Customize button (on the right panel)
- Click Edit HTML (left panel)
- Then Select All and Paste the new code
- Click Update Preview
- Click Save
- Refresh the browser
Note: Please make sure that you are opening the text files as simple text and not rich text.
NOTE: Applications to use
To install this theme you need to use an application that opens html files without parsing theme (try to interpret the code). You can use applications such as Coda, Dreamweaver, Espresso or other, but if you don’t have one, you can check these free ones (available for most operation systems):
You can customize the theme by accessing your Customize panel:
After making the copy and paste and save, return to Appearance and refresh the browser and you’ll see this (with your content):
You can have a text logo and/or an image logo. The text logo will assume the name of your Tumblr blog. If you prefer to use an image, go to the Customize Panel > Logo and click Upload.
Then choose an image from your computer. I recommend you use a transparent PNG file. Use only real sized images.
Don’t forget to hit save before leaving the page.
Set up a tagline
This theme allows you to add a tagline. Just go to the text options and write your tagline in the ‘Tagline’ field.
Setting up the pages navigation
You can add Pages to your site (and these can also be just link to other sites). Pages navigation will appear on the top most bar of your site. To rearrange their order you need to use the Tumblr pages list, by clicking and dragging the small handles on the left.
Set up the tags navigation
Use the Customize Panel > Appearance then Nav Tag [1-9] to set up your main navigation. Then apply the same tags to your posts so that the navigation works well. You need to set at least one item.
Setup the primary navigation
You can choose either PAGES or TAGS as the primary navigation (the one on the top). The other one will be on the bottom as secondary. You just need to select this option if you want to use TAGS AS PRIMARY NAVIGATION. You can leave this option turned off in case you want pages to be your primary navigation.
Setup the footer
You can add your own copyright info in the footer. Just add it in the text field named ‘Copyright’:
Homepage setup: Posts per page
You can define how many thumbnails appear on your homepage by specifying the Homepage thumbnails (in the Customize Panel > Advanced). You can choose between 1 - 15. The demo theme uses 10.
Homepage setup: Measures
To customize your homepage to suit your site’s need you have to tweak the following measure:
- 1) Content Height: Includes thumbnail height and thumbnail text
- 2) Content Width: Includes all the thumbnails in one page - you should aim for a very large number here (otherwise thumbnails will get cropped)
- 3) Margin Top: The measure counting from the top to the thumbnails
- 4) Column Gap: Space between thumbnails
- 5) Thumbnail Width: In case you want all thumbnails to be a specific width (default is auto) (option no longer available since 1.1)
- 6) Thumbnail Minimum Width: Used for text thumbnails and for those who can’t get a real width from Tumblr (option no longer available since 1.1)
- 7) Thumbnail Height: How tall the thumbnails are. See note.
Currently measures are set to ems (a unit of measure that is recommended in the web), but you can change to px (pixels).
Please don’t forget that when changing the thumbnail height, you must also change the content height otherwise the text and thumbnail bottom might get cut off. To prevent this, adjust the content height accordingly.
All colors available in the theme are customizable and easily accessible using the Customize Panel > Appearance.
OPTION: Homepage Layout (since 1.1)
Since version 1.1 it’s possible to choose between two homepage layouts:
- Horizontal (default) - the original horizontal layout where thumbnails are displayed next to each other and the page scrolls to the right
- Grid - the new layout where thumbnails will be displayed in a grid format of 4 per row (in higher resolution displays) and the page scrolls vertically
OPTION: Show Logo Text
When this option is selected the name of your site will appear as text on the top of the site.
OPTION: Uppercase Nav
Selected by default, this options turns all your navigation items uppercase.
OPTION: Reverse Pagination
When selected, the pagination links (previous/next) will be reversed (that is, go to the opposite direction). Tumblr usally orders posts chronologically - newer first. This however, won’t change the ordering of your posts in a page, the newest will always appear first.
OPTION: Enable Fake Thumbnails
This option comes selected by default:
- 1) Enable Fake Thumbnails OFF: Text thumbails will appear as text
- 2) Enable Fake Thumbnails ON: Text thumbnails will appear as an image
IMPORTANT NOTE: To make this work, you need to add class=”cover” to the image tag inside the text post. To do this, after editing the text, click the HTML option, then add this class to the image, for example:
<img class=”cover” src=”https://31.media.tumblr.com/56f4af7511b7e3e1f476cba094d43a47/tumblr_inline_mxn5ipvIu41qaeqdv.jpg”>
OPTION: Show Date / Likes Badge / Note Count / Permalink / Tags
Some options are available to be displayed of hidden in the content page.
- 1) Show Date
- 2) Show Likes Badge
- 3) Show Note Count
- 4) Show Permalink
- 5) Show Tags
This won’t affect this element in the homepage (might be in a future update).
OPTION: Show Reblog Button
When this option is selected, users can click to REBLOG your post.
OPTION: Show Thumbnail Captions
On by default, your homepage will show the title and some metainfo of your posts under the thumbnails. If turned off, this captions won’t show anymore and the homepage will only feature the thumbnails.
OPTION: Show Social Media Links
When this option is available — and you also need to configure the URLs of each social media service — their respective icon will appear on the footer of the site.
OPTION: Share on Facebook / Google Plus / Pinterest / Twitter
When selection these options you’ll add a button to share on these social sites directly from your post page.
OPTION: Hide Tumblr Commands
If you prefer not to have the Tumblr Commands showing on your site, just check the Hide Tumblr Commands box.
OPTION: Give Credit
You can give credit to this theme by leaving the ‘Give Credit’ option on. You can remove this credit by unchecking this option but I will be so sad :-(
No… just kidding. Do what you think it’s best for your site. Maybe you just want to show off this amazing theme’s name :-)
OPTION: Enable Lightbox
If you want to use a lightbox, you can also do that. By default it is enabled and it will allow users to click on the photos and zoom them.
OPTION: Photoset Layout
By default, photosets appear in a vertical column of photos. If you want to use the Tumblr’s default photoset layout, please check the Enable Photoset Layout.
OPTION: Enable Disqus
Disqus is a free comment / discussion platform that you can enable for your Tumblr site. To do it, you’ll need to follow these steps:
- Setup an account with Disqus (http://disqus.com/)
- Add your site to Disqus and copy the disqus shortname
- Add the Disqus shortname to Tumblr’s option with the same name (Disqus shortname)
- Check the Enable Disqus on the option box
IMPORTANT NOTE: You will need to insert your Disqus Shortname in the field with this name. Please don’t forget this.
To set up your Google analytics, just go to the Customize Panel > Appearance and post your ID here (something like UA-1234567-8).
If you don’t have or can’t find your ID, you can check this page.
Google Web Fonts
This theme uses 3 different Google Web Fonts, but you can customize them to your liking: one for Navigation and Tags, a second for Titles and the last one for the text.
Setting up the fonts is easy, just a few steps you need to follow with attention:
A) Go to Google Fontsand select the font for navigation and tags (check one of the styles as well), then repeat with a font for titles and one for the main text. In the end you should have a list like the one in this image.
B) Then fill out the following fields in your Tumblr Customize Panel:
- 1) Google Fonts Link - This line you will get in line 3 - Add this code to your site (please check image). You should compile all fonts that you are using in a single link.
- 2) Font for Navigation (and tags)
- Nav Google Font Family - Select the family name in item 4 that will be used for navigation and tags
- Nav Google Font Weight - Write the number (ex: 400, 700) that you see related to this family weight
- Nav Google Font Style - Write the style (bold, normal or italic) related to this family
- 3) Font for Titles
- Title Google Font Family - Select the family name in item 4 that will be used for the titles
- Title Google Font Weight - Write the number (ex: 400, 700) that you see related to this family weight
- Title Google Font Style - Write the style (bold, normal or italic) related to this family
- 4) Font for Main Text
- Text Google Font Family - Select the family name in item 4 that will be used for the text
- Text Google Font Weight - Write the number (ex: 400, 700) that you see related to this family weight
- Text Google Font Style - Write the style (bold, normal or italic) related to this family
SEO Options (Description and Keywords)
Besides the description, you should also fill the Keywords field with keywords that will relate to your site. Tags will also be added in the page keywords, but these should be related to the overall site.
ADVANCED USE: Smart Tags
Smart Tags are tags added by the user in the post tags field that have an effect in the appearance of the page.
The currently available Smart Tags are:
- nocomments - Hides Disqus from that specific post (will display in the rest of the posts without this tag).
- largetitle - Compensates the location of the aside for large titled posts. Should be used when the post has a large title (amount of characters).
- notitle - Compensates the location of the aside for posts with no title
- hidecover - Hides the cover image (used as fake thumbnail for text posts) in the post itself.
- wideimage - Makes the content images the width of the page. Example image 1 is using this tag.
- fitimage - Makes the content images the width of the text column (74% wide). Example image 2 is using this tag.
NOTE: These tags won’t show in the tags list in the post page as they are automatically hidden.
ADVANCED USE: Creating a Title for the Photo post
Photo posts don’t have a title field in Tumblr. So to go around this, you can add one just by adding an H1 tag on your HTML (caption):
<h1>Your title here</h1>
This will render as a title and also as a caption in the homepage thumbnails.
IMPORTANT NOTE: The title should be the first <h1> tag that you use in your post.
ADVANCED USE: Creating an Intro text block
To use a stronger type in a block of text, edit the HTML caption and then write the following inside the <p> tag:
It should read when complete:
<p class=”intro”>Your intro here…</p>
The following resources have been used to create this theme:
- JQuery Library
- FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
- Photoset grid - jQuery plugin to arrange images into a flexible grid by Jonathan Moore - Style Hatch
- JQuery Fullsizable - jQuery plugin to take full available browser space for image viewing.
- HTML5Shiv (HTML5 IE enabling script) by Remy Sharp
- Fontello - icon fonts generator
- Google Analytics
- CSS Resetby Eric Meyer
- Normalize.css by Nicolas Gallagher
- Fonts by Google WebFonts
Content used in the Demo Site:
Demo Site - Horizontal Layout
You can check the demo site for the horizontal layout here:
Demo Site - Grid Layout
You can check the demo site for the grid layout here:
If you have any question or need any help, please don’t be shy and let me know.
You can do this using the new support site that I’m setting up (http://support.misspato.com) or using the comments in ThemeForest.
When you contact me, please let me know the name of the file you have purchased, the problem you are having (or question) and send me a link to the site that you are building with the theme.
Support - http://support.misspato.com/
Documentation - http://photographica-theme.tumblr.com/documentation
Misspato Themes - http://www.misspato.com