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 |
Theme Styles
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 JavaScript custom scripts
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.. |
Photoshop Files Included PSD files
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/
Installation and usage
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.
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]
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]
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]
Sliders Included sliders
Revolution Slider - $15 value
Spotless comes with Revolution Slider Plugin
Revolution Slider - Spotless usage NOTE
When you create a new slider give it a name, a slug, choose "Full Width" (@see figure bellow). Each slider you create will generate a shortcode (you can read more about shortcodes Here)
The plugin has an intuitive UI interface and allows you to add an unlimited number of sliders within the theme.
You can find additional documentation related to the slider within the documentation folder / revolution_slider.
[full_width][rev_slider slider_test][/full_width]
or
[one_half][rev_slider slider_test][/one_half]
or
[rev_slider slider_test]
or
Basically you can add the slider [rev_slider slider_name] wherever you want.
NOTE! Click on the image to see the full size
NOTE! Click on the image to see the full size
NOTE! Click on the image to see the full size
Available Sidebars and Widgets
Spotless comes with the following sidebars:
Blog sidebar
Will be displayed within the blog page.
Single Blog Post sidebar
Will be displayed within single blog post's page.
Page sidebar
Will be displayed within Page-right sidebar Template.
Social Links sidebar
Will display social links within the theme's menu.
Spotless comes with the following widgets:
Spotless: Flickr Widget
Spotless: Twitter Widget
Spotless: Recent Posts Widget
Because Spotless loads it's pages through AJAX please use "Spotless: Recent Posts Widget" instead the default WP recent posts widget.
Spotless: Social Widget
Social widget can only be added to the Social Links sidebar.
NOTE! Click on the image to see the full size
Other Themes from SakuraPixel
