Back to top

Documentation

Theme by: Patricia Carvalho - http://www.misspato.com
Support: http://support.misspato.com
Updated: June 12, 2014 (v.2.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 :-)

Documentation

About

Pop Gallery is a Tumblr theme for visual portfolios, galleries, handcrafts shops, with the unique possibility to present distinct thumbnails for new, sold and reserved items (custom tags).

It has a beautiful and clean design, but with a distinct touch of the circular thumbnails. It will set your Tumblr site apart from all others.

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.

GROUP SUPPORT
Supports group posting. The contributers list will appear on the sidebar and the author on each page. Both options are toggable independently.

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.

SOCIAL NETWORK LINKS SUPPORTED
AboutMe, Amazon, Apple, AppStore, Behance, Blogger, Cargo, Coroflot, Creative Commons, Delicious, DeviantART, Digg, Dribbble, Ebay, Envato, Etsy, Facebook, Flickr, Forrst, Google, HTML5, Instagram, LastFM, LinkedIn, MySpace, PayPal, Picasa, Pinterest, RSS, Skype, Storenvy, Stumbleupon, SoundCloud, Technorati, Tumblr, Twitter, Vimeo, Windows, Wordpress, Yahoo, YouTube, Zerply are supported. Just enter the URL for each of them. The icons will appear on the sidebar.

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 something like see this:

Customization

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

Make sure that it’s a transparent png or has the same background color as your header. Your logo can be any width and height of 110px to fit the theme.

IMAGE: Custom logo

IMAGE: Mobile Logo

You should also choose an image to be your mobile logo (used in the mobile version of your website). Make sure that it’s a transparent png or has the same background color as your header. Your logo can be width of 300px and up to 200px height to fit the theme.

IMAGE: Mobile Logo

IMAGE: Header Background

If you want to have an image as your header background, you can choose it here - HeaderBkg. It will repeat vertical and horizontally. In case you don’t want this image to repeat, you can paste in the custom CSS part this line of code: header {background-repeat: no-repeat}

IMAGE: Header Background

IMAGE: Page Background

If you want your page to have a background, use this option to upload the chosen image. Please have in mind that this image will repeat both horizontally and vertically.

IMAGE: Page Background

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 sidebar 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-8] 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 in a post, otherwise it will be a ‘no results’ (empty) page. You also have a Nav Title field that you can use to be your tags title.

Set up the tags navigation

Overall site setup

Starting on version 2.1 you can now define some important layout styles / positioning:

- Site: Overal page / site (including the sidebar and all content / excluding footer and header) - you can choose between right / left / center
- Logo - you can choose between right / left / center
- Footer - you can choose between right / left / center
- Sidebar - Where the menu is - you can choose between right / left
- Content Info: In the permalink page, this area will have all info for each post - you can choose between right / left
- Content Width: For the thumbnails but also for the content, you can now choose between 3 / 4 / 5 columns (please remember as the site is responsive, it will wrap to the width of the window);

This way your site can be even more customizable.

Overall site setup

Define your header height (optional)

You can now specify the height of your header area. You can use EMs or PX (pixels) as units. You can’t use centimeters or inches or other units, just em or px. In case you don’t specify the height it will be the enough size to fit your logo.

Define your header height (optional)

Customizing Title and Description

When installing this theme, you will get all the defaults in colors, fonts and other information. So you should check them and replace the following for your own information:

- Title: Your blog’s Title (will appear as your logo if you use a text logo instead of an image), so don’t use nothing too large
- Description: Your blog’s description. Will appear in the description meta-tag and when users share the main page in Facebook.

Customizing Title and Description

Bubble Tags / Overlay Tags

This theme has two special features that are:

- (1) Bubble tags - You can use to call attention to the item with words as ‘new’ or ‘sale’. It will show as a tiny circle (or square) on the top right of the thumbnail.
- (2) Overlay tags - You can use to mark which of your item is sold or reserved, for example. It will show as a color overlay with the word you define on top of it.

Bubble Tags / Overlay Tags

Defining the ‘bubble’ tags

Alongside with the nav tags, you can also define 3 bubble tags (Bubble Tag 1, 2 and 3) that will make a coloured bubble appear in your thumbnails on the index and tag pages. The default values are ‘buy’, ‘new’ and ‘soon’, but you can change those to your liking.

Besides the words, these tags can have one color each that you can choose as well:
1. Bubble Tag 1: Will have the background color of Bubble Tag Color 1
2. Bubble Tag 2: Will have the background color of Bubble Tag Color 2
3. Bubble Tag 3: Will have the background color of Bubble Tag Color 3

Defining the 'bubble' tags

Bubble Tag Size

Currently set to 55px you can edit this value to the one that fits your project. Don’t forget to keep the units without spaces relative to the numbers.

