wordpress photolux theme documentation

Created: 25/11/2011By: Pexetohttp://pexeto.com/

Thank you for purchasing Photolux theme. If you have any questions that are

beyond the scope of this help file, please refer to the Support section. Thanks

so much!

“Photolux WordPress Theme” Documentation by “Pexeto” v.1.1.0

If you like this theme, please don't forget to rate it on the ThemeForest site. Thank you!

Table of Contents

1. For WordPress beginners

2. Installing and activating the theme

3. Useful instructions

a. Options page

b. Setting a custom field

c. Setting a thumbnail to a post

4. The header

a. Changing the logo

b. The menu

5. The footer

6. The sidebars

7. Nivo Slider

8. Template pages

a. Grid Gallery page

b. Full-width slideshow page

c. Index/Blog page

d. Featured page

e. Portfolio Showcase page

f. Quick/Easy Gallery page

g. Contact form page

h. The default page

9. Changing the theme style

10. Styled elements and shortcodes

a. Formatting buttons

b. Shortcodes

converted by Web2PDFConvert.com

http://www.mysticflutes.com/wp-content/themes/documentation/index.html

http://pexeto.com/

http://twitter.com/pexeto

http://themeforest.net/user/pexeto/portfolio

http://pexeto.com/

http://themeforest.net/user/pexeto/portfolio

http://www.web2pdfconvert.com?ref=PDF


11. Fonts

12. Translation

13. Plugins included

14. CSS files

15. JavaScript files

16. PhotoShop files and image resources

17. PHP files

18. Troubleshooting

19. Support

20. Updates

a. Version 1.1.0

Note: If you have any questions that are beyond the scope of this help file, please refer to the Support section.

1. For WordPress beginners

Although building a website with WordPress is significantly much easier than coding it by yourself, if you are a beginner, even working with

WordPress may look hard for you. That's why, in this section we will provide some useful links and also will explain how to get oriented in

the documentation and what pattern to follow when building your website with our theme.

WORKING WITH WORDPRESS - USEFUL LINKS

WP101 Basics Training - the perfect beginning spot for those just getting started with WordPress. The video tutorials providedare very helpful to easily understand how WordPress works.

The WordPress Codex - the official WordPress manual containing lots of information and tutorials about working withWordPress.

WORKING WITH THE THEME

Once you have some basic WordPress knowledge, you are ready to go with setting the theme. Here are some example steps about how

you can do this:

1. Install and activate the theme - read about how to do this in the Installing and activating the theme section.Having problems with installing the theme? » Refer to the "Fail to install the theme" subsection of the Troubleshooting section.

2. Change your logo - learn how to do this in the Changing the logo section

3. Create your basic menu - during the process of setting your theme, you will be changing your menu links all the time. However,it is good to start with having the main menu set. Learn how to set your menu in the The menu section.

4. Start with creating your content

You can create all the content by creating your pages one by one. Here are some examples of what steps to follow when

creating different pages:

You need a Gallery page to set as home page (in the same way as on the demo):1. Go to Template pages » Grid Gallery Page section - in this section you can read about how to create such a page and all

the settings you can do about this page template. You can read about how to create the gallery items and all the optionsthat you can set to them.

2. After you set your page, go to the Menus section and add it to your menu so it can be easily accessible.

You need a Blog page:1. Go to Template pages » Index/Blog page section to learn how to create a blog page, how to create posts to it and all the

settings you can do for this page

2. You need to set a slider for the blog? » Go to the Nivo Slider section to read how to create a slider. After you have your


http://wp.tutsplus.com/sessions/wp101-basix-training/

http://codex.wordpress.org/Main_Page



back to top

