PhotoPharm - v1.1.1

Theme designed and developed by THE MOLITOR

If you have any questions that are beyond the scope of this help file, please visit the forums at www.themolitor.com/forums or you can email me from my profile page at http://themeforest.net/user/themolitor/profile

NOTE: To make sure you're viewing the most recent documentation, it's recommeded that you use the online version of this help file at: http://themolitor.com/help/photopharm/

Updates

Resources

Installation and setup

  1. Download and unzip the folder from ThemeForest.
  2. Upload the "photopharm" folder (with the files left inside) to the themes directory of your blog, which is located within the wp-content directory.
  3. Activate the theme from your admin panel by navigating to "appearance" > "themes".
  4. Install and activate the “OptionTree” plugin. After activation, options will be accessible from “appearance” > “theme options”.

General Info

NOTE: Most of the theme options are controlled from the OptionTree panel. Once finished installing OptionTree, be sure to review the options available by navigating to “appearance” > “theme options”.

Gallery

To create a gallery, simply upload images to a post or page and order them accordingly on the "gallery" tab in the pop-up window (see screenshot below, available after you upload images). NOTE: you DO NOT need to insert the images into the post. The theme will auto-detect if images are uploaded to the post/page.

gallery

For pages, you can make the gallery appear first (instead of showing info tab) by using the "gallery" page template (see screenshot below).

gallery_template

Featured Post Images

To feature images, use the “Featured Image” section on the lower right side of the post edit page (see screenshot below). After uploading the image, select "Use as featured image". When uploading an image, it automatically creates all the different sizes for you. For reference, featured images have a max width of 420px, but have an unlimited height.


Blog

To achieve the blog layout in the demo, simply create a category named "Blog" and add posts to that category. Navigate to the "menus" page and add the "Blog" category to the menu.

Home Page Welcome Message

To create a welcome message on the home page, create a page and select it on the "reading settings" page under the "static page" drop down menu (see screenshot below).

reading

Custom Background Image

Below each post and page edit box is a section called “Custom Post Options”. This is where you will find the ability to customize the background.

For category pages, you can paste the URL in the category description field (see below screenshot).

category

Navigation Menu

To create a menu, navigate to “Appearance” > “Menus” and create a new menu named “Main”. Assign this menu to the “Main Navigation Menu” in the drop down (see image below). For more information and instruction, watch the “Using WordPress 3.0 Menu System” video here: http://tinyurl.com/48dozan

Widgets

The widgets section is controlled from the "widgets" page (under "appearance"). The “Live Widgets” section controls the widgets. With the way this theme is setup, each widget must have a title to display properly.

Comments

Image Lightbox

This theme uses PrettyPhoto as a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto” to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

HTML Structure

All of the information within the main content area is nested within a div with class name of "boxStuff". The post content is nested inside the div with class name "post". The sidebar/widget content is within a div with an id of "widgetBox". The menu content is within a div with an id of "navigation".

If you would like to edit the color, font, or style of any elements in one of these sections, you would do the following:

.post a { color: #someColor; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

.boxStuff .post a { color: #someColor; }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

CSS

There is one CSS file called "Style.css" and another called "iphone.css". Both are separated into sections using:

/* -----HEADER STUFF----- */
some code

/* -----FOOTER STUFF----- */
some code

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

JavaScript

This theme imports the following JavaScript files:

  1. jQuery: jQuery is a JavaScript library that greatly reduces the amount of code that you must write.
  2. Custom Scripts: The custom.js file provides some custom scripts for jQuery.
  3. Google Custom Font APIs: This script allows the theme to utilize Google’s custom font directory provided by google.com/webfonts
  4. Backstretch: This jQuery plugin allows full size background images.
  5. PrettyPhoto: PrettyPhoto is a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto” to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

PSD Files

The main PSD file, “photopharm.psd”, utilizes folders for organizing content. If you’re trying to edit a specific section, just locate the proper folder to find the layer.

Social icons can be edited from the “social.psd” file.