Documentation

Theme by: Patricia Carvalho - http://www.misspato.com
Support: http://support.misspato.com
Updated: February 13, 2014 (v.1.1)

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.

About

Features

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
Search will appear on the header.

CUSTOM COLORS
All colors are editable using the Customize panel.

GOOGLE WEBFONTS
You can choose your a set of 3 Google WebFont to use in your site.

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

DOUBLE NAVIGATION
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.

SMART TAGS
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.

Installation

To install the theme, please follow these steps:

  1. Open the .txt or .html file using a text application (the first line of the file should start with <html …)
  2. Select all text and copy
  3. Login to your Tumblr account
  4. Go to Settings (gear wheel icon on the top)
  5. Select the Tumblr site on the left panel
  6. Click the Customize button (on the right panel)
  7. Click Edit HTML (left panel)
  8. Then Select All and Paste the new code
  9. Click Update Preview
  10. Click Save
  11. Refresh the browser

Note: Please make sure that you are opening the text files as simple text and not rich text.

Installation

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

CoofeeCup (Free / Windows): http://www.coffeecup.com/free-editor/
TextWrangler (Free / MacOS): http://www.barebones.com/products/textwrangler/

NOTE: Applications to use

Customization

You can customize the theme by accessing your Customize panel:
http://www.tumblr.com/customize/

After making the copy and paste and save, return to Appearance and refresh the browser and you’ll see this (with your content):

Customization

Custom logo

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.

Custom logo

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.

Set up a tagline

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.

Setting up the pages navigation

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.

Set up the tags navigation

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

Setup the footer

You can add your own copyright info in the footer. Just add it in the text field named ‘Copyright’:

Setup the footer

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: Posts per page

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

IMPORTANT NOTE:
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.

Homepage setup: Measures

Colors

All colors available in the theme are customizable and easily accessible using the Customize Panel > Appearance.

Colors

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: Homepage Layout (since 1.1)

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: Show Logo Text

OPTION: Uppercase Nav

Selected by default, this options turns all your navigation items uppercase.

OPTION: Uppercase Nav

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: Reverse Pagination

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: Enable Fake Thumbnails

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 Date / Likes Badge / Note Count / Permalink / Tags

OPTION: Show Reblog Button

When this option is selected, users can click to REBLOG your post.

OPTION: Show Reblog Button

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

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: Show Social Media Links

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: Share on Facebook / Google Plus / Pinterest / Twitter

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: Hide Tumblr Commands

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: Give Credit

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: Enable Lightbox

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

  1. Setup an account with Disqus (http://disqus.com/)
  2. Add your site to Disqus and copy the disqus shortname
  3. Add the Disqus shortname to Tumblr’s option with the same name (Disqus shortname)
  4. 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.

OPTION: Enable Disqus

Google analytics

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 analytics

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

Google Web Fonts

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.

SEO Options (Description and Keywords)

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: Smart Tags

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 a Title for the Photo 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:

class=”intro”

It should read when complete:

<p class=”intro”>Your intro here…</p>

ADVANCED USE: Creating an Intro text block

Credits

The following resources have been used to create this theme:

Content used in the Demo Site:

- Photos by Matthias Heiderich (Copyright Creative Commons CC BY-NC-ND 3.0)
- Text by the Wikipedia
- ‘Create’ post text and photo by Leo Babauta

Demo Site - Horizontal Layout

You can check the demo site for the horizontal layout here:
http://horizontalism-theme.tumblr.com/

Demo Site - Horizontal Layout

Demo Site - Grid Layout

You can check the demo site for the grid layout here:
http://horizontalism-theme-grid.tumblr.com/

Demo Site - Grid Layout


Support

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.

Quick links:

Support - http://support.misspato.com/
Documentation - http://photographica-theme.tumblr.com/documentation
Misspato Themes - http://www.misspato.com

Horizontalism Tumblr Theme Screenshot
Close

horizontalism Tumblr Theme by Misspato

Buy Now $30 Other Themes