slider created and populated with images, you have to select the slider you have created (how to set the slider isexplained in both the slider's section and the blog/index page sections)

3. You need a separate blog sidebar? » Go to the The sidebars section to learn how to create additional sidebars and howto add widgets to them. After you have created your sidebar, go back to the Index/Blog page section to learn how to setthe sidebar you have created to your blog page.

Basically, these are the steps you need to follow - when you need to create a page, just go to its relevant subsection of the

Template pages section and read about how to create it and what settings you can do for the page. The main key about

understanding how the theme works is to read the documentation we have provided carefully, as we have explained everything

you need to know about the theme in here.

5. Set your footer content - learn how to do this in the The footer section

6. Once you follow all these steps and have the basic theme setup, you can also check the rest of the sections of thisdocumentation to read what other features our theme provides.

We hope you will enjoy working with the theme!

2. Installing and activating the theme

There are 2 main ways to upload the theme:

1. Via the built in WordPress theme uploader

Below you can read the instructions about installing a theme via the WordPress uploader, but you can also watch the "Installinga Pexeto Theme via WordPress Uploader" video here

First you have to unzip the download file and find the zip file called "photolux_vx.x" (x.x-the version of the theme). After this

you have to go in the admin panel » Appearance » Themes, click on the Install Themes tab and in this section in the top

there is a link "Upload". After you click the "Upload" link, a new page will be opened where you will be asked to find the .zip file

on your local file system.

Note: Some servers have limited access settings and wouldn't allow uploading the theme trough the admin - in thesecase you have to upload the theme via FTP.

2. Via FTP client

Below you can read the instructions about installing a theme via FTP, but you can also watch the "Installing a Pexeto Theme viaFTP" video here

If you know the FTP login details of the server where your site is hosted and you have a FTP client installed (such as FileZilla),

you might consider using this way of uploading your theme. First you have to unzip the download file, find the zip file called

"Photolux_vx.x", unzip it and upload the folder to the main WordPress installation folder » wp-content » themes. Please note

that if you prefer this way of installation, you have to make sure that the main files of the theme are contained just within one

folder of the themes folder. The right way to locate your root theme files is for example themes/photolux but not

themes/photolux/photolux.

After you have uploaded the theme to the server you will need to activate it. In order to activate this theme you have to go to the admin

panel » Appearance » Themes. In this section you should see the theme with a title Photolux by Pexeto. Just click on Activate button

and your theme should get activated.

Miminal Theme Requirements:-WordPress v.3.0 or higher-PHP v.5.0 or higher

Importing the demo contentIf you would like to import the demo content and start editing the theme from the created content rather than from scratch, you need to

import the demo_exported.xml file that is included with the download folder. You can do this by going to the WordPress admin panel ->

Tools -> Import -> Select WordPress, find the demo_exported.xml file from your local file system and upload it.Please note that not

all the settings are saved with the demo exported data, so it is always recommended to set your theme from scratch rather than installing

the demo content and editing it.

3. Useful instructions

a. Options page


http://support.pexeto.com/topic/video-4

http://support.pexeto.com/topic/video-4



When you activate this theme, an options page is created in order to help you make the theme settings much easier. This page is located

in the admin panel » Photolux » Photolux Options.

b. Setting a custom field

Many times in this documentation you will be told that you have to set a custom field for a page or post. There are some custom fields

that have been created for this theme. Those custom fields are located just below the main content area of the page/post when opened in

"edit" mode. For the portfolio items the section is called "Photolux PORTFOLIO ITEM SETTINGS" and for the pages the section is called

"Photolux PAGE SETTINGS".

c. Setting a thumbnail to the post

In order to set a thumbnail (featured image) to a post/page, when creating/editing your post/page in the bottom of the right sidebar you

will see a link "Featured Image":

If you click on this link, a window will be opened where you can choose the image. When you select the desired image, you have to click




back to top

on the "Use as featured image" link.

4. The header

a. Changing the logo

You can either use your own existing logo image or edit the included logo PSD file. If you choose the second option then the file you need

to edit is called logo.psd (located within the photoshop_files folder) - this file contains both dark and white skins logos. The font that is

used for the "Photolux" text is called "PT Sans Narrow" (you can download it for free from here) and the font used for the "photography

studio" is called "CAC Champagne" (can be downloaded for free from here).

Changing the logo image

You have to go to the options setting page » Styles » Logo and upload (or insert the image URL) in the Logo Image section. In thissection you can also set your logo image width and height:

b. The menu

In WordPress version 3.0 a very nice feature for menu management has been added. Now you can very easily create custom menus with

a great flexibility. In order to set the main menu in the header section you have to follow these steps:

1. Go to Appearance » Menus and create a new menu. After you create the menu, you can add Page, Category and custom linksfrom the left.


http://www.fontsquirrel.com/fonts/PT-Sans

http://www.fontsquirrel.com/fonts/CAC-Champagne



back to top

2. After that in the "Photolux Theme Main Menu" field of the Theme Locations section you have to select the menu that youhave created.

5. The footer

The footer consists of three sections:

Sociable icons section

Custom footer menu

Copyright text section

SETTING THE SOCIAL ICONS

The theme provides an option to set sociable icons in the bottom of the widgetized footer, just below the four content columns. To set the

icons, you have to go to Photolux Options » General » Sociable Icons section.

First, you have to make sure that the "Display sociable icons is footer" field is set to "ON". After that, you can add the icons you like into

the "Add a sociable icon to the footer" field:




back to top

1. Select the icon

2. Insert the link of the icon in the "Sociable Link" field

3. Insert a hover title (optional) - this title will be displayed when you hover the icon with the mouse

4. Click on the "Add Icon" field to add the icon

Note: Don't forget to click on the "Save Changes" button after you finish setting the Sociable Icons section.

SETTING THE MENU

To set the footer menu, you have to go to Appearance » Menus and create the footer menu first. After that, you have to select the name

of the menu you have created in the "Photolux Theme Footer Menu" field of the "Theme Locations" section:

CHANGING THE COPYRIGHT TEXT

You can change the Copyright text in the Photolux Options » Translation » Other section.

6. The sidebars

This theme supports multiple sidebars and they are all dynamic. This means that you can insert whatever widgets you like on them.

There is one default sidebar that goes to each of the pages. If you would like to have more sidebars than the default one, then you can

create your new sidebars in options setting page » General » Sidebars section:




back to top

To customize your sidebars you have to go in the admin panel » Appearance » Widgets. There you should see your sidebars on the

right part of the page. Now you can drag and drop widgets from the left into your sidebars and that's it!

Here is an example of a sidebar:

7. Nivo Slider

The Nivo Slider looks like this:

ADDING IMAGES

In order to add images to this slider you have to go to the Photolux » Nivo Slider section. All you have to do is to upload the selected

image (or add its URL), link of the image (links can be set to the images, so that when the user clicks on the image to be redirected- this

feature is optional) and description (also optional) and press the "ADD" button. After that the image is automatically saved for the slider.

CHANGING THE IMAGE ORDER




Once you add the images, you can change their order by dragging and dropping the image container to the desired place. After you

change their order, in order the new order to be saved, you have to click on the "Save Order" button that would appear right above the

images:

CREATING ADDITIONAL NIVO SLIDERS

If you would like to add a new slider, you have to click on the "Add new nivo slider" button located in the top section of the page and insert

its name in the dialog box that will be displayed. After that a section for the additional slider images will be created so that you can set the

new images to it.

CHANGING SLIDER OPTIONS

You can change the default slider options such as setting automatic image resizing and changing slider speed in the Photolux Options »

Sliders » Nivo Slider section.

Optimal image size: 980px × 400px

SETTING A SLIDER TO YOUR PAGE

The way you set the slider depends on the page you would like to set it to:

1. Blog page - to set the slider to your blog page you have to go to Photolux Options » Page Settings » Blog and select your sliderfrom the "Header" select field.2. Standard page - for all other (non-blog) pages, you can select the slider to display in the "Header" custom field that you will seedisplayed below the main content area when the page is opened in edit mode:




back to top

8. Template Pages

a. Grid Gallery Page

The Grid Gallery page is the one that you can see on the theme demo as front page:

MAIN SETUP INSTRUCTIONS

In this section the main steps you would need to accomplish in order to set this page are explained, more options and settings are

described in the "Other Gallery Page Options" section below.

Setting The Page:1. Create a new page (Page » Add New)

2. Select "Grid Gallery" in the "Template" field (located in the right sidebar of the edit page section

3. If you would like to make this page a front page (to be opened by default when the site is visited) go to Settings » Reading »Front page displays » Select "A static page" and select the page that you have just created in the Front Page list:

Creating the portfolio/gallery items:




Each of the images in the gallery represents a single Portfolio Item. For each of the portfolio items:1. Create a new item in "Portfolio" » Add New section.

2. Set the title in the "Title" field

3. To set the image you have two options:- set the image into the "Preview Image URL" field of the portfolio item - the image will be automatically cropped by theresizing script- set the image into the "Thumbnail Image URL" field of the portfolio item - the image will be displayed in its original size

4. Set categories to the item - the item categories are displayed below the image, and additonally the gallery items can befiltered by category if the category filter is enabled. You can create new categories in the "Portfolio" » "Portfolio Categories"section and you can set the categories of the item in the "Portfolio Categories" section located in the right sidebar of the itempage.

5. Select a clicking action of the item in the "When clicked on the image open" custom field of the portfolio item:

Here is an explanation for each of the options:Preview image in lightbox - will open a lightbox with the image set in the "Preview image URL" field:

You can also include a description below the lightbox image - you can insert the descruption within the "ItemDescription" custom field of the item.

If you would like to add more images within the lightbox, additionally to the default preview image, you can do this by

adding the images as attachments to the portfolio item. To do this, click on the "Add an image" button, located above the

main content area:




In the window that will be opened, upload as many images as you like within the "From Computer" tab and once all of

them are uploaded, click on the "Save Changes" button:

The content of the item as slider - will slide the whole gallery to the left and display a section containing a sectionwith the item data and an image slider section:

First is displayed a content section, containing the item categories, title and the content of the item (can be set in the

main content text area). This content section can be disabled in the "Show portfolio content on slder preview section"

custom field of the item.

After that comes the image that is set into the "Preview Image URL" field (if set).

If you would like to add more images, additionally to the default preview image, you can do this by adding the images as

attachments to the portfolio item. To do this, click on the "Add an image" button, located above the main content area:

In the window that will be opened, upload as many images as you like within the "From Computer" tab and once all of

them are uploaded, click on the "Save Changes" button:

The content of the item in new page - a standard page will be opened containing all the content you have insertedinto the main content area of the item




Play Video - when clicked on the thumbnail a video will be played. For the video link you have to set the custom fieldCustom Link/Video URL by inserting the link in there.

Here are some examples of inserting videos:

YouTube video:http://www.youtube.com/watch?v=geplBr2fcZc

Vimeo:http://vimeo.com/11326568

Please note that a vimeo link containing www is not valid (such as http://www.vimeo.com/11326568)

Flash Alone:

Please note that you need to insert width and height of the video

Custom Link- when clicked on the thumbnail the user will be redirected to a custom link that you have set in the customfield Custom Link/Video URL of the item.

Do Nothting - nothing happens when you click on the thumbnail image.

OTHER GALLERY PAGE OPTIONS

Select a category whose items will be displayed - you can do this in the "Display portfolio items from categories" customfield of the page. In this way you can create multiple gallery pages displaying different categores of items.

Set the order of the portfolio items - you can select how the items will be ordered in the "Portfolio item order" customfield of the page. If you select "By Date" the last created item will be displayed first. If you select by "By Custom Order" you willhave to set the order field of each of the items - the items with the smaller order number will be displayed first.

Show/hide the category filter - you can disable/enable the category filter within the "Show portfolio category filter"custom field of the page.

Show/hide item info below the thumbnails - you can do this within the "Show item info" custom field of the page. If youselect to hide it, the title and categories will be hidden - only the thumbnails will be displayed.

Set the number of items to be displayed per loading - you can do this in the "Number of portfolio items to show perload/page" custom field of the page. This number sets how many items will be initially loaded and how many items will beadditionally loaded on every "Load More" button click.

Change the default image width - you can do this in the "Image width" custom field of the page.

Enable the "Black & White" image effect - you can do this in the "Black/white image effect" custom field of the page.

b. Full-width slideshow page

The full width slideshow page contains an image fader that is displayed in full width page size.

CREATING THE PAGE

In order to make one page a full-width slideshow page you have to select the Template for this page to be Full width slideshow

If you would like to make this page a front page (to be opened by default when the site is visited) go to Settings » Reading » Front page

displays » Select "A static page" and select the page that you have just created in the Front Page list.

ADDING THE IMAGES

The images that are displayed on this page aere the images, added as attachments to the page. To add the images, click on the "Add an

image" button, located above the main content area:

In the window that will be opened, upload as many images as you like within the "From Computer" tab and once all of them are uploaded,

click on the "Save Changes" button:




SLIDESHOW OPTIONS

All the slideshow settings can be changed in the "Slder Settings" » "Full-width slider" section of the Options panel. In this section you can

choose whether to hide the menu and footer sections, set automatic thumbnail cropping and change some other animation settings.

c. Index/Blog page

Index page is the default home page that is opened when first installing the theme. This page actually is a blog page.

Note: All the settings for the Blog page can be set in the options setting » Pages » Blog section.

There are 2 different ways of using this template:

1. As a home/front page- the blog will be opened by default on your site. To set the blog like this, you have to go to Settings »Reading and select "Your latest posts" in the "Front page displays":

2. As a normal, non-home page. In order to do this you have to create a new page, lets say that its name is "Blog". After this youhave to go in the Admin Panel » Settings » Reading and you have to select "A static page" option. Below this field you have toselect the page which will be your home page in the "Front page" field and you have to select the name of the page that youhave just created (in our case "Blog") in the field "Posts page". Now your Blog page will contain the latest posts:

EXCLUDING CATEGORIES FROM THE BLOG:

In order to exclude categories from the blog you have to go to the options setting page in the section Pages » Blog » Excludecategories from blog. In this section you have to check the names of the categories that you want to be excluded.

DEFINING THE NUMBER OF POSTS ON THE BLOG:

In order to define the number of posts per page that will be shown on the blog you have to go to the options setting page in the section

Pages » Blog » Number of posts per page and you have to edit the value of this field. Default is set to 5.




SETTING A SLIDER/STATIC IMAGE FOR THE PAGE:

In order to set a slider you have to go in the options setting page in the section Pages » Blog » Header. In this field you can select

between Nivo Slider/Fader, Static Header Image and None.

-If a slider is selected, the default slider of the selected slider type will be automatically assigned to the blog page. If you have created

additional sliders, their name will be displayed in the relevant slider section of the drop-down list.

-If Static Header Image selected, you have to insert its URL into the the Static Image URL field below.

SELECTING A LAYOUT FOR THE PAGE

For the blog page you can select the layout to be Right Sidebar, Left Sidebar or Full Width. You can do this in the Page Layout section.

This setting will affect also the blog post, archive and search layouts.

THE BLOG SIDEBAR:

By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the options setting

page » General » Sidebars and after that you can select the created sidebar in the field Sidebar in the options setting page » Pages »

Blog » section. To customize it you have to go to the Appearance » Widgets and find the selected sidebar. You can drag and drop widgets

from the left into it.

SETTING ADVANCED BLOG PAGINATION

In order to have advanced pagination enabled on your blog page (as on the screenshot above) you need to install the WP-Pagenavi plugin.

You can read more about how to do it the section Plugins included.

THE BLOG POSTS:

The blog posts look like this:




SETTING A THUMBNAIL/IMAGE TO THE BLOG POSTS:

You can read here how to set thumbnails to your blog posts.

HIDING PART OF THE CONTENT OF THE POST WITH THE "READ MORE" LINK:

Just before the text that you want to be hidden you have to click on the "Insert more tag" button (Alt+Shift+T):

ENABLING THREADED COMMENTS (WITH REPLY FUNCTIONALITY):

In order to enable threaded comments, you have to go to Settings » Discussion and check the field "Enable threaded (nested)

comments x levels deep"

d. Featured page

The main purpose of the Featured page template is to show some featured blog posts. The content layout looks like this:




In order to make one page a featured posts page you have to select the Template for this page to be Featured page

Above the Featured Posts section you can insert some intro content by inserting it in the main content area of the page.

SELECTING THE FEATURED CATEGORY

All the posts that that are shown below the main page content are posts from one category. You can select the category whose posts will

be displayed on the page in the "Display blog posts from category" custom field of the page.

SETTING THE POST CONTENT

On this page template only the post excerpts are displayed. By default, WordPress would cut the first part of the post content to provide

an excerpt, however if you prefer to set your own excerpt text, you can do it in the Excerpt field that is located below the main content

area of the post (when opened in edit mode).


In order to set a slider, you have to set the custom field Header on the page. In this field you can select between Nivo Slider/Fader, Static

Header Image and None.



-If Static Header Image has been selected, you can set the static image by setting the image as a Featured one. Here is explained how to

do this.

SETTING THE PAGE LAYOUT

For this page you can select the layout to be Right Sidebar, Left Sidebar or Full Width. You can do this by setting the custom field PageLayout:




THE SIDEBAR

By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the PhotoluxOptions » General » Sidebars and after that you can set the custom field Sidebar and select the sidebar that you have just created.

For more information you can refer to the The SIdebars section.

e. Portfolio Showcase page

The main structure of the portfolio page looks like this:

ORGANIZATION OF THE PAGE

To make one page a portfolio page you have to select the Template for this page to be Portfolio Showcase.

Every single portfolio item (image) is added by creating a portfolio item in the section "Portfolio" » "Add new".

FOR THE PORTFOLIO SHOWCASE PAGE YOU CAN DO THE FOLLOWING SETTINGS

1. You can select a portfolio category whose items to be displayed there by setting the custom field Display items fromcategories in the page. If "All Categories" has been selected, all the portfolio items that you have created will be displayedthere. You can read about creating porfolio items in the next section below.

2. You can select whether the items to be ordered by the date they have been created or by custom order by setting the customfield Portfolio item order in the page.

3. You can set the number of thumbnails per page displayed on the right by setting the custom field Number of posts per pagein the page.

4. You can select a slider on the portfolio page by setting the custom field Slider.

5. You can show/hide the portfolio item category filter by setting the custom field Show Portfolio Categories in the page.

The purpose of this filter is to display the portfolio categories and filter the items by the category that is set to them. If in the

field Display items from categories above "All Categories" is selected, then all the portfolio categories will be displayed. If a

category is selected there, only this category and its subcategories will be displayed in this filter.

CREATING PORTFOLIO ITEMS:




Creating Portfolio items can be accomplished in the Portfolio section » Add New.

Here are the settings that you can do to each of the portfolio items:

1. Set the images » Each portfolio item contains 2 images- a small thumbnail and a bigger preview image which is shown whenclicking on the small image above the main content area. 2.1. To set the bigger (preview) image or video you have to set the custom field in your post called Preview Image URL tocontain the full path of the image. For example http://domain.com/img1_preview.jpg 2.2. By default the theme will create the small thumbnail by using the bigger (preview) image. However if you prefer to useyour own thumbnail images you can set the custom field called Thumbnail URL and set its value to be the full path of thecustom thumbnail image. For example http://domain.com/img1.jpg. The optimal size of the images is 65px x 47px. 2.3.If you leave the Thumbnail URL field empty, you can select how the smaller thumbnail image will be cropped from the largerimage in the "Crop Image From" field:

2. You can set the content of the portfolio item in the main content area.

3. You can select whether to display the Portfolio item title in the main content/preview area in the "Show portfolio title onpreview page" field.

4. You can select whether to display the big preview image in the main content/preview area in the "Show preview image onpreview page" field.

5. You can set an order number to your item if in the portfolio page the Portfolio item order field is set to "Custom Order". Youcan set the order number in the Attributes section of the right sidebar:

f. Quick/Easy Gallery page

This is the default WordPress image gallery - the purpose of this gallery is to insert multiple images at once - you can very quickly create

multiple galleries just for several minutes. Here is how the gallery looks like:

In order to create a quick gallery you have to:




1. Create a new page (you don't have to set a page template to it)

2. Click on the "Add an image" button above the main content area:

3. Upload the images you would like to be displayed on the gallery within the "From Computer" tab.

4. When you click on the "Show" link next to each image you can set some texts to it. The text that you enter in the Captionsection will be displayed as a caption below the image. The value of the Alternate Text field will be displayed in the lightbox asa title and the value of the Title field will be displayed in the lightbox below the image.When you are ready with editing the images, click on the "Save Changes" button.

5. A "Gallery" tab will be displayed, click on it:

6. Scroll down to the "Gallery Settings" section:

In the "Link thumbnails to" select "Image File" and in the "Gallery Columns" field select 5 if the page is full width or 3 if thepage contains a sidebar.Click on the "Insert Gallery" button.

7. If you would like to change the default image size, you can do it in Settings » Media » Thumbnail Size field. Please note that ifyou change the default size, you would have to reupload the images again, as WordPress automatically crops the imagesduring image upload only.

g. Contact Form page

The contact form page looks like this:




This page contains an AJAX contact form which visitors of your website can use to contact you.

To make one page contain a contact form you have to do some settings. When you create (or edit) your page, you should find the field

Template and in it to choose the Contact form page option. After that immediately your page will contain a contact form.

To set a text in the contact page, just insert it as a content of the page.

SETTING THE EMAIL ADDRESS TO WHICH TO SEND THE EMAIL

To set the email address, you have to go to the options setting page and in the section Pages » Contact find the field Email to whichto send contact form message in. In this field you have to insert your email address. As you can see in this section there are some other fields that you can edit. I have provided this feature in case that you need to translateyour site or just don't like the text that is output.

SETTING THE SIDEBAR

By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the options setting

page » General » Sidebars and after that you can set the custom field Sidebar and select the sidebar that you have just created. To

customize it you have to go to the Appearance » Widgets and find the selected sidebar. You can drag and drop widgets from the left into

it.












do this.

h. The Default page

This is the page template that is assigned by default when a page is created. By default this page template uses the Default Sidebar. If

you would like to use another sidebar, you can create one in the options setting page » General » Sidebars and after that you can set the

custom field Sidebar and select the sidebar that you have just created. To customize it you have to go to the Appearance » Widgets and

find the selected sidebar. You can drag and drop widgets from the left into it.









do this.

9. Changing the theme style

All the style settings can be done in the options setting page » Styles

First, you can choose the main skin within the "Theme Skin" field:

After you select your main skin, you can do some additional style modifications:

CHANGING THE BACKGROUND COLOR:

You can select a background color within the predefined colors we have provided from the Predefined Background Colors field.

If you would like to use another custom color, rather than one of the predefined colors, you can select your color in the CustomBackground Color field below:




back to top

CHANGING THE BACKGROUND IMAGE/PATTERN:

If you would like to use a background pattern for the theme, rather than the default one, you can choose one from the BackgroundPattern section.

If you would like to use your own custom pattern, you can upload it within the "Custom Background Pattern" field below.

If you would like to use a full width non-repeatable image, you can upload one within the "Full Width Background Image" field. We

recommend that the image is neither too big or too small, as big images would take longer time to load and smaller images wouldn't look

nice resized on higer resolutions - a medium sized image would be around 1000 pixels wide.

These are the main style settings that you can do on the theme. In the Styles section there are some other custom settings that you might

need to change such as text size, different sections' colors, etc.

10. Styled elements and shortcodes

a. Formatting Buttons

There are buttons for almost all of the styled elements that the theme provides. These buttons allow you to more easily insert styled

elements and also you are able to see how they will look from the editor.

INSERTING LIGHBOX IMAGE

One way to insert image lightbox is to use the "Lightbox Image" button. Another way is to insert the image into the post (via the "Add an

Image" button), after that click on the image » an Edit Image button will be displayed. You have to click on this button, and in the window

that is opened you have to click on the "Advanced Settings" section. In this section, in the field "Link rel" you have to insert the word

lightbox. This automatically will set the lightbox functionality to the image.

SETTING FRAME TO AN IMAGE

The main way for setting an image with shadow is to do it by using the "Image with shadow" formatting button. Another way to do it is to

insert the image into the post (via the "Add an Image" button), after that click on the image » an Edit Image button will be displayed. You




have to click on this button, and in the window that is opened you have to click on the "Advanced Settings" section. In this section, in the

field "CSS Class" you have to add a space and the class name img-frame.

b. Shortcodes

Some elements, such as the jQuery tabs, can be displayed by using shortcodes - in order to use a shortcode you just have to paste its

code into the content text area of the page/post.

Available shortcodes:

TABS

The jQuery tabs look like this:

view plain copy to clipboard print ?

01. [tabs titles="Title One, Tab Two, Tab Three" width="small"][pane]Tab One Content[/pane] [pane]Tab Two Content[/pane] [pane]Tab Three Content[/pane][/tabs]

As you can see, in the tabs element you can specify the width of the tab title. The available options are "small", "medium" and "big".

Note:Please make sure that all the shortcode tags are on the same line, but separated with at least a space, for example:


01. ... [pane]Tab One Content[/pane] [pane]Tab Two Content[/pane] ...

ACCORDION

The Accordion looks like this:


01. [accordion][apane title="First Pane"]Pane One Content[/apane] [apane title="Second Pane"]Pane Two Content[/apane] [apane title

Note:Please make sure that all the shortcode tags are on the same line, but separated with at least a space, for example:


01. ... [apane]Tab One Content[/apane] [apane]Tab Two Content[/apane] ...

SIDEBAR CONTACT FORM

The sidebar contact form looks like this:




back to top

You can insert this contact form in the sidebar or footer section just by using the WordPress Text widget and inserting the following

shortcode into it:


01. [contactform]

You can set the email to which to send the messages in the Photolux Options » Page Settings » Contact section.

11. Fonts

All the fonts settings can be done in the options setting » Style settings » Fonts section. By default the theme uses a Google Font - "PT

Sans Narrow".

USING CUFON FONT REPLACEMENT

You can enable Cufon font replacement by setting "ON" in the "Enable Cufon for headings" field. When Cufon is enabled the selected font

will be set for all the main headings, and for the headings this font will be used with higher priority than any font settings set in the below

section or within the style.css file. With Cufon enabled, you can still use Google or standard fonts for the rest of the sections.

If Cufon enabled, you can select either one of the fonts that the theme goes with (in the "Heading Cufon Font" field) or upload your own

font within the "Custom Heading Font" field. The font to upload should be in JavaScript format and you can generate this JavaScript file on

the following page: http://cufon.shoqolate.com/generate/

USING GOOGLE FONTS

In order to use Google Fonts, the field "Enable Google Fonts" should be set to "ON". As mentioned above, the theme already uses a font

from the Google Fonts API. If you would like to remove this font, and use another ones, you can remove the old font by clicking on the red

X button of their container and you can add the new ones in the text area provided within the "Add Google Font". When adding the new

font, please make sure that you insert the URL of the font only, not the whole embed link. For example, if you would like to insert the

Nobile font, you have to click on the "Quick Use" button:

In the new window that will be opened, select the settings according your needs and from the embed sectuion you have to copy only the

value that is contained within the href property:


http://www.google.com/webfonts

http://cufon.shoqolate.com/generate/

http://www.google.com/webfonts/family?family=Nobile&subset=latin



back to top

After you add the font URL in the "Add Google Font" field, you have to set the theme use this font. You can do this, by setting its font name

in the "Headings font family" or "Body text font family" field, depending where you would like to use this font. For example, if you would

like to add the font for the headings, you first have to get its font name from the Google page:

and insert its name within the "Headings font family" section:

The other fonts, that go after this font name are the fonts that will be used, in case there is some problem with loading the font from

Google.

Note:In order to use a Google font for the headings, please make sure that the Cufon font replacement is disabled.

Note:If you prefer not to use Google fonts, it would be better to disable them within the "Enable Google Fonts" field, so that the fontfiles are not loaded unnecessary.

12. Translation

For this theme we have provided the possibility to easily translate/change the built-in words from the admin panel, without having to edit

the PHP files. You can do this in the options setting in the Translation section. For the contact form you have to edit the fields in the

Pages » Contact section.

SETTING A MULTI-LANGUAGE INSTALLATION

If your WordPress installation supports more than one language, you can set the theme built in words change depending on the selected

language. In order to do this you have to follow the following steps:




back to top

back to top

1. In options setting » Translation » Settings select "ON" for the "Enable Translation" field.

2. In the same section select the locale for the default language. If your default langauge is English, you don't have to change thisfield. If, for example, you would like to change the default language to German, in this field you have to insert de_DE. Here youcan see some examples of locales. For the default installation language, the theme will use the words that are set in theoptions setting » Translation section.

3. Create .mo files for the additional languagesIn the lang folder within the main theme folder you will find a file called default.po. You have to open this file with a programthat can generate .mo files, such as PoEdit. Once you open it, you can insert the words in the additional language. Here is anexample, with the file opened with PoEdit and the meanings of the words inserted into English:

In the same way you can insert the translations in the additional language. Once you save the document, a .mo file will begenerated in the directory you specify. You have to rename this .mo file to the locale of the language used. For example, if thislanguage is French, the name of the file should be fr_FR.mo. After that, you have to insert this .mo file in the lang directory ofthe theme.

13. Plugins included

The theme goes with some additional plugins included:

Pexeto's portfolio posts loader - its purpose is to display the latest portfolio thumbnails in the sidebar

WP PageNavi - displays an advanced blog pagination - downloaded from http://wordpress.org/extend/plugins/wp-pagenavi/

Simple Google Map - displays a Google Map in the sidebar - downloaded from http://wordpress.org/extend/plugins/simple-google-map/

All the widgets are located within the plugins folder of the download folder. In order to activate them, you have to go to the WordPress

admin panel -> Plugins -> Add New -> click on the Upload link and find the desired plugin file on your local file system. After the plugin

has been uploaded successfully you need to click on the Activate link. For the WP PageNavi plugin only activation is needed. For the

other two you need to go to the Widgets section and drag and drop them to the desired sidebar.

Note:The contact form that you see on the demo in the footer section is not added via widget, but with a shortcode. It is explained how

to add a contact form in the Shortcodes section above.

14. CSS Files


http://codex.wordpress.org/WordPress_in_Your_Language

http://www.poedit.net/download.php

http://wordpress.org/extend/plugins/wp-pagenavi/

http://wordpress.org/extend/plugins/simple-google-map/



back to top

The theme contains the following CSS files:

style.css - the main CSS file containing the styles for the default dark skin

white-skin.css - containing the styles for the white skin

style_ie7.css - for Internet Explorer 7 and older versions

prettyPhoto.css - style for the PrettyPhoto plugin

nivo-slider.css- style for the Nivo slider

The first file (style.css) contains all of the specific stylings for pages. The file is separated into sections:

1. CSS Restart

2. Basic Text and Heading Styles

3. Basic Document Styling

4. Sliders

5. Content

6. Portfolio

7. Sidebar

8. Footer

9. Widgets and Page Templates

10. Elements

11. Others

12. Updates

For each of the main parts of the website there are comments. For example, for the footer the comments look like this:


01. 02. /*-------------------- FOOTER --------------------*/ 03. --footer styles here-- 04.

Note: If you need to do some CSS changes, it is recommended to add the new styles into the Photolux Options » Styles » AdditionalStyles section, rather than editing the style.css file itself, as these changes will be saved trough the updates of the theme.

15. Javascript files

The theme contains the following JavaScript files:

grid-gallery.js- this file contains the Grid Gallery page functionality. This file also includes the following third party libraries: - jQuery imagesLoaded plugin - downloaded from http://github.com/desandro/imagesloaded - Mousewheel - downloaded from http://brandonaaron.net/code/mousewheel/docs - mwheelintent - downloaded from http://www.protofunc.com/scripts/jquery/mwheelIntent/ - jScrollPane - downloaded from http://jscrollpane.kelvinluck.com/

main.js- this is the main script for the theme. It uses some simple functions used in the website like validation and makingAJAX request for sending email. Also, in order to decrease the number of JavaScript file requests, it contains the code fromanother JavaScript libraries/plugins: - jQuery Tools - downloaded from http://flowplayer.org/tools/download/index.html - Pretty Photo - this ithe jQuery plugin for lightbox effect for the images on the portfolio page- downloaded fromhttp://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/#download - jQuery Easing - for the animation transitions- downloaded from http://gsgd.co.uk/sandbox/jquery/easing/ - hoverIntent - downloaded from http://cherne.net/brian/resources/jquery.hoverIntent.html

desaturate.js - contains the "Black & White" image effect functionality. This file includes the Pixasic library - downloaded fromhttp://www.pixastic.com/lib/download/

portfolio-showcase.js- this is the script that contains the portfolio showcase functionality

jquery.nivo.slider.pack.js- the Nivo slider- downloaded from http://nivo.dev7studios.com

ajaxupload.js- script for the image uploading- downloaded from http://valums.com/ajax-upload/

colorpicker.js - script for the color picker- downloaded from http://eyecon.ro/colorpicker/#download

jquery-ui.js- jQuery UI - downloaded from http://jqueryui.com/

jquery.cookie.js - jQuery Cookie - downloaded from http://plugins.jquery.com/project/Cookie


http://github.com/desandro/imagesloaded

http://brandonaaron.net/code/mousewheel/docs

http://www.protofunc.com/scripts/jquery/mwheelIntent/

http://jscrollpane.kelvinluck.com/

http://flowplayer.org/tools/download/index.html

http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/#download

http://gsgd.co.uk/sandbox/jquery/easing/

http://cherne.net/brian/resources/jquery.hoverIntent.html

http://www.pixastic.com/lib/download/

http://nivo.dev7studios.com

http://valums.com/ajax-upload/

http://eyecon.ro/colorpicker/#download

http://jqueryui.com/

http://plugins.jquery.com/project/Cookie



back to top

back to top

back to top

Font files - all fonts have been downloaded from http://www.fontsquirrel.com/ and have been generated from


andika.js

caviar_dreams.js

charis_sil.js

chunk_five.js

comfortaa.js

droid_serif.js

kingthings_exeter.js

luxy_sans.js

sling.js

vegur.js

16. PhotoShop files and image resources

The theme comes with PhotoShop files included - they are located within the photoshop_files folder of the main downloaded zip file.

Every PSD file has a clear structure and is organised in groups with well named layers.

Special thanks to all the great graphic resorces to:

Social Media Icons http://icondock.com/free/vector-social-media-icons

Pixel patterns http://naomiatkinsonproducts.com/

Repeatable Pixel Patterns http://www.premiumpixels.com/20-repeatable-pixel-patterns/

Tango icons: http://tango.freedesktop.org/Tango_Desktop_Project

Vector Patterns http://speckyboy.com/2010/04/08/6-free-vector-seamless-backgrounds-source-files/

Seamless Patterns http://www.premiumpixels.com/20-seamless-photoshop-grid-patterns/

Images used on the demo: http://photodune.net/

17. PHP files

Except the main files needed for this theme to run, here are the other external PHP files used:timthumb.php- the purpose of this script is to create small thumbnails from bigger images. The file is downloaded from:http://code.google.com/p/timthumb/

upload-handler.php- this is the file that contains the functionality for the image uploading in the theme options page -downloaded from http://valums.com/ajax-upload/

18. Troubleshooting

In this section you can check the most common issues and the solutions for them

1. Fail to install the theme

If you experience any problems with installing the theme, please check the following:

Please make sure you have installed the theme as described in the Activating the theme section

If you have used the WordPress uploader and can't upload the theme: as the theme is versatile and provides lots ofoptions, its zip file is bigger than standard themes and some servers can't handle an upload with that file size. In thiscase you have to use an FTP client to upload the theme.

If you have used an FTP client to upload the theme:* make sure the theme main files (such as style.css and index.php) file are located just within one directory apart thewp-themes directory. The right way to locate your root theme files is for example themes/Photolux but notthemes/Photolux/Photolux* the problem you are experiencing may be related with the FTP client used - in this case you can try with another one-we recommend FileZilla FTP client.


http://www.fontsquirrel.com/


http://icondock.com/free/vector-social-media-icons

http://naomiatkinsonproducts.com/

http://www.premiumpixels.com/20-repeatable-pixel-patterns/

http://tango.freedesktop.org/Tango_Desktop_Project

http://speckyboy.com/2010/04/08/6-free-vector-seamless-backgrounds-source-files/

http://www.premiumpixels.com/20-seamless-photoshop-grid-patterns/

http://photodune.net/

http://code.google.com/p/timthumb/

http://valums.com/ajax-upload/

http://filezilla-project.org/download.php



back to top

Make sure you have WordPress 3.0 or higher installed

Make sure your server is running PHP version 5 or higher. Although when developing the theme, we have followed themain rules for cross-version compatibility, we have the possibility to test the theme on servers running versions higherthan 5.0. If your server runs an old PHP version and you get any errors when installing the theme, you can contact thehosting support and ask them update PHP to a newer version.

2. Portfolio thumbnail/Slider image not generated

Sometimes the image resizing script doesn't generate the image due to the following reasons:

*lib/utils/cache directory is not editable (at least 755)

*original image size is too big (more than 2000 pixels)

*original image is not located within the WordPress installation directory

*your site is hosted on a HostGator server - HostGator have some known incompatibilities regarding timthumb and in this case

you have to contact the support and ask them to make your server settings compatible for timthumb. On the this page you can

find an article with an email template that you can use to send them the query.

3. A "406 Not Acceptable" error occurs when saving the option in the Photolux Options page

This error may occur on some servers, because of some security settings and it is related with the jquery.cookie.js script which

is used for saving the last edited tab within the options page. In this case, apart of changing the server settings, the easiest

way to fix this would be to disable this functionality. You can do this by opening the lib/functions/general.php file and

change line 101:


01. pexetoOptions.init({cookie:true});

to be like this:


01. pexetoOptions.init({cookie:false});

4. Portfolio section does not exist in the main menu

This theme is available for WordPress version 3.0 or higher, so please make sure you have the latest version installed.

5. Appearance » Menus section does not exist

This theme is available for WordPress version 3.0 or higher, so please make sure you have the latest version installed.

6. Contact form not sending emails

This issue is mostly likely to happen if you have uploaded the theme via an FTP client or uploaded the whole download zip file

rather the theme only zip file. If so, you need to make sure that the main theme files are contained within just one directory of

the wp-themes directory, not more. For example for the style.css file it is correctly to be located within

http://site.com/wp-content/themes/Photolux/ but not http://site.com/wp-content/themes/Photolux/Photolux/

Also another reason for this issue is that the server where the theme is hosted has some restrictions set about email sending.

7. Style changes within the Options panel do not affect the theme

This issue is mostly likely to happen if you have uploaded the theme via an FTP client or uploaded the whole download zip file

rather the theme only zip file. If so, you need to make sure that the main theme files are contained within just one directory of

the wp-themes directory, not more. For example for the style.css file it is correctly to be located within

http://site.com/wp-content/themes/Photolux/ but not http://site.com/wp-content/themes/Photolux/Photolux/

8. Portfolio items not loading on Internet Explorer

This issue is most likely to happen if you have a broken image URL has been inserted. In this case, please make sure that all

the image URLs that you have inserted are URLs of existing images.

9. In the Photolux Options Upload Button/Color Picker/Add Slider Image Functionality is not working

This is most likely to be caused by a plugin you have installed. You can try to deactivate all the plugins you have installed and

check if it will work. If it turns out that a plugin is causing this, you can deactivate the plugin until you set the theme and

activate it back once you are done.

19. Support

We will do our best to assist with questions directly related to the theme set up, however please note that theme support is completely

voluntary for ThemeForest authors. Therefore before you contact us, please consider finding an answer to your question in:

The relevant section of the documentation


http://www.recommendedwebtools.com/index.php/713/fixing-403-404-and-500-errors-when-using-timthumbphp/



back to top

Search on the Pexeto Support Forum if your question has been already answered

Troubleshooting section above

WordPress Codex for general WordPress questions

Google for general questions

Note: If you have already explored all the sources of information stated above, and you are still experiencing problems with thetheme set up, please post a topic with your question on the Pexeto Support Forum.

20. Updates

Installing an update

There are two main ways of installing an update:

By uploading the theme as a new theme (recommended)- this is an easier way to accomplish this. You just have to upload theupdated theme zip file via the built in WordPress theme uploader as a new theme as explained here and activate the theme.

Note: Please note that with the activating of the new theme it is possible your menu setting not to be saved for the newtheme. If so, you just have to go to Appearance » Menus » Theme Locations, select the menu (it will be still there) andpress the "Save" button.

Once you install the updated theme and make sure that everything is working normally, you can go back to the Themes section

and delete the older version of the theme.

Via FTP - you can use an FTP client (such as FileZilla) and replace all the theme files with the updated ones.

Note: Please note that with the file replacing all the code changes you have made to the files (if you have made any) willbe lost, so please make sure you have a backup copy of the theme files before you do the replacement. All the settingsthat you have made from the admin panel won't be lost- they will be still available.

a. Version 1.1.0

In this version we have implemented a full width slideshow page - you can read about how to set it here

Once again, thank you so much for purchasing this theme! If you like it, please don't forget

to rate it on the ThemeForest site.

Pexeto

Go To Table of Contents


http://support.pexeto.com/

http://www.mysticflutes.com/wp-content/themes/documentation/troubleshooting

http://codex.wordpress.org/Main_Page

http://google.com

http://support.pexeto.com/



wordpress photolux theme documentation

Documents