Spotless Documentation

Spotless – a carefully crafted theme that lets you display your work the clean, fancy way.
Some of the theme’s strong points are the awesome iGallery, the sortable masonry gallery, Slider Revolution.
The responsive behaviour allows the content to easily adjust for any screen resolution in order to produce the optimal user experience for different use cases and enviroments, all built into one website.

If you have any questions, please use our profile contact form on Envato ( SakuraPixel ).
We will try to answer all questions within 24 hours.Thank you for purchasing our theme.


Author: SakuraPixel
Contact: SakuraPixel
Author URL: SakuraPixel
Item URL: SakuraPixel/Portfolio
Current Version: 1.0.0
Documentation Version 1.0.0
Created: 2012-12-09
Modified: 2012-12-09

NOTE!
You can change theme text's color from Admin > Theme Options.
In order to change theme's graphics please see Photoshop section.

Stylesheets

Main stylesheet files used for this template, you can find more information opening each file:

File Name Description
main.css Styles for general elements for the template (ex: logo, menu).
sections.css Styles for specific theme sections (ex: home, portfolio)
reset.css Generic reset file.

JavaScript Files

Main JavaScript files for this theme:

Tag Description
SpotlessWebsite.js Main javascript file, handles the main functions of the theme (ex: menu behavior, AJAX page loading)
PagesUtils.js Helper file to determine which section to initialize.
iGallery.js Handles iGallery sections behavior.
Features.js Handles carousel slider's behavior.
ContactSection.js Handles iGallery sections behavior (ex: contact form).
IsotopePortfolio.js Handles Portfolio sections behavior..

The theme comes with a graphics PSD file included which contains PSD sources for the theme graphic elements.

Please note that you can change thems's colors from Admin>Theme Options, however the theme also contains graphics (Ex: arrows), you can chnage these graphics colors to fit your needs. You can save the new graphics within images folder (please use the same names - override existing icons).
If you already have installed the theme the images folder can be found within the theme's folder.
Ex: yourdomain.com/wp-content/themes/theme_name/images

Preloader

You can generate a different color preloader here: Preloaders.net
Website main preloader ('preloader.gif') is located under the folder /wp-content/themes/theme_name/images/
Lightbox preloader ('preloader.gif') is located under the folder /wp-content/themes/theme_name/photoshootlightbox/

1. Install Theme

Brief information about how to install your WordPress theme from scratch

Unzip the main files (the file that you have downloaded when you have purchased the theme). The theme installer is 'theme_name'_installer.zip. NOTE! - This is the only file that you should use to install the theme.

Log in to your Wordpress Admin Panel, go to Appearence > Themes > Install Themes > Upload. Upload the zip file that was discussed in the above topic.

Once you have uploaded the theme, it automatically installs to your wordpress. Click the Activate button to activate the theme.
Please read the usage documentation below.

2. General Usage

Information about adding pages and different content type.

× Important!
Reading settings
Before adding content, go to Settings > Reading and make sure you have checked 'Front page displays' as a 'Your latest posts'. In order to change pages order/set up home page please read bellow @Add Pages.


How to translate

The translation file is located within languages folder (/wp-content/themes/photoshoot/languages). You can edit the .po file using POEdit - use the translation field to make replacements.

After you have installed PoEdit double click on the Photoshoot.mo (it should open with Poedit). From the file menu, save file with your language name e.g nl_NL.po. It will generate both a .po and .mo file for your translation. Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.

Thumbnails size

Photoshoot uses thumbnails of different sizes for different sections. The theme creates these thumbnails when you upload photos to Library from your computer.
If you already have photos within your library from a previous theme you can use the following plugin in order to regenerate the thumbnails according to Photoshoot needs: Regenerate Thumbnails
After you have installed 'Regenerate Thumbnails' plugin go to Tools > Regen Thumbnails and click Regenerate (this could take a while depending of your library content).

Add Pages

In order to add content to your website first you have to add Pages, pages can be added from the Admin > Pages > Add new.

Featured image (background)

Each page must have a 'featured image', the image will be used as page background (recommended size 1980x1080px about 200-300KB size). You can choose a featured image from the right menu (@see figure bellow).

NOTE! Click on the image to see the full size

Page template

Some pages must be assigned a specific page template (ex: Portfolio, iGallery...), regular pages don't.
You can choose a page template while you add a new page from the right menu (@see figure bellow).

NOTE! Click on the image to see the full size

Add Menu

Create the menu

After you have added at least one page you can start add it to the website's menu, go to Admin > Appearence > Menus
Add a new menu from the menu panel, save it, than select the created menu from the "Theme Location" panel and save it.


Add pages to the menu

You can add pages to menu from the Pages panel, than you can change menu items labels or order from the menu panel.
Please note that this theme does not support multilevel menu.

NOTE! Click on the image to see the full size

Home/About page