Bubble Tag Size

Overlay Opacity

In this field you can define the overlay opacity. Default value is .5 (meaning 50% opaque).

Overlay Opacity

Defining the ‘overlay’ tags

Alongside with the bubble tags, you can also define 3 overlay tags (Overlay Tag 1, 2 and 3) that will make a coloured bubble appear in your thumbnails on the index and tag pages. The default values are ‘buy’, ‘new’ and ‘soon’, but you can change those to your liking.

Besides the words, these tags can have one color each that you can choose as well:
1. Overlay Tag 1: Will have the background color of Overlay Color 1
2. Overlay Tag 2: Will have the background color of Overlay Color 2
3. Overlay Tag 3: Will have the background color of Overlay Color 3

Defining the 'overlay' tags

Choosing your color scheme

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

Choosing your color scheme

FONTS: Body Font

The default body font is ‘Lucida Sans' and since version 2.2 you can choose the font using the Tumblr's font selector.

FONTS: Body Font

FONTS: Choosing Google web fonts

As this theme supports Google Web Fonts, you can select your favorite one to use in your Tumblr site. Only two fields are needed:

1. Google WebFonts Code: The first line of code you get in the Google WebFonts page (for the sample site I’m using Kameron Bold: ) (see next)
2. Google WebFonts Family: The second line of code you get in the Google WebFonts page (see next)

FONTS: Choosing Google web fonts

FONTS: Finding the web fonts code in the Google site

