Blue Earth

Wordpress theme instructions

Thank you for purchasing the Blue Earth Wordpress theme. This document will guide you into using and customizing the theme to fit your needs, read it carefully ! For advanced webdesigners, a HTML documentation is also available in the template package.

Wordpress theme

h o W t o i n s ta l l ................................ 3 F i r s t s t e p s ....................................... 4 s p e c i a l b l o c k s ................................ 5 c o n ta c t F o r m ................................. 5 s l i d e s h o W ....................................... 6 p o r t F o l i o ........................................ 6 G a l l e r y ............................................ 8 c o n t e n t e d i t i o n ............................. 9 W o r d p r e s s s p e c i a l F e at u r e s ......... 12 c r e d i t s ........................................... 13

How to install the theme

Installing from scratch
If you do not have a working installation of Wordpress, start by installing it following this guide : http://codex.wordpress.org/Installing_WordPress

Installing on an existing Wordpress

The Blue Earth theme requires Wordpress version 2.7 and upper. If your installation is older than this, you need to upgrade it. You may follow this guide : http://codex.wordpress.org/Upgrading_WordPress

Installing the theme

Upload Once your Wordpress is ready, upload the folder blue-earth to the directory wp-content/themes in your Wordpress root. Activation Once the upload is complete, log into Wordpress and go to the Appearance section, in the Themes submenu. The Blue Earth template should be listed here, just click activate (you may preview it first) to install it on your website. If the template does not show here, check that the folder has been uploaded to the correct directory. Once activated, a new admin area is added to the left column.

Upgrading from previous versions

The theme will be updated from times to times, to add more functionnalities or fix minor bugs. To upgrade your theme to the last version, just download it from ThemeForest, and upload it to your directory wp-content/themes in your Wordpress root. All configuration will be kept, including customized images and logos. Note: if you edited files manually, don't upload the whole folder, it would erase your changes. I suggest you use Winmerge (http://winmerge.org/) to help spot differences between old and new files.

First steps
Change defaults texts
By default, the template uses a few default texts. To edit them, go to the Customization panel, and edit them as needed. The texts are : Logo title Baseline The text displayed right under the logo. By default, the website title, but you can change it to whatever you like. This optional text is displayed under the logo title, in light grey. It may be a baseline, a city... If not needed, just leave it empty. This text is displayed in the footer, under the side bar, next to the mini logo. Displayed under the copyright. I'd appreciate if you keep my name in it, but feel free to set it to whatever you like !

Copyright Author

Logos
To change the template logos, 2 images of your own logo are needed, in png format : Main logo Mini logo 200px width max, any height 32px width max, any height

For better results, use transparency. Once ready, upload them in the Customization panel and hit Save changes to replace the default images. You may adjust the vertical offset of the main logo to get the exact wanted position. To preserve image quality, no resizing is done, even if images are too large.

Website title
Title replacement acts by replacing the website title by a image containing the same text, enhanced by some effects. By default, title image replacement is disabled. To use it, follow these steps : 1 2 3 Open the file Blue Earth - elements slices.psd located in the psd/Slices folder of the template package Change the text Blue Earth to your website name, and export the slice (must be in png format). You may have to widen the slice to fit your text. Upload this file in the Customization panel, you're done !

To remove title image replacement, just check to box Remove image and hit Save changes.

Special blocks
Within the Special blocks panel, you can manage the three top buttons, the navigation block and the custom links widget. Follow the instructions to edit them. Note : unless they are activated, the Portfolio and Gallery pages won't show in the targets list. Read below to learn more.

Contact form
The template comes with a custom contact form, which slides down on the browser when the user click on a contact link.

Activation
By default, the contact form is disabled. To activate it, choose Yes to the Enable contact form option, fill the recipient mail field and the text fields, and hit Save changes. Note that if the recipient mail is empty, the contact form won't display even if enabled.

Customize mails
Editing the mail templates is easy : just edit the fields in the Mail templates box. There are two type of mails : the one sent to you, and the confirmation message for the user. Following tags can be used in the mails subject and body, they will be replaced by their value: [name] [mail] [message] [blog_name] name of the sender mail of the sender message written the website name

How to call the form

Within your pages, just add this link anywhere to call the contact form : <a href="#contact" title="Contact us">Contact us</a>

Slideshow
this admin panel is for managing the template main slideshow. here you can choose which pages to display it on, and the various titles for the tabs. There are already some titles, but if you want to change them, follow these steps : 1 2 3 Open the file Blue Earth - elements slices.psd located in the psd/Slices folder of the template package Change the text of the tabs titles slice as needed, and export the slice (must be in png format). Upload this file in the Slideshow panel, and enter the titles from your file in the table below, in the same order. This will allow the template system to locate them properly.

