“ECOBIZ - Modern Business Template ” Documentation by “imediapixel”


“ECOBIZ”

Created: 03/28/2011
By: imediapixel
Email: imediapixel@gmail.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

  1. HTML Structure
  2. CSS Files and Structure
  3. Changing Backround Color
  4. Changing Backround Pattern
  5. Changing Backround Image
  6. JavaScript
  7. Changing Cufon Font
  8. PSD Files
  9. Sources and Credits
  10. PHP Code Explanation

A) HTML Structure - top

ECOBIZ template is modern business template that can be switchted for your corporate and business site with two columns layout. All of the information within the main content area is nested within a div with an id of "maincontent" . Navigation menu is within a div with an id of "myslidemenu". The general template structure is the same throughout the template. Here is the general structure
HTML Structure

Navigation HTML Stucture

Navigation at this theme using dropdown menu style, where nested <ul> tags is structure submenu, and here is menu structure :


Slideshow HTML structure

below the structure for slideshow :


You can change the images source with your own images, make sure you put your image in images folder, so it's make easier to organize. The slideshow div divide into two sections, for text wrapper <div class="slide-text"> and image block <div class="slide-img">.

Footer HTML Structure

There's four columns box in footer area, and also div for site copyright at the bottom of footer section, here detail for footer HTML structure which commented for each sections.



B) CSS Files and Structure
- top

There are seven css files:
1) style.css (use for all pages, the main css file)
2} prettyPhoto.css(used for lightbox styling)
4) jqueryslidemenu.css (for menu styling)
4) nivo-slider.css (for nivo slider styling)
6) reset.css (use for reset browser behavior)

The style.css file contains all of the specific stylings for the page. The file is separated into Section and Sub sections ,and here the summary of the structure css code :

Changing default permalink color

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:
for main content:
.maincontent a {
color: #000000;
}
for sidebar:
.sidebar a{
color: #000000;
}

Changing paragraph font size

you would do the following:
for main content:
.maincontent p {
font-size: 1.4em;
color: #4a4a4a;
}
for sidebox :
.sidebar p {
font-size: 1.4em;
color: #4a4a4a;
}

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.


C) Changing Background Color - top

to change default background color, please open style.css file and find this code block :

body {
background-color: #669100;
background-image: url(../images/pattern/grid2.png);
background-repeat: repeat;
font-family: arial, verdana, tahoma, helvetica;
}

Now change #669100 color code in background-color property in above css code with your own color, eg. #f00000



D) Changing Background Pattern - top

to change default background pattern , please open style.css file and find this code block :

body {
background-color: #669100;
background-image: url(../images/pattern/grid2.png);
background-repeat: repeat;
font-family: arial, verdana, tahoma, helvetica;
}
Now change grid1.png pattern in background-image property in above css code with available pattern that located in images/pattern folder, eg. flower-swirl1.png , here the list of patterns that available with ECOBIZ template (25 pattern) :
  1. diagonal-line1.png
  2. diagonal-line2.png
  3. dot.png
  4. flower-swirl1.png
  5. flower-swirl2.png
  6. flower-swirl3.png
  7. flower-swirl4.png
  8. flower-swirl5.png
  9. flower-swirl6.png
  10. flower-swirl7.png
  11. flower-swirl8.png
  12. flower-swirl9.png
  13. flower-swirl10.png
  14. grid1.png
  15. grid2.png
  16. grid3.png
  17. grid4.png
  18. horizontal-line1.png
  19. horizontal-line2.png
  20. mozaic1.png
  21. mozaic2.png
  22. pixelite.png
  23. vertical-line1.png
  24. vertical-line2.png
  25. vertical-line3.png

E) Changing Background Image - top

to change default background color, please open style.css file and find this code block :

/* === Custom Background Image :: uncomment this code block if you want to use background image === */
/*
body {
background-image: url(../images/bg1.jpg);
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
}
*/

Now change the code to :

body {
  background-image: url(../images/bg1.jpg);
  background-position: top center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}      

basically you just need to remove comment style in above code, if you want to change the background image with your own, you need to place your image in images folder first, now just change bg1.jpg with your image name.



F) JavaScript - top

This template imports ten Javascript files.

  1. jquery.js (jQuery Library, http://jquery.com)
  2. cufon.js (Cufon Library for Font Replacement, http://wiki.github.com/sorccu/cufon/about)
  3. jqueryslidemenu.js (Dropdown menu library, http://www.dynamicdrive.com/style/)
  4. http://nivo.dev7studios.com (for nivo slider,http://nivo.dev7studios.com)
  5. http://www.no-margin-for-errors.com,(lighbox library, http://www.no-margin-for-errors.com)
  6. jquery Kwicks (for kwicks slider,https://github.com/Mottie/Kwicks)
  7. jQuery Gmap,(for google map locator in contact page, http://gmap.nurtext.de/)
  8. jquery.twitter.js (for twitter feed, http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter)
  9. functions.js (for template functionality)

If you want to change main slideshow speed, please open index.html file find this code :

    $(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
pauseTime:3000, // How long each slide will show
directionNav:true, // Next and Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true // 1,2,3... navigation
});
});
you can change 3000 value in speed parameter to higher or lower number, the format is in milliseconds, also you can change the slideshow effect, for detail effect please visit http://nivo.dev7studios.com/#usage


G) Changing Cufon Font - top

Changing Cufon Font
If you want to use your own font, you need to generate your font first at http://cufon.shoqolate.com/ and for detail documentation please visit http://wiki.github.com/sorccu/cufon/, after you have converted your font, please place the font at fonts folder that located inside js folder (js/fonts/).
now find this script
<script type="text/javascript" src="js/fonts/ColaborateLight.js"></script>
and change ColaborateLight.js with your own font name, so the the code should be look like this :
<script type="text/javascript" src="js/fonts/yourfontname.js"></script>


H) PSD Files - top

I've included ten psds with this theme:

  1. about.psd
  2. contact.psd
  3. homepage.psd
  4. portfolio-4col.psd
  5. services.psd

I) Sources and Credits - top

I've used the following images, script, icons or other files as listed


J) PHP Code Explanation - top

There are two php file called sendemail.php that used for contact form processing, to change the email address as your default email for receiving message please open submitemail.php file and change this code (about line 7) :
$mailto = "imediapixel@gmail.com";
you just need to change the variable imediapixel@gmail.com value with your own email address.


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.

imediapixel

Go To Table of Contents