In our preview Home and About are just regular pages, meaning you don't have to choose a page template for it.
In order to create regular pages follow the steps bellow:

1. Create a regular page under pages.
2. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
3. Add content through the page HTML editor.

NOTE! Click on the image to see the full size

In order to achieve a similar look and feel (see image above), please make sure you read about Shortcodes.

4. Add this page to the menu:
Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

Portfolio

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Portfolio Template' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. Add Portfolio's page content (small description) through its page HTML editor. The page title will show as the section title, the content will show as a small description above the portfolio items. You can also add shortcodes, please make sure you read about Shortcodes

5. In order to add portfolio items go to Admin > Portfolio > Add new.
6. Portfolio items are grouped into categories, each portfolio item must be assigned to at least one category, you can add or assign a category from the right menu (@see image bellow)

NOTE! Click on the image to see the full size

7. Set a featured image for the item, see image above (Featured image will be used as portfolio preview and portfolio item's page background). 8. Add Additional images to the portfolio item (it will be displayed on the item's page @see images bellow)

NOTE! Click on the image to see the full size

9. Add this page to the menu:
Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

Video gallery

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Video Template' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. Add Video's page content (small description) through its page HTML editor. The page title will show as the section title, the content will show as a small description above the video items. You can also add shortcodes, please make sure you read about Shortcodes

5. In order to add video items go to Admin > Video Gallery > Add new.
6. Video items are grouped into categories, each video item must be assigned to at least one category, you can add or assign a category from the right menu (@similar to portfolio above)

7. Set a featured image for the item (Featured image will be used as video preview and video item page's background). 8. Add video iFrame code (@see image bellow)

NOTE! Click on the image to see the full size

9. Add this page to the menu:
Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

iGallery

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'iGallery Template' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. In order to add iGallery items go to Admin > iGallery > Add new. You will add images groups, each group can have multiple images with description (@see image bellow).

NOTE! Click on the image to see the full size

5. Add this page to the menu:
Go to Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

Page - right sidebar

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Page - Sidebar right' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. Add page content the page HTML editor. 5. Add this page to the menu:
Go to Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

Blog page

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Blog Template' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. You can add Blog posts from Admin>Posts>Add new. 5. You can set blog settings from the Theme Options page (@see bellow). 6. Add this page to the menu:
Go to Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

Contact page

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Contact Template' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. Add Contact content through its page HTML editor. 5. You can set contact page's settings from the Theme Options page (@see bellow).
Go to Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

Theme General Options

In order to set theme general options (logo, lightbox behavior, colors...) go to Admin > Theme Options.

NOTE! Click on the image to see the full size

Shortcodes

Shortcodes allows you to easily add specific content on your website through the editor.
Ex: The following shortcode will generate a theme specific button: [button]Button Label[/button]
The following shortcodes are available for this theme:

Full width column

Usage example:
[full_width]Your content here[/full_width]

One half column

Usage example:
[one_half]Your content here[/one_half]
[one_half last="yes"]Your content here[/one_half]

One third column

Usage example:
[one_third]Your content here[/one_third]
[one_third]Your content here[/one_third]
[one_third last="yes"]Your content here[/one_third]

Two thirds column

Usage example:
[one_third]Your content here[/one_third]
[two_thirds last="yes"]Your content here[/two_thirds]

× Note!
full_width, one_half, one_third and two_thirds shortcodes should not be used within pages with a sidebar.
Horizontal dotted spacer

Usage example:
[horizontal_dotted_spacer]
or
[full_width][horizontal_dotted_spacer][/full_width]

Header/Title

Usage example:
[header]Header title here[/header]
or
[full_width][header]Header title here[/header][/full_width]

Full width header

Usage example:
[full_width_header bold="Spotless"] //secont text here[/full_width_header]

This shortcode should not be added inside a column shorcode.

Quote

Usage example:
[quote author="Author name"]Text content[/quote]

Phone

Usage example:
[phone tel="+60302248094"]phone number[/phone]

Email

Usage example:
[email mailto="your.email@yourdomain.com"]Email me[/email]

Button

Usage example:
[button href="http://someurl.com"]Button label[/email]
or
[button href="http://someurl.com" target="_blank"]Button label[/email]
or
[button href="http://someurl.com" target="_blank" align="alignright"]Button label[/email]

Youtube

Usage example:
[youtube id="videoID"]
or
[youtube id="videoID" width="100%" height="400"]

Vimeo

Usage example:
[vimeo id="videoID"]
or
[vimeo id="videoID" width="100%" height="400"]

Soundcloud

Usage example:
[soundcloud url="http://audiourl"]
or
[soundcloud url="http://audiourl" width="100%" height="75" color="ec1c4d"]

Recent portfolio projects

Usage example:
[recent_portfolio]
or
[recent_portfolio itemsNo="5"]
or
[full_width][recent_portfolio itemsNo="5"][/full_width]