At the bottom of this pannel, there are many other options to cutomize the slideshow. Try changing them to find what fits your need most. Note: even if activated, the slideshow won't display until there are published entries under the Portfolio page.

Portfolio
The portfolio module provides content for three sections of the template : the main slideshow, the portfolio global page, and one page for each entry.

Activation
To use the portfolio, you should first activate it : simply click on the activate button. Once activated, the portfolio section is hidden (the corresponding page is in draft mode), to allow adding data without having it displayed on the website. You can then edit the portfolio page to change the page content, which is displayed below the entries gallery.

Managing entries
The portfolio module is composed of one parent page (the portfolio page, which will display the list of entries with slideshows), and entries pages. To add entries, you may create them straight from the Portfolio module, or add a page under the portfolio page (only possible if the portfolio has been published - read below how to do this). You may even move an existing page under the portfolio page to activate it in the portfolio.

To create an entry page from the module, just enter the title and click Create button at top of the page. Once created, all entries informations are managed when editing the corresponding page. Two boxes will show under the page content edition box: Options Edit options regarding display of this entry on the main slideshow (tab title and subtitle) and on the portfolio page (description and link) Add images to be displayed on the main slideshow (the first enabled image) and on the portfolio page slideshow (all enabled images)

Images

To add images to your entry page, you may use the Upload image button, or add an image to the page content. Once added, you can change the images order (by clicking on the left or right arrows), enable or disable image (check the box in the corner) or mark some of them for deletion. If an image used in the page content is marked for deletion, a warning will pop up to confirm this action. The module options can be easily changed at the bottom of the module page. Try changing values until you are satisfied by the result.

Publishing
When you are satisfied by the portfolio content, unhide it by clicking the Show button in the Options section of the panel, or by clicking on the link in the message at the top of the page. You may also edit the portfolio page, and publish it from here. Once activated, the portfolio may be hidden at any time : click on the hide button in the Options section, it will reset the portfolio page as draft.

Desactivation
If the Portfolio section is no longer needed, you may desactivate it by clicking the Disable button. You will have to confirm your choice. Note that the portfolio page is deleted, but not the children pages, which can be relocated as needed. If you want to delete all of them, start by removing them in bulk (check the boxes and choose Move to trash from the bulk action menu), before disabling the module.

Gallery
The gallery module allows easy creation and management of the gallery page.

Activation
To use the gallery, you should first activate it : simply click on the activate button. Once activated, the gallery section is hidden (the corresponding page is in draft mode), to allow images upload without having them displayed on the website while everything is not ready. You can then edit the gallery page to change the page content, which is displayed below the images gallery.

Managing gallery
To add images to the gallery, use the small form at the top of the module page : choose a file, set a title and click upload. The image is uploaded, resized as needed and added to the gallery. Once uploaded, you may edit images (to change title and other information) by clicking on the link below them. The module options can be easily changed at the bottom of the module page. Try changing values until you are satisfied by the result.

Publishing
When you are satisfied by the gallery content, unhide it by clicking the Show button in the Options section of the panel, or by clicking on the link in the message at the top of the page. You may also edit the gallery page, and publish it from here. Once activated, the gallery may be hidden at any time : click on the hide button in the Options section, it will reset the gallery page as draft.

Desactivation
If the gallery section is no longer needed, you may desactivate it by clicking the Disable button. You will then have to confirm your choice. Note that the gallery page is deleted, but not the attached images, which remain in the media library. If you want to delete all of them, start by removing them in bulk (check the boxes and choose Delete from the bulk action menu), before disabling the module.

Content edition
Here a some tips to help you format content when editing pages or post:

Images sizes
Maximum width for images within content is 650px for post, 740px for pages. To add a frame around your images, just add the img-frame class to it: <img src="..." class="alignnone size-full wp-image-8 img-frame"> When using frame, maximum width for images within content is 640px for post, 730px for pages. On full-width pages, maximum width is 854px for posts (844px with frame) and 924px for pages (914px with frame).

Usefull classes
To create a bulleted list, add the bullet class to it: <ul class="bullet"> <li>...</li> </ul> For small text (for instance: for footer notes), add the footer-notes class: <p class="footer-notes">...</p> Within this block, use <strong> tag to highlight text in the template color.

Code snippets
Here is a quick list of useful code snippets. To find more styles, read the HTML guide or open the static files of the template, most styles are in the index.html file. Open contact form link Add a simple link, aywhere in your page: <a href="#contact" title="Contact us">Contact us</a> Button link Use this markup to create a button link: <a href="#" class="button-link"><b>link</b></a>

