Documentation

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

About

Photographica is a portfolio Tumblr theme aimed for photographers or other creative professionals. It’s versatile and easy to customize.

About

Features

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

ALL POST TYPES
All posts types are supported.

SEARCH
Search will appear on the footer (can be turned off).

CUSTOM COLORS
All colors are editable using the Customize panel.

GOOGLE WEBFONTS
You can choose your favorite 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.

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

SUPPORT FOR GROUP POSTING
Groups can post using this theme and have their contribution recognized in the homepage in as the author of the post.

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.

Installation

To install the theme, please follow these steps:

  1. Open the .txt or .html file using a text application
  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:

Customization

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. You should do the same for LogoSmall (used for content pages and mobile devices) - and this one should have a color that will fit into the top header background.

Then choose an image from your computer. I recommend you use a transparent PNG file. Use only real sized images.

The Logo in the demo theme is 487 x 72 px.
The LogoSmall is 172 x 26 px.

Don’t forget to hit save before leaving the page.

Custom logo

Setting up a background image

This theme allows you to choose a large background image that will scale proporcionally to the window.

Use a subdued image as a brigher a very colorful image might contrast too much with the content.

The demo theme is using an image with 1630 x 1500 px.

Setting up a background image

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 the first item.

Set up the tags navigation

Homepage setup

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

For the best result, I recommend using multiples of 3 (3, 6, 9 or 12).

Homepage setup

Tagline

To set up the tagline for your site, you just need to write the description. This small text will appear on your homepage above the thumbnails. On mobile it will appear on the footer.

Tagline

Colors

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

Colors

FONT (Body)

FONT (Body)

You can choose which font to use as the body text font. This font will be used in the content pages text but not on the homepage, titles and subtitles (that will use the Google Font). Check next for more info on Google Web Fonts.

OPTION: Tags as Primary Nav

When selecting this option, your top navigation will feature the links of the nav tags that you have set in the options. You can have up to 9 tags. The default value is OFF.

OPTION: Tags as Primary Nav

OPTION: Show Camera Exif

When the SHOW CAMERA EXIF option is selected, it will appear in PHOTO right under the image.

OPTION: Show Camera Exif

OPTION: Enable 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 Photoset Layout

OPTION: Enable Bold as Title

You can enable BOLD as Title for PHOTO post and VIDEO posts as they don’t have any title field. To add a title you’ll just need to write the title in the Caption field, then make it BOLD.

OPTION: Enable Bold as Title

OPTION: Enable Groups

OPTION: Enable Groups

OPTION: Center Tagline

OPTION: Center Tagline

To center the tagline (the text that will appear on the top of your site under the logo and nav tags, just check the box “Center the Tagline”.

OPTION: Smaller Images

If you prefer to have smaller images inside the site (not on the homepage), you can check this box. Instead of taking up the full width of the page, images will get a larger margin and will be smaller. If you are using INSTAGRAM, just add the tag ‘instagram’ to your photo and it will be displayed real sized.

OPTION: Smaller Images

OPTION: Secondary Nav on Footer

By default the secondary nav is only displayed on the Homepage under the logo and before the tagline. If you select the ‘Secondary Nav on Footer' it will be displayed on the footer all the time.

OPTION: Secondary Nav on Footer

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: Show Archive Link / Show RSS Link / Show Ask Link / Show Submit Link / Show Random Link

When selected these links will show up in the main navigation area. You can opt to have the primary navigation on the top (as it’s by default) or under the logo (homepage only) or footer.

OPTION: Show Archive Link / Show RSS Link / Show Ask Link / Show Submit Link / Show Random Link

OPTION: Reverse Pagination

Some prefer that the navigation (previous / next) link display in reverse to the Tumblr’s default. If you also prefer, just select this option.

OPTION: Reverse Pagination

OPTION: Hide Tumblr Commands

If you prefer not to have the Tumblr Commands showing on your site, just check the Hide Tumblr Commands box. We moved the Tumblr commands box to the footer, so it won’t affect the main navigation area.

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: 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: 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: 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
OPTION: Enable Disqus

OPTION: Show Search

In the SHOW SEARCH option is selected, a SEARCH field will appear in the footer (left).

OPTION: Show Search

OPTION: Body Text Size

OPTION: Body Text Size

You can change the body text size - this will influence the body text for the content pages. The default is set in ems (em) but you can also use pixels (px) or percentages (%). You should use the unit of measurement, not only the number, otherwise the results might not be the ones you expect.

OPTION: Logo Font Size

OPTION: Logo Font Size

You can change the logo font size that will be applied in the Homepage only - and only if you are not using an image as logo. The default is set in ems (em) but you can also use pixels (px) or percentages (%). You should use the unit of measurement, not only the number, otherwise the results might not be the ones you expect.

Group Members Label

You can choose which wording should express the members area. By default ‘Contributors’ will appear, but you can change to whatever you prefer.

Group Members Label

Footer Code

You can add any HTML code in this area. This will appear just before the ending of the <body> tag. Make sure you know what you are doing, because this is for more advanced use. It’s empl

Footer Code

Google Web Fonts

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

  • Google Font Light - the font used in the thumbnails, titles and some parts of the site (default is Raleway Book - 300)
  • Google Font Bold - used in titles, navigation and most bolds (default is Raleway Extra Bold - 800)

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

  • Google Font Bold - the default theme is using 800
  • Google Font Family - the default theme is using font-family: ‘Raleway’, sans-serif;
  • Google Font Light - the default theme is using 300
  • Google Fonts Link - the default theme is using <link href=’http://fonts.googleapis.com/css?family=Raleway:300,800’ rel=’stylesheet’ type=’text/css’>

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

Google Web Fonts

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

Credits

The following resources have been used to create this theme:

Images used in the Demo Site:

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

Demo Site

You can check the demo site here:
http://photographica-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/
Documentation - http://photographica-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)

Photographica Tumblr Theme Screenshot
Close

Photographica Tumblr Theme by Misspato

Buy Now $30 Other Themes