“Clear-Theme” Documentation by “Invent Group” v1.1
“Clear-Theme”
Created: 06/05/2011
By: Invent Group
Email: support@invent-themes.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Table of Contents
- Introduction
- Wordpress installation
- Clear Theme installation
- Theme activation
- Importing demo content
- Setting up Home Page
- Configuration Home Page slider (Możemy takie napisy pododawać)
- Creating and managing menu
- Configuring widgets
- Creating a blog page
- Adding posts to blog
- Creating a portfolio page
- Creating a contact page
- Short codes
- HTML structure
- CSS files and structure
- Java Script files
- Fonts
- PSD files
- External sources
- Thank you!
A) Introduction - top
Clear Theme is a clear minimalist and modern wordpress theme, suitable for any kind of website such as portfolio, business, blog, photography or gallery. The great combination of light-coloured schemes creates an elegant and high visual impact experience. You can use it either for photography, commercial business or small informational websites.
B) Wordpress installation - top
If you don't have Wordpress on your server yet, you can download a copy of the latest Wordpress version here. Next, go through the installation instructions inside readme.html file to install Wordpress on your server.
C) Clear Theme installation - top
In order to install Clear Theme, follow these steps:
- Extract your download package .zip file and look for the folder named "clear-theme-package".
- Next, enter this folder and upload clear-theme folder to http://yourdomain.com/your_wordpress_dir/wp-content/themes/ directory via any FTP program like Filezilla or CuteFTP.
D) Theme activation - top
To activate Clear Theme, log into your Wordpress admin using the following URL: http://yourdomain.com/your_wordpress_dir/wp-login.php Next, go to Appearance > Themes. Here, you should see a thumbnail of Clear Theme. Click on the ''Activate'' button to activate your new theme.
After activation, display this theme by right-clicking on your blog name (top left corner) and select "Open in new tab". Your theme should look very similar to the image below:
Does it look empty and weird? :) No problem, no sooner than done. It will start looking better at the moment we configure our theme by means of the next steps. Let's configure some basic options.
E) Importing demo content - top
Although it isn’t necessary, it is recommended to follow this step. Especially if you want to start with the same content as on our Live Preview or you are not experienced in using WordPress.
- Log into your WordPress Admin section (http://www.your-web-site.com/wp-admin)
- Go to Invent
- Click on the Import Dummy Data
- WordPress will import each of the posts, comments, and categories contained in this file into your blog
Now you will have to customize pages and theme options because IDs of categories, pages are not the same on our server and on your server. Don't worry, no programming skills for this customization are necessary (only reading ability is needed).
F) Setting up Home Page - top
Since you have installed the clear_theme.xml file from the "Importing demo content" section, your home page will already have content in each of the areas. If not, it is still quite simple to do so. To configure home page, firstly you need to select type of content displayed on that page. It can be a static page or a list of posts. In order to do this, go to Settings -> Reading and in Front Page Displays option, choose an option that you are interested in.
G) Configuration Home Page slider - top
There is a possibility to enable a slider on homepage. It can be Nivo slider or Piecemaker 2 (3D Slider). To choose a proper slider go to Invent -> General Settings and select one of the three available variants : None, Nivo, Piecemaker 2. For example select Nivo and click Save changes. You can adjust here many other options like for example - header colors, sizes and fonts, menu button colors and many more.
To make our Slider working properly, you need to add some images. In order to do this go to Invent -> Nivo Slider Settings. here we can choose transition type between slides (we prefer effect Fade, because it looks the best with Clear theme), transition time, the look of arrows which are used for switching slides and some other options.
Let's focus on adding images. In order to add a new image, go to the bottom of page and click „Add new slide” and select image from your own disc drive. Acceptable formats: .jpg, .gif and .png. Standard size or slides is 960px x 460px. To make your slides look their best prepare them exactly in that size. If you upload image bigger than 960px x 460px, it will be properly resized and cropped.
After uploading some images you can enter title, link and select a background color for each of them.
Let's click Save changes and look how does our homepage look like.
We can see that our website takes the proper form and looks quite well.
Setting up Home page content (columns, images and buttons)
On the video demo we create a new page but you can place that content on any page you want.
H) Creating and managing menu - top
To manage your navigation menu, go to Appearance -> Menus
Enter the name of your new menu and click „Create menu”. If everything goes well, you should see the information that you have created a new menu with the name that you have chosen (we have chosen „Our menu”).
Next step that you have to take, is to select position „Our menu” from Theme Locations box. After that click button Save.
The last thing you have to do is to add new items to „Our menu”. In order to do that, select some items and click „Add to menu” button. We selected Sample Page for now.
First item has been added to „Our menu". To save changes Click „Save menu”.
Whenever you want, you can transform your Menu the way you like. If you add some nice looking sub items, drop down menu will be displayed on your website.
I) Configuring widgets - top
In order to make your website look more professional you need to add some elements in the footer (bottom part of the website). To do this go to Apperance -> Widgets in Admin Control Panel.
Each of the boxes on the right side represents one area in our theme. Sidebar container is the area which will be displayed next to the blog posts. Other four areas are placed in the footer – each of the area is exactly one column. Let's add some widgets.
The footer on our website should look like that:
If you want to change footer's background color you can do this in Invent -> General settings -> Footer background color
J) Creating a blog page - top
To configure blog you need to do 3 things. Firstly, you need to define a place in which will be placed the sidebar (only if there should be any sidebar). You can do this by going to Invent -> Blog settings.
Secondly, after changing it, front page should display static page, not the list of the posts. We have to create another page which we will be using as a blog. Let's create a new page by going to „Pages -> Add new”. Type a name of the new page (for example Blog) and click „Publish”.
Let's go to Appearance -> Menus and add your Blog to the menu.
We have two items in our menu now.
Click Save menu and go to our website.
Thirdly, we need to select on which subpage your Blog posts should be displayed. In order to do so, click „Settings -> Reading” and choose the page which we created few seconds ago (Blog) from the list. After that click „Save changes”.
Now, our blog should look like on this image below:
K) Adding posts to blog - top
To add a new post to your blog you have to go to „Control Panel -> Posts”. Let's delete „Hello world!” which was automatically added by WordPress.
Let's add new post by clicking “Add New”. Enter the title and add some content and click Publish.
We can also add new category for our new post (we added Design category).
To add “Featured image” to our post click “Set featured image”
Then, select a file from your computer. If you want to reach better result, choose photos which are prepared in proper size - 930px width and minimum 200px height. Click “Use as featured image” and then “Save all changes”.
Click public. Our blog should look just like that:
If you don't want to display full contents of your posts but only e.g. the first paragraph, then during writing a post, click in a proper place of the article on “Insert More tag”. Our blog should look like that:
L) Creating a portfolio page - top
Create new page on Pages -> Add new one and name it “Portfolio”. Let's add some photos by clicking Add an Image button.
We're selecting files from our computer
Click Save all changes
We can not only change the order of the photos but also the number of the columns where photos will be displayed.
Now, as you can easily see that Button “Show” is attached to every picture. By clicking it, you can change the photo's title and some other options. To create nice looking sortable gallery, enter categories in field “Caption”. If all of the caption fields are empty, filter options will be not displayed. To make a photo visible in more than one category just type more categories and separate them with comma. In the Description field you can enter some text which will be displayed below the title. Fields “Title” and “Description” can be also empty. Then our portfolio will contain only photos with no additional places for any text.
IMPORTANT: to hide image titles and descriptions use title="none" parameter in your gallery shorttag.
Example: [gallery columns="3" title="none"]
Save changes and click publish.
We have to add our portfolio page to the menu. In order to do this, go to Appearance -> Menus, add proper page to the menu and save changes.
Our portfolio should look like that:
Let's add some descriptions to the photos. Write some categories into Caption field to see how does our filtering work.
Our portfolio should look like that:
M) Creating a contact page - top
To configure contact form you need to go to Invent -> Contact Setting. In that area you can set your e-mail address on which messages from other users or those informing about errors or success with sending will be sent. Below you can see a map where you can set your own marker by right-clicking on the selected map area. You can describe selected point with few fields. It's possible to use some simple html tags e.g. strong, em, a, p
You can use contact form on any page by using of shortcode [contact_form]. Similarly, you need to add a shortcode [contact_map] into the selected area in case you want to insert the map. Let's create new page „Contact” and use [contact_form] shortcode on it:
Our final effect:
N) Short codes - top
Clear Theme comes up with some short-codes for layout and content formatting. These short-codes include basic layout columns, lists, buttons, information boxes, images, . Let’s see how to use them:
1) Creating columns - top
The list of available columns shortcodes:
- one_half
- one_third
- one_fourth
- two_third
- three_fourth
Examples:
2 columns layout:
2
[one_half_last] Right column [/one_half_last]
3 columns layout:
2
3
[one_third] Second column [/one_third]
[one_third_last] Third column [/one_third_last]
4 columns layout:
2
3
4
[one_fourth] Second column [/one_fourth]
[one_fourth] Third column [/one_fourth]
[one_fourth_last] Fourth column [/one_fourth_last]
You can also create more complicated compositions:
2
[two_third_last] Second column [/two_third_last]
2
[one_third_last] Second column [/one_third_last]
2
[three_fourth_last] Second column [/three_fourth_last]
2
[one_fourth_last] Second column [/one_fourth_last]
2
3
[one_fourth] Second column [/one_fourth]
[one_half_last] Third column [/one_half_last]
2
3
[one_half] Second column [/one_half]
[one_fourth_last] Third column [/one_fourth_last]
2
3
[one_fourth] Second column [/one_fourth]
[one_fourth_last] Third column [/one_fourth_last]
IMPORTANT: the last column's shorttag name has to be ended by '_last'.
- one_fourth + one_fourth + one_fourth_last
- one_half + one_fourth_last
- one_fourth + one_half_last
2
3
[one_fourth] Second column [/one_fourth]
[one_fourth_last] Third column [/one_fourth_last]
2
[one_fourth_last] Second column [/one_fourth_last]
2
[one_half_last] Second column [/one_half_last]
2) Creating buttons - top
Clear theme provides two sizes of the buttons: small (standard Read more button, like on Home page) and big. You can customize each of them by setting some additional parameters.
2
[button_big url="#" color="green"] text [/button_big]
Available parameters:
- url – an address to which you will be redirected after clicking the button.
- color – Background color of the button. You can choose one of 8 colors: red, green, blue, dark, green2, blue2, dark2, light
Standard "Read more..." button (like on Home page)
3) Creating boxes - top
Thre are 4 kinds of boxes: error_box, alert_box, message_box and success_box. Each of them has the optional parameter „title” which allows you to set a proper title.
An example:
4) Creating lists - top
There are 36 icons which can be used to create a list.
Available list styles:
| alert | arrow1 | arrow2 | arrow3 | bulb | calendar | cart | cart2 | check | circle | clock | download |
| error | file | folder | heart | image | locker | pin | play | plus | question | repeat | |
| shield | search | speech | square | star | target | text | thumb-down | thumb-up | tune | user |
It's very easy to use it. All you have to do, is just to surround your html code by our shorttag.
2
3
4
5
6
7
<ul>
<li>Lorem ipsum dolor...</li>
<li>Lorem ipsum dolor...</li>
<li>Lorem ipsum dolor...</li>
</ul>
[/list]
5) Creating highlights - top
There is a possibility to highlight some part of text. To do it, just use the proper “highlight” shorttag:
You can choose one of seven available colors.
- highlight_orange
- highlight_red
- highlight_blue
- highlight_green
- highlight_gray
- highlight_pink
- highlight_yellow
Usage:
6) Creating quotes - top
We prepared the shorttag “blockquote” for inserting quotes. There is one optional parameter “author” in which you can set an author, date etc..
Usage:
7) Inserting images - top
To insert an image to your post or article you have to upload an image using Wordpress Media Library and then copy image URL to shortcode '[image]'.
You can also specify a size of the image using 'size' parameter.
Available sizes:
- one_fourth
- one_third
- one_half
- two_third
- three_fourth
- full
Example:
More complex examples
Four columns
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[image src="ImageURL" size="one_fourth"]
<h5>Image title</h5>
Image description
[/one_fourth]
[one_fourth]
[image src="ImageURL" size="one_fourth"]
<h5>Image title</h5>
Image description
[/one_fourth]
[one_fourth]
[image src="ImageURL" size="one_fourth"]
<h5>Image title</h5>
Image description
[/one_fourth]
[one_fourth_last]
[image src="ImageURL" size="one_fourth"]
<h5>Image title</h5>
Image description
[/one_fourth_last]
Three columns
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[image src="ImageURL" size="one_third"]
<h5>Image title</h5>
Image description
[/one_third]
[one_third]
[image src="ImageURL" size="one_third"]
<h5>Image title</h5>
Image description
[/one_third]
[one_third_last]
[image src="ImageURL" size="one_third"]
<h5>Image title</h5>
Image description
[/one_third_last]
Two columns
2
3
4
5
6
7
8
9
10
11
[image src="ImageURL" size="one_half"]
<h5>Image title</h5>
Image description
[/one_half]
[one_half_last]
[image src="ImageURL" size="one_half"]
<h5>Image title</h5>
Image description
[/one_half_last]
Two columns
2
3
4
5
6
7
8
[image src="ImageURL" size="two_third"]
[/two_third]
[one_third_last]
<h5>Image title</h5>
Image description
[/one_third_last]
Two columns
2
3
4
5
6
7
8
[image src="ImageURL" size="three_fourth"]
[/three_fourth]
[one_fourth_last]
<h5>Image title</h5>
Image descriptions
[/one_fourth_last]
Full size
2
3
<h5>Image title</h5>
Image description
8) Inserting videos (from Vimeo, Youtube or Dailymotion) - top
In order to insert video into a page, use one of those shortcodes:
Vimeo
Video URL: http://vimeo.com/9017146
YouTube
Video URL: http://www.youtube.com/watch?v=RSXyztq_0uM
Dailymotion
Video URL: http://www.dailymotion.com/video/xjb7t8_the-witcher-2-xbox-360-reveal-teaser_videogames
Video ID is an unique identifier which one you can get from Video URL.
9) Creating tabs - top
In order to insert tabs into a page, use shortcodes:
2
3
4
5
[tab title="First tab"]First tab's content[/tab]
[tab title="Second tab"]Second tab's content[/tab]
[tab title="Third tab"]Third tab's content[/tab]
[/tabs]
10) Creating accordions - top
In order to insert accordion into a page, use shortcodes:
2
3
4
5
[accordion title="First title"]First content[/accordion]
[accordion title="Second title"]Second content[/accordion]
[accordion title="Third title"]Third content[/accordion]
[/accordions]
O) HTML structure - top
Our design is divided into several blocks:
- Header – logo and main navigation
- Slider (it's optional) – Nivo slider or Piecemaker
- Content – website's contents
- Sidebar (it's optional. It can also occur before Content) – aside widgets area
- Bottom widget area
- Footer – social and copyrights information
The simplest form of our HTML code is:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- HEADER BLOCK -->
<div class="wrapper">
<!-- site logo here -->
<h1 id="logo"></h1>
<!-- site main navigation here -->
<ul id="nav"></ul>
</div>
<!-- SLIDER BLOCK -->
<div id="slider-wrapper"></div>
<!-- CONTENT BLOCK -->
<div id="content" class="wrapper">
<!-- site content here -->
<div id="sidebar"> </div>
</div>
<!-- BOTTOM WIDGETS CONTAINER BLOCK -->
<div id="widgets-container"></div>
<!-- FOOTER BLOCK -->
<div id="footer" class="wrapper"></div>
</body>
P) CSS files and structure - top
Clear Theme uses three main CSS files for the global style. These are:
- style.css
- prettyPhoto.css
- ie.css
Q) Java Script files - top
- jquery-1.5.1.min.js – jQuery Library
- jquery.easing.1.3.js – Easing jQuery plugin
- jquery.tiptip.minified.js – TipTip Library
- jquery.scrollto.min.js – ScrollTo jQuery plugin
- cufon.js – Cufon library
- fonts/ - all necessary cufon font files
- jquery-ui-1.8.11.custom.min.js – jQuery UI
- superfish.js – Drop down menu script
- jquery.quicksand.js – gallery script
- jquery.mousewheel-3.0.4.pack.js – MouseWheel jQuery Plugin
- jquery.fancybox-1.3.4.pack.js – Nice looking LightBox alternative
- jquery.nivo.slider.js - Slider
- core.js – Our main JavaScript code which runs all other libraries
R) Fonts - top
We have been using Cufon to create our theme. We prepared several fonts to work with Cufon script.
Andika Basic
Designer: SIL International
License: SIL Open Font License, 1.1
http://scripts.sil.org/cms/scripts/page.php?item_id=Andika
Bebas Neue
Designer: Dharma Type
License: Please read licenses/Bebas-Neue-License.txt
http://www.fontsquirrel.com/fonts/bebas-neue
Comfortaa Regular/Thin
Designer: Johan Aakerlund
License: SIL Open Font License, 1.1
http://www.dafont.com/comfortaa.font
Diavlo Book/Light
Designer: Jos Buivenga (exljbris)
License: Please read licenses/Exljbris-License.txt
http://www.exljbris.com/diavlo.html
Droid Sans
Designer: Steve Matteson
License: Apache License, version 2.0
http://www.google.com/webfonts
Fertigo Pro
Designer: Jos Buivenga (exljbris)
License: Please read licenses/Exljbris-License.txt
http://www.exljbris.com/fertigo.html
Inconsolata
Designer: Raph Levien
License: SIL Open Font License, 1.1
http://www.google.com/webfonts
Josefin Sans Std
Designer: Santiago Orozco
License: SIL Open Font License, 1.1
http://www.google.com/webfonts
Lobster
Designer: Pablo Impallari
License: SIL Open Font License, 1.1
http://www.google.com/webfonts
Molengo
Designer: Denis Jacquerye
License: SIL Open Font License, 1.1
http://www.google.com/webfonts
Museo Sans
Designer: Jos Buivenga (exljbris)
License: Please read licenses/Exljbris-License.txt
http://www.exljbris.com/museosans.html
Sansation Light/Regular
Designer: Bernd Montag
License: Please read licenses/Sansation-License.txt
http://www.fontsquirrel.com/fonts/Sansation
Vegur Light
Designer: Sora Sagano
License: Public domain
http://dotcolon.net/
Vollkorn
Designer: Friedrich Althausen
License: SIL Open Font License, 1.1
http://www.google.com/webfonts
Yanone Kaffesatz Regular/Thin
Designer: Yanone
License: SIL Open Font License, 1.1
http://www.google.com/webfonts
S) PSD files - top
This theme contains all PSD files used to create the Clear Theme. Everything within the main psd file is organized into folders which are named semantically.
T) External sources - top
jQuery
Copyright 2011, John Resig
License: MIT and GPL Version 2
http://jquery.com/
jQuery easing plugin
Author: George McGinley Smith
License: BSD
http://gsgd.co.uk/sandbox/jquery/easing/
ScrollTo
Author: Ariel Flesler
License: MIT and GPL
http://flesler.blogspot.com
TipTip
Author: Drew Wilson
License: MIT and GPL
http://code.drewwilson.com/
Cufon
Author: Simo Kinnunen
License: MIT
http://cufon.shoqolate.com/generate/
Superfish
Author: Joel Birch
License: MIT and GPL
http://users.tpg.com.au/j_birch/plugins/superfish/
Quicksand
Author: Jacek Galanciak
License: MIT and GPL Version 2
http://razorjack.net
Fancybox
Author: Janis Skarnelis
License: MIT and GPL
http://fancybox.net
mousewheel
Author: Brandon Aaron
License: MIT
http://brandonaaron.net
Nivo slider
Author: Gilbert Pellegrom
License: MIT
http://nivo.dev7studios.com/
Piecemaker
Author: Björn Crüger, Modularweb GmbH & Co. KG, Germany
License: MIT
http://www.modularweb.net/
U) Thank you! - top
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.
Invent Group