Columns When creating columns, wrap them in a div with the class columns, to prevent further content to behave weirdly. Two columns style: <div class="columns"> <div class="colx2-left">content</div> <div class="colx2-right">content</div> </div> Three columns style: <div class="columns"> <div class="colx3-left">content</div> <div class="colx3-center">content</div> <div class="colx3-right">content</div> </div> Three columns style, with 2 left columns merged: <div class="columns"> <div class="colx3-left-double">content</div> <div class="colx3-right">content</div> </div> Three columns style, with 2 right columns merged: <div class="columns"> <div class="colx3-left">content</div> <div class="colx3-right-double">content</div> </div> Four columns style: <div class="columns"> <div class="colx4-col">content</div> <div class="colx4-col">content</div> <div class="colx4-col">content</div> <div class="colx4-col">content</div> </div> When using four-columns style, use colx4-col-double and colx4-col-triple to merge two or three columns into one: <div class="columns"> <div class="colx4-col-triple">content</div> <div class="colx4-col">content</div> </div>

10

Table To use the template custom table style, use the table class. Odd rows will be style automatically. <table class="table" cellpadding="0" cellspacing="0"> <thead> <tr> <th class="grey" scope="col">Column</th> <th scope="col">Column</th> <th scope="col">Column</th> </tr> </thead> <tfoot> <tr> <th scope="row">Footer</th> <td>Column</td> <td>Column</td> </tr> </tfoot> <tbody> <tr> <th scope="row">Footer</th> <td>Column</td> <td>Column</td> </tr> <tr> <th scope="row">Footer</th> <td>Column</td> <td>Column</td> </tr> </tbody> </table> Grey block Create a grey background block: <div class="grey-block">Content</div> Messages To use the template messages styles, create a <ul> with one ore more of the following classes: <ul class="messages"> <li class="error-msg">This is an error message</li> <li class="warning-msg">This is a warning message</li> <li class="information-msg">This is an information message</li> <li class="confirmation-msg">This is a confirmation message</li> </ul>

11

Wordpress special features

Threaded comments
The template is compatible with Wordpress 2.9 threaded comments. To enable this function, go in the Discussion panel of the Wordpress Settings section, and check the box Enable threaded (nested) comments. Users will then be able to reply to others comments.

Posts thumbnails
The template is also compatible with Wordpress 2.9 post and page thumbnails. When writing a post or a page, look for the Post thumbnail box, click the Set thumbnail link, choose desired image, and click on Use as post thumbnail. You can edit options for post/page thumbnails in the Options panel of the Blue Earth section.

Full width template

The Blue Earth theme includes a full-width page template, without sidebar. To use it, choose the corresponding template in the Attributes box when editing your page.

Change front page content

To use another page than the last posts as the website front page, follow these steps: Create the new front page If the page you want to use as front page does not exist, create it first, and click the Publish button. You can use any title you like, for instance: Home, Welcome... Create the posts page create a page that will serve as your sites Blog page. Just add the title - Blog, Posts, News... - and click Publish. Change Wordpress settings in the Settings section, open the Reading panel: change Front Page Displays from Your Latest Posts to A static page, and set the two dropdown to the following page: Front page Posts page the new front page to use The posts page you just created

Then, just hit Save changes and you're done!

12

Credits
This template uses the following components : CSS reset By Eric Meyer : http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ jQuery library Available at http://jquery.com/ Dual licensed under the MIT and GPL licenses : http://docs.jquery.com/License Clearfix reloaded http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ Days font This font is from Alexander Kalachev, under Creative Commons Attribution 3.0 Unported licence : http://www.fontsquirrel.com/license/Days Silk icon set By Fam Fam Fam. Licence : Creative Commons Attribution 2.5 - http://creativecommons.org/licenses/by/2.5/ jQuery backgroundPosition plugin By Alexander Farkas : http://www.protofunc.com/scripts/jquery/backgroundPosition/ Licenced under MIT Licence and GPL Licence : http://jquery.com/dev/svn/trunk/jquery/MIT-LICENSE.txt http://jquery.com/dev/svn/trunk/jquery/GPL-LICENSE.txt DD_belatedPNG By Drew Diller : http://www.dillerdesign.com/experiment/DD_belatedPNG/ Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license Fancybox By Janis Skarnelis : http://fancybox.net Dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html Social.me icon set By ~jwloh http://jwloh.deviantart.com/art/Social-me-90694011

13

Blue Earth
contact
contact@display-inline.fr http://themeforest.net/user/displayinline

Wordpress theme

14