Back to top

Documentation

Theme by: Patricia Carvalho - http://themeforest.net/user/misspato
Support: http://support.misspato.com
Updated: Oct 10, 2013 (v.2.1)

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.

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

- 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);
- Footer - you can choose between right / left / center;
- Logo - you can choose between right / left / center
- Sidebar - Where the menu is - you can choose between right / left
- Site: Overal page / site (including the sidebar and all content / excluding footer and header) - you can choose between right / left / center;

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:

- (1) 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
- (2) 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





Thumbnails

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

When choosing Infinite Scrolling, you’ll need to choose the maximum amount: 15 post per page.

Thumbnails





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





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: 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 the ‘Ask me’ link will appear in the main navigation.

OPTION: Ask me anything enabled





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

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

OPTION: Enable Search





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 Transparent Header Bkg

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

OPTION: Enable Transparent Header Bkg





OPTION: Infinite Scrolling

Instead of having a paginated homepage, you’ll have an infinite scroll of thumbnails.

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

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

OPTION: Show Date





OPTION: Show Description

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

OPTION: Show Description





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

This option will show the permalink in the content page.

OPTION: Show Permalink





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





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





OPTION: Show Tags

This option will show the tags in the content page.

OPTION: Show Tags





OPTION: Social Sharing

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

OPTION: Social Sharing





OPTION: Tiling Thumbnails

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

OPTION: Tiling Thumbnails





SEO options

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

SEO options





Contact and Copyright text

More information can be added:

Copyright text: it will appear on the footer of your site and you can use some HTML tags (such as links).
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 and Copyright text





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





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





HTML / CSS structure

The theme file has comments and included an index of the CSS elements. However please be aware that Tumblr has proprietary tags and those are included in the theme to make it work. No other files are needed to install the theme.






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!

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


Pop Gallery Tumblr Theme Screenshot
Close

Pop Gallery Tumblr Theme by Misspato

Buy Now $30 Other Themes