“Photogra” Documentation by “Designesia”

---

“Photogra v1.5.1”

---

Table of Contents

1. Installation
2. Setting Up Homepage
   1. Create Slider Item
   2. Create Menu
   3. Homepage Fullscreen Video
3. Setting Up Portfolio
   1. Create Portfolio Item
4. Setting Up Gallery
   1. Create Gallery Page
   2. Create Gallery Item
   3. Attach "Gallery Categories" to Menu
5. Setting Up Blog
   1. Blog Format
6. Setting Up Contact Page
7. Custom Page Background
8. Theme Options
   1. General
   2. Styler
   3. Slider
   4. Gallery
   5. Contact Page
   6. Social Networks
9. Shortcodes
   1. Column
   2. Button
   3. Message Box
   4. Pullquotes & Blockquotes
   5. Images
   6. Video
10. CSS Files
11. Sources and Credits

A) Installation - top

To install this theme you must have a working version of Wordpress already installed. You can install this theme in two ways:

• FTP Upload: Using FTP software, first you must extract photogra.zip then upload all the files to /wp-content/themes/ folder on your server.
• Wordpress Upload: Navigate to Apperance > Add New Themes > Upload page. Select photogra.zip file. Click Install Now button to upload and install the theme.

Once theme uploaded you need to activate it. Navigate to Apperance > Themes and activate Photogra theme

B) Setting Up Homepage - top

After activating the theme, you'll get a blank home page that is ready to be filled. Follow the instructions below:

1. Create New Slider Item

1. To create new slider item, navigate to: Slider > Add New.
2. Type Slider title
3. Type Slider description in editor (optional)
4. Click Browse on Main picture to insert picture
5. Type Slider URL (optional)
6. Create/select slider Group
7. Click Publish. Done!

2. Create 'Home" Menu

Navigate to Appearance > Menu

1. Type Menu Name then click Save Menu
2. Select Primary Menu that you just created then click Save
3. Create custom links Label "Home", set URL to you website (http://yourdomain.com) then click Add to Menu
4. Click Save Menu
5. Now you will see 'Home' menu on left navigation

3. Create "Home Fullscreen Video"

Navigate to Page > Add New

1. Select template "Video Background Youtube/Video Background Vimeo" from combo box
2. Type Youtube/Vimeo video id in editor
3. Click Publish
4. Navigate to Settings > Reading > Front page displays > Select Static Page
5. Select page that you just created
6. Click Save Changes
7. Done

C) Setting Up Portfolio - top

Portfolio is the main part of this theme. You can add portfolio item & category as many as you wish. For each category you created, will be shown below of mainmenu.

1. Create New Portfolio Item

1. To create new portfolio item, navigate to: Portfolio > Add New.
2. Type image caption
3. Click Browse to insert picture
4. Create/select category
5. Click Publish. Done!

D) Setting Up Gallery - top

1. Create Gallery Page

1. Navigate to Pages > New
2. Select gallery template from Page Attributes
3. Select Gallery from the list (select if you want to show specific gallery on page)
4. Optional: Select visibiliy "Password Protected" to hide gallery content

To add new post, navigate to: Gallery > Add New.

2. Create New Gallery Item

1. To add new gallery item, navigate to: Gallery > Add New.
2. Type image caption
3. Click Browse on Main picture to insert picture
4. Click Browse on Thumbnail to insert thumbnail picture, choose Custom Image.
   
5. Select Category or create new one:
   
6. Click Publish. Done!

 

 

E) Setting Up Blog - top

To set up the Blog, you must create new page by navigate Pages > New. You can give any name to this page, then look at Page Attribute on right. Choose "Blog" from template combo box. Then add to menu by navigate: Appearance > Menus > select page name > click Add Menu

To add new post, navigate to: Post > Add New.

1. Blog Format

Standard	Standard blog format
Image	Image blog format. Insert image url in editor field
Video	Video blog format. Insert Youtube/Vimeo url in 'Video URL' field
Audio	Audio blog format. Insert MP3 and OGG file url in 'Audio Settings' field
Link	Link blog format. Insert url in 'Link' field
Quote	Quote blog format. Insert quote text url in editor field

 

 

F) Setting Up Contact Page - top

To set up the Contact Page, you must create new page by navigate Pages > New. You can give any name to this page, then look at Page Attribute on right. Choose "Contact" from template combo box. Please continue read on Theme Option section here.

G) Custom Page Background

You can use image, slider or video for page/post background.

1) Image Background

You can use image for page background by insert image from 'Static Page Background' under the editor.

2) Slider Background

You can use slider for page background by select 'Slider Page Background' under the editor. Make sure you have created at least one slider group to make it show in dropdown list.

