Documentation

Theme by: Patricia Carvalho - http://themeforest.net/user/misspato
Support: http://support.misspato.com
Last Update: May 14, 2013 (v.1.2)

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email me to support@misspato.com. Thanks so much!

If you like this theme, please don’t forget to rate it :-)

About

The Catalog is a simple yet very complete Tumblr Theme focused on getting all your photos, text, videos, audio in a catalog-like format. All posts are showed as thumbnails and you can see more by clicking them. It’s a responsive theme that works well in different screen sizes.

It has a slider that fetches posted photos based on a special ‘slider’ tag.

About

Features

HOMEPAGE/TAG LIST WITH THUMBNAILS
Unlike most Tumblr themes, The Catalog 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).

OPTIONAL SLIDER (CREATED FROM CHOSEN POSTS)
You can choose to have a slider in the homepage (and it will only show in the homepage). You can upload the content for the slider as regular photo posts just by adding the ‘slider’ tag. When disabled, the homepage will be a grid of thumbnails.

ALL POST TYPES
All posts types are supported.

SEARCH
Search will appear on the footer.

CUSTOM COLORS
All colors are editable using the Customize panel.

GOOGLE WEBFONTS
You can choose your favorite Google WebFont to use in your site.

DISQUS COMMENTS
Disqus comments are supported. Enter your Disqus shortname to enable commenting on posts. Disqus is free, sign for it here.

TWITTER WIDGET
By associating your Twitter account with your Tumblr blog, this widget will be automatically activated.

FOOTER WIDGETS
You can have up to 4 widgets in the footer, just choose from: About, Twitter, Flickr, Instagram, Dribbble, Likes, Following and Social Media links.

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.

PAGES AND ASK FORM SUPPORTED
Create all pages that you need using this theme. Ask is also supported. Links will appear on the footer.

CUSTOMIZABLE NAVIGATION (BASED ON TAGS)
The main navigation can be customized using Tags in the Customize Panel. It will appear on the top of the site. You can also have pages on the top menu or as footer links.

GOOGLE ANALYTICS READY
Just add your analytics code and you’re set.

FACEBOOK SHARE OPTIMIZED
Share any page using facebook browser plug-ing or directly on Facebook and you’ll see the title, description and photo.

SOCIAL NETWORK LINKS SUPPORTED
Behance, Coroflot, DeviantART, Dribbble, Ebay, Envato, Facebook, Flickr, Instagram, LinkedIn, Pinterest, SoundCloud, Twitter, Vimeo, YouTube and Zerply are supported. Just enter the URL for each of them. The links will appear on the footer.

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 <!doctype 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.

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:

Customization

Overall site dimensions

You can set the following measures to your site (in the Customize Panel > Appearance):

  • Site header height: it’s the height of your header (where the logo and main navigation are)
  • Site max width: the maximun width of you site when seen in a very large monitor. The width is measured where the content is and it doesn’t include the background.
  • Enable Boxed Layout: by chosing this option your site won’t strectch to the full width of the browser. It will have the max width and you will be able to see a background color or image behind the page margins.

Setting up a background image

This theme allows you to choose a background image. Your background image can scale proporcionally to the window size or tile (in this last case you’ll need to check the option ‘Enable Tiled Background’).

Please note that you’ll only see a background image if your layout is boxed. If the layout is wide it will take all width of the browser and the background can’t be seen.

Setting up a background image

Background colors

You can set many background colors, for example:

  • For a full width header, you set the HeaderBkg and the HeaderInnerBkg the same color so it will prolong horizontally.
  • The same with the footer: FooterBkg and FooterInnerBkg.
  • And also for the content: ContentBkg and ContentInnerBkg.
  • The thumbnails also have background colors following this pattern: ThumbnailAudioBkg, ThumbnailsLinkBkg and so on.

Custom logo

You can have a text logo 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.

If the header is then too small for your logo, edit the ‘Site header height’ field in the Customize Panel.

Set up the main navigation

Use the Customize Panel > Appearance then Nav Tag [1-7] 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 main navigation

Pages Menu

The default location of the pages menu is in the footer. You can choose to have the pages menu on the top, by checking the box ‘Pages Menu on Top’ using the Customize Panel > Appearance.

Pages Menu

Homepage setup

You can define how many thumbnails appear on your homepage by specifying the Homepage thumbnails (in the Customize Panel > Appearance).

However, you should have attention to one very important factor, that is depending on the amount of post per page (defined in the Customize Panel > Advanced), some of the posts won’t appear listed in the regular listing flow. Meaning that, for example, if you specify 8 posts per page and then 4 thumbnails in the homepage, 4 of the remaining thumbnails will be hidden and then in the following page (when you click next) you’ll get posts 9-17. So, if you don’t want any thumbnail to be hidden, you should use the same number to post per page and homepage thumbnails.

Please note that this is a temporary hide. When you choose to list per keyword or search this won’t apply.

Homepage setup

Slider setup

You can have one slider in the homepage. To set it up, go to Customize Panel > Appearance and then you’ll have the following options related to the slide:

  • Enable slider: when checked the slider will appear in your homepage
  • Full width slider: The slider will be as large as the window is. If you want the slider to be just the width of your content, uncheck this box.
  • Show slider text: If checked the caption of the photo will appear over the slider. However, it might crop so please don’t use large text on slider posts.

Then you just need to add the tag ‘slider’ to each photo post that you want to be featured as a slider.

Thumbnails setup