Go to the Google WebFonts site (http://www.google.com/webfonts) and make a (1) search and (2) select the font you want to use. Then click (3) Quick-use to get the codes.

FONTS: Finding the web fonts code in the Google site

FONTS: Selecting the two code snippets from Google Web Fonts

After (1) choosing the font you’ll need to copy these two snippets of code and paste them on your theme options pannel:

- The first part of the code (2) will go into the Google WebFonts Code (in your customize theme panel).
- The second snippet (3) will go into the Google WebFonts Family (in your customize theme panel).

Just for your reference, the demo site is using Kameron Bold as the chosen Google Web Font.

FONTS: Selecting the two code snippets from Google Web Fonts

OPTION: Ask me anything enabled

When checked (2) the ‘Ask me’ link will appear in the main navigation.

PS: You also need to have the Ask setting enabled in your blog setting page (1). You can also set the link and page title here.

OPTION: Ask me anything enabled

OPTION: Infinite Scrolling

Instead of having a paginated homepage, you’ll have an infinite scroll of thumbnails. You need to have the number os posts per page be 15 to have this functionality work well.

OPTION: Infinite Scrolling

OPTION: Round Thumbnails

Thumbnails will be circular / round if you check this option. Otherwise they will be square. Some very old browsers won’t display circular thumbnails, like IE8 or previous.

OPTION: Round Thumbnails

OPTION: Rouns Bubbletags

Since version 2.2 your bubbletags can be round or square independently from the thumbnails.

OPTION: Rouns Bubbletags

OPTION: Tiling Thumbnails

This option will make the image repeat inside the circle of the thumbnail.

OPTION: Tiling Thumbnails

OPTION: Direct Links

When enabled, the links in the homepage will go directly to the linked page and not the an inner page of your Tumblr site.

OPTION: Direct Links

OPTION: Show Email Button

This option will add a contact me button in the content page, right next to your article.

OPTION: Show Email Button

OPTION: Show Notes

This option will make the notes appear on the content page. Notes are all tumblr activity relative to that post, like likes and reblogs.

OPTION: Show Notes

OPTION: Show Tags

This option will show the tags in the content page.

OPTION: Show Tags

OPTION: Show Date

This will show the date of the post in the content pages.

OPTION: Show Date

OPTION: Show Author

This will show the author of the post in the content pages. Useful if you have more than one author for your site or reblog multiple authors.

OPTION: Show Author

OPTION: Show Permalink

This option will show the permalink in the content page.

OPTION: Show Permalink

OPTION: Show Avatar

When enabling the Show Avatar it will show right next to the description. You’ll need to enable the Show Description as well.

OPTION: Show Avatar

OPTION: Show Description

You can also enable the description to appear above the navigation on the sidebar.

OPTION: Show Description

OPTION: Show Pagination Numbers

This option will only work if you have the Infinite Scrolling option off. When Infinite Scrolling is turned off, the homepage will show links for the next page, and page 2 will have a previous and a next link. When the Show Pagination Numbers option is on, the numbers will show up as well.

OPTION: Show Pagination Numbers

OPTION: Reverse Pagination

Tumblr always lists posts from the newest to the oldest, so when you have the Infinite Scrolling off, you’ll get a button saying previous. If you want it to say next, you can do it by enabling the Reverse Pagination option.

OPTION: Reverse Pagination

OPTION: Show Social Media Icons

This option will show the Social Media Icons in the sidebar under the tags navigation.

OPTION: Show Social Media Icons

OPTION: Enable Full Width Images

When checked, the images in the photo posts will take 100% of the size of the content column instead of their real size. Use this ONLY if your original images are large, otherwise they will look bad (low resolution).

OPTION: Enable Full Width Images

OPTION: Enable Custom Blockquote

When enabled, you can add this circular prices in your caption (photo post) using the blockquote element. You can set up to two cirles, using two values (one per paragraph).

OPTION: Enable Custom Blockquote

OPTION: Enable Thumbnail Text

When you check the option Enable Thumbnail Text a small caption will appear over the image thumbnails on mouse over. If not enabled, it will show up a magnifier icon.

OPTION: Enable Thumbnail Text

OPTION: Enable Lightbox

When you choose this option, a large image will pop up when clicked in the photo post (instead of the clickthrough link).

OPTION: Enable Lightbox

OPTION: Enable Photoset Layout

When checked, the photoset will have the layout you chose when creating the post. Otherwise the image will be full width and in a column.

OPTION: Enable Photoset Layout

OPTION: Enable Transparent Header Bkg

When choosing a background image you’ll need to enable the transparent header background.

OPTION: Enable Transparent Header Bkg

OPTION: Enable Search

Places a search box on the sidebar under the main navigation.

OPTION: Enable Search

OPTION: Social Sharing

This option will activate the social sharing buttons next to each post. Uses the AddThis service.

OPTION: Social Sharing

OPTION: Enable Groups

Since version 2.2 you can Enable Groups and you’ll have a list of contributors in the sidebar of the site.

OPTION: Enable Groups

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

Defining your social media links

For each of these lines you should paste the complete URL address of each of the social media links that point to your account. For each that you fill, an icon will appear on the sidebar with the respective logo. More were added such as Instagram, Ebay and SoundCloud.

Defining your social media links

SEO Options

You should also take some time to fill the Keywords option to make your blog more SEO friendly.

SEO Options

Contact Email

If you fill this with your email, a ‘CONTACT ME' button will appear in the inner page next to the image description.

Contact Email

Copyright Text

It will appear on the footer of your site and you can use some HTML tags (such as links).

Copyright Text

Disqus Shortname

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

Header HTML Code / Footer HTML Code

In both these fields you can add HTML code that will be added inside the theme:
- Header HTML Code will add code right before the close of the <header> tag
- Footer HTML Code will add code right before the close of the <body> tag

You might find these useful to install plugins or other aditional code, such as meta-tags to verify your site.

Header HTML Code / Footer HTML Code

Google Analytics ID

Usually starting at UA-… , you can insert it here so that you can track the visits on your blog.

Google Analytics ID

Adding more tags

If you need more tags than the 8 included, you’ll have to hard code it on the scource (here: <!— nav tags —> in the options on the header and inside the sidebar area:

Adding more tags

Advanced Options

On the bottom of your customizer window you’ll find a link for more advanced options (that will appear in the next window):

- Open links in a new window: will let links be opened in a new window, links defined in some navigation options and images, for example
- Use default mobile theme: will use Tumblr’s default mobile theme be used for your site instead of the responsive version of this theme
- Truncate RSS feed: when your RSS subscribers receive your posts, they won’t be complete and will have a link to go to your site to read the rest
- Promote Tumblr!: Shows a follow button for non Tumblr users
- Preview: You can see the theme with sample posts or your own posts (just for the Customizer)
- Posts per page: You can choose up to 15 posts (thumbnails) per page. When choosing Infinite Scrolling, you’ll need to choose the maximum amount: 15 post per page.

Advanced Options

Included files

When downloading and unzipping the theme you will find these files:

1. changelog.txt - List of all modifications that the theme had since its release
2. Help.pdf - The help file (this one that you are reading now).
3. Install.txt - The helper file to install the theme.
4. PopGallery-TumblrTheme.html - The theme file as an HTML file
5. PopGallery-TumblrTheme.txt - The same file as above saved as a simple text file in case you have difficulty opening the HTML file.

Included files

Credits

This theme uses the following Javascript files:

Sources and Credits:

Illustration Credits (used in demo site)

I’m very thankful of all these great illustrators who have allowed me to use their work in the demo site.
All illustrations are copyrighted and are displayed with permission of their authors.
They are not included in the theme files.

By order of appearance in the theme:

Pop Gallery Tumblr Theme - Demo Site

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

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.

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/item/pop-gallery-tumblr-theme/1556214?ref=misspato

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

Please rate my theme

Thank you!