3) Video Background

You can use video for page background by insert Youtube video id in 'Video Background Youtube' under the editor.

H) Theme Options - top

This theme comes with custom theme option panel. You can open it by navigate "Appearance > DE Panel".

1. General

• Custom Logo : You can upload your logo here.
• Website Desctiption : Your website description, will shown in meta
• Website Keywords : Your website keywords, will shown in meta
• Custom Header Script : Used to insert custom script on header (like Google Analytics, etc)
• Footer Text : This text will appear on footer.

2.Styler

styler is used to change the appearance of the theme. You can change the background, fonts and more. For more details you can try it immediately, try to change the settings then save.

3. Slider

• Slider Style (Home) : select slider style for homepage
• Slider Group Name : Type slider group name to show specify slider on homepage
• Slider Style (Projects) : select slider style for project page
• Random Load : Random load slider images
  
• Transition type : select transition type (1-8)
• Autoslide : set slider start automatically or not
• Slide Interval : length between transitions
• Transition Speed : speed of slide transitions
• Fit Always : Prevents the image from ever being cropped. Ignores minimum width and height.
• Show Play/Pause Button : to show/hide play & pause button on slider
• Show Number : to show/hide number on slider
• Show List : to show/hide list on slider
• Show Arrow : to show/hide arrow on slider
• Show Progress Bar : to show/hide progress bar on slider

4. Gallery

• Gallery Count : Total images per page of gallery
• Multiple Gallery Template : select template for multiple gallery
  

5. Contact Page

• Email send to : email destination for contact form
• Text : this text will appear above contact form
• Address : this will appear on left side under map
• Google Maps URL : enter google map url here

6. Social Networks

Insert you social page url into fields available.

 

I) Shortcodes - top

1. Column

Description	Shortcode
One half column	[one_half] your content here [/one_half]
One half column last	[one_half_last] your content here [/one_half_last]
One third column	[one_third] your content here [/one_third]
One third column last	[one_third_last] your content here [/one_third_last]
Two third column	[two_third] your content here [/two_third]
Two third column last	[two_third_last] your content here [/two_third_last]

2. Button

Description	Shortcode
simple button	[button title="Sample button" url="your url" target="_blank"]
rounded button	[button title="Sample button" url="your url" target="_blank" style="rounded"]
big button (you can set button size by add attribute size="")	[button title="Sample button" url="your url" target="_blank" style="rounded" size="big"]
bigger button	[button title="Sample button" url="your url" target="_blank" style="rounded" size="bigger"]
biggest button	[button title="Sample button" url="your url" target="_blank" style="rounded" size="biggest"]
bigger button with custom color (you can change color by replace bgcolor and textcolor)	[button title="Sample button" url="your url" target="_blank" style="rounded" size="bigger" bgcolor="#00CC99" textcolor="#FFFF00"]

3. Messages Box

Description	Shortcode
Success message	[msgbox type="success"] Yeah message here! [/msgbox]
Warning message	[msgbox type="warning"] Yeah message here! [/msgbox]
Error message	[msgbox type="error"] Yeah message here! [/msgbox]
Info message	[msgbox type="info"] Yeah message here! [/msgbox]

4. Pullquotes & Blockquotes

Description	Shortcode
Pullquote left	[pullquote align="left"]Your text goes here...[/pullquote]
Pullquote right	[pullquote align="right"]Your text goes here...[/pullquote]
Blockquote	[blockquote]Your text goes here...[/blockquote]

5. Images

Description	Shortcode
Left align image	<img src="image_url" class="pic-left" />
Right align image	<img src="image_url" class="pic-right" />
Center align image	[center]<img src="image_url" />[/center]

6. Video

Description	Shortcode
Embed Youtube video	[youtube url=video_url width=600 height=400]
Embed Vimeo video	[vimeo url=video_url width=600 height=400]

J) CSS Files - top

• style.css : located on theme folder: css/style.css. This is main css files.
• grid.css : located on theme folder: css/style.css. Used for responsive design.
• prettyPhoto.css : located on theme folder: css/prettyPhoto.css. This used for prettyPhoto plugin.

K) Sources & Credits - top

• supersized.3.2.7.min.js - http://www.buildinternet.com/project/supersized
• easing.js - http://archive.plugins.jquery.com/project/Easing
• ddsmoothmenu.js - http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
• jquery.prettyPhoto.js - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
• jquery.backstretch.min.js - http://srobbin.com/jquery-plugins/backstretch/
• jquery.tubular.1.0.js - http://www.seanmccambridge.com/tubular
• jquery.masonry.min.js - http://masonry.desandro.com

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.

Designesia

Go To Table of Contents