Thumbnails have a proportional width and a fixed hight. You can however configure the following for thumbnails:

  • Thumbnails border: You need to specify the weight in px, the style (solid | dashed | dotted) and the color in hexadecimal. The default is 5px solid #f411e8
  • ‘x’ posts per page: In the Customize Panel > Advanced you need to choose how many thumbnails you’d like to see per page. I suggest a multiple of 4 (4 / 8 or 12). 12 is the best option.
  • Thumbnail background color: Thumbnails for text content have a special background color, so you can configure the following colors: ThumbnailAudioBkg, ThumbnailsLinkBkg, ThumbnailQuoteBkg, ThumbnailsTextBkg

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.

Color Scheme customization

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

Audioplayer colors

You can choose just one color to your audioplayer in the Customize Panel > Appearance. Options are black, grey or white.

Footer widgets - About

To edit the About Widget, you just need to edit the Description field (Customize Panel on the top, after the Title). To activate this widget, just select the checkbox in the Appearance Panel ‘Show widget About’.

Footer widgets - Twitter

To configure your Twitter widget, just paste your Dribbble username in the Twitter username field in the Customize Panel > Appearance. To activate this widget, just select the checkbox in the Appearance Panel ‘Show widget Twitter’.

Footer widgets - Dribbble

To configure your Dribbble widget, just paste your Dribbble username in the Dribbble username field in the Customize Panel > Appearance. To activate this widget, just select the checkbox in the Appearance Panel ‘Show widget Dribbble’.

Footer widgets - Instagram

To configure your Instagram widget, just paste your Instagram username in the Instagram User ID field in the Customize Panel > Appearance.
Check your Instagram User ID here: http://jelled.com/instagram/lookup-user-id. To activate this widget, just select the checkbox in the Appearance Panel ‘Show widget Instagram’.

Footer widgets - Likes

To activate this widget, just select the checkbox in the Appearance Panel ‘Show widget Likes’. This widget will only show up if you are using this theme in your primary Tumblr blog.

Footer widgets - Following

To activate this widget, just select the checkbox in the Appearance Panel ‘Show widget Following’. This widget will only show up if you are using this theme in your primary Tumblr blog.

Footer widgets - Flickr

To configure your Flickr widget, just paste your Flickr username in the Flickr username field in the Customize Panel > Appearance. To activate this widget, just select the checkbox in the Appearance Panel ‘Show widget Flickr’.

Footer widgets - Social Media

To activate the social network links in the footer, you just need to go to the Customize Panel > Appearance and paste the full URL address of your profile page for each of these services. To activate this widget, just select the checkbox in the Appearance Panel ‘Show widget Social Media’.

Search

Search is included in the footer, no need to customize it.

Footer copyright

The copyright statement will include the following: “Copyright © [2007–2013] ” + [Copyright text] + “Powered by Tumblr.”

To edit the Copyright text, just go to the Customize Panel > Appearance.

Footer navigation

The footer will include all pages that you add to your blog that you want to show a link to. Additionally, you can enable the following links:

- Archive (link to the archive page)

- Random (link to a random post)

Google webfonts

You can setup two different fonts to be used in the theme:

  • Main Font - the font used in the body, content and all main text (default is Droid Sans)
  • Alternate Font - used in titles (default is Droid Serif)

To setup your fonts, you just need to fill these fields in the Customize Panel > Appearance:

  • Google Fonts Alternate Code
  • Google Fonts Alternate Family
  • Google Fonts Main Code
  • Google Fonts Main Family

1 - On the ‘code’ field, you need to place the <link href=….> tag that the Google Web Fonts site gives you.
2 - On the ‘family’ field to place the ‘font-family…’ code

Just choose your font in Google Web Fonts and then copy the full code snippets and paste into the right fields.

Google webfonts

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.

Disqus

Enter your Disqus shortname in the Customize Panel > Appearance to enable commenting on posts. If you still don’t have Disqus, you can sign up for free.

Credits

The following resources have been used to create this theme:

  • JQuery Library
  • Tweetable- A jQuery plugin for displaying twitter feeds
  • Timeago - A jQuery plugin that makes it easy to support automatically updating timestamps
  • Dribbble- A library agnositc script for adding your recent Dribbble shots to your website.
  • FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
  • JQuery Fullsizable - jQuery lightbox plugin to take full available browser space for image viewing.
  • ResponsiveSlides.js - Simple & lightweight responsive slider plugin (in 1kb).
  • Instagram - A Jquery plugin for displaying Instagram photos (by Rob Edgell).
  • jquery.flickr.js - A jquery-plugin to show flickr latest photos
  • HTML5Shiv (HTML5 IE enabling script) by Remy Sharp
  • ie7-js (A JavaScript library to make MSIE behave like a standards-compliant browser) by Dean Edwards
  • Back to top Link adapted from WebDesigner’s Wall
  • Script to display or hide content in the homepage by Nelson Martins (created specially for The Catalog Tumblr theme)
  • Fontello - icon fonts generator
  • Google Analytics
  • Disqus
  • CSS Resetby Eric Meyer
  • Normalize.css by Nicolas Gallagher
  • Droid Sans by Steve Matteson | Google WebFonts

Images used in the Demo Site:

All photos and illustrations on the demo site were taken/created by Patricia Carvalho.

Demo Site

You can check the demo site here:
http://catalog-theme.tumblr.com/

Demo Site

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/
FAQ - http://catalog-theme.tumblr.com/faq
Documentation - http://catalog-theme.tumblr.com/documentation

Please rate my theme

If you like my theme, please take one minute to post a rating :-)

You can do that by going to the theme’s page at ThemeForest:
http://themeforest.net/user/misspato/portfolio

If you are posting a rate less than 5 stars, please let me know first how I can improve it :-)

Thank you!

Once again, thank you so much for purchasing this theme. As I said at the beginning, I’d be glad to help you if you have any questions relating to this theme. No guarantees, but I’ll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the “Item Discussion” section.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

I would also love to see your site using this theme, please send me your link :-)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Patricia Carvalho / misspato / @misspatolinks (twitter)