Blakesley

HTML Files and Structure

This template is a fixed layout with two columns.

This zip flie contains 34 html files (4 home page, 12 content pages (shortcodes, typography, left / right sidebar, full width page, etc.), sitemap, page 404, 2 pages of products, 6 portfolio pages, 5 gallery pages, 2 blog pages and contact page

Main navigation, user area, search and logo are located in the upper zone - div with id "header".

Copyright and social links are in bottom zone - div with id "footer".

All information in main content area is in div with id "middle" .

"middle" zone can consist 2 zones:
div with id "content" , which displays content of the page,
and sidebar content wich is in a div with id "sidebar", and contains some helpful information.

extra navigation is in - div with id "breadcrumb".

Zone for extra widgets is in div with id "middle_bottom".

Widgets in bootom is in div with id "bottom", this zone is hiden in bottom of page. It is visible when you press "more widgets" button.

slider in main page is in div with id "top"

There is also zone with 3 widgets on main page. div with id "home"

CSS Files and Structure

There is 22 css files in template.

16 color schemes.

2 general css files
First - general options file style.css, it contains general parameters of html-pages.
Second depends on color scheme: blue.css, light_blue.css, strong_blue.css, deep_blue.css, brown.css, green.css, light_green.css, strong_green.css, grey.css, orange.css, purple.css, light_purple.css, red.css, violet.css, deep_violet.css, yellow.css.

General files devided on zones with html-files id's.: "header", "top", "middle", "home", "breadcrumb", "portfolio", "content", "sidebar", "middle_bottom", "bottom", "footer", "widgets", "slider".

Also there is 5 support css-files:
nivo-slider.css - displaying the Nivo-slider on homepage,
coin-slider-styles.css - displaying Coin-slider on home page,
kwicks-1.5.1.css - responsible for displaying Kwicks-slider on homepage,
pretty_photo.css - is responsible for the visual design of the lightbox,
ie.css - special configuration file Internet Explorer special settings.

JavaScript Files and Structure

This template contains 20 Javascript files.

1. jquery-1.4.2.min.js
2. jquery-ui.min.js
3. jquery.pretty_photo.js
4. cufon-yui.js
5. MyriadPro_All.font.js
6. CharisSIL.font.js
7. DroidSerif.font.js
8. Lobster.font.js
9. MgOpenModata.font.js
10. YanoneKaffeesatz.font.js
11. ie.js
12. DD_belatedPNG.js
13. script.js
14. jquery.nivo.slider.js
15. coin-slider.js
16. jquery.kwicks-1.5.1.js
17. jquery.easing.1.3.js
18. tabs.js
19. jquery.cycle.all.latest.js
20. jquery.cookie.js

1. JQuery is a library, Javascript, which significantly reduces the amount of code that the user has to write himself.

2. JQuery-UI is a plugin for the JQuery library that is responsible for animation-effects.

3. JQuery-plugin which responsible for lightboxes.

4. JQuery-plugin which is responsible for displaying decorative fonts.

5. Generated font-file for Myriad Pro.

6. Generated font-file for Charis SIL.

7. Generated font-file for Droid Serif.

8. Generated font-file for Lobster.

9. Generated font-file for Mg Open Modata.

10. Generated font-file for Yanone Kaffeesatz.

11. Custom settings for Internet Explorer.

12. JQuery-plugin that is responsible for transparency in png-files in Internet Explorer 6.0
There is also settings for the plugin: DD_belatedPNG.fix ('div, img, a, li');

13. User interface settings.

14. JQuery-plugin which is responsible for the Nivo-slider, also for setting up the plugin of uses parameters such as:

directionNav: false - hide/show "prev/next" slide button

captionOpacity: 1 - transparence of slider caption

controlNavThumbs: true - hides or shows thumbs navigation in Nivo-slider

controlNavThumbsFromAlt: true - allows to get url from alt of image

effect: 'random' - slider animation effects (random, sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade)

animSpeed: 500 - animation speed of slider (in milliseconds)

pauseTime: 7000 - duration of slide (in milliseconds)

pauseOnHover: true - not changes a slide when mouse on slider

1500 in the end - pause to load the slider

15. JQuery-plugin which is responsible for the Coin-slider, uses such parameters:

width: 980 - slider width in pixels

height: 380 - slider height in pixels

spw: 10 - horizontal amount of rectangles

sph: 4 - vertical amount of rectangles

delay: 5000 - duration of slide (in milliseconds)

sDelay: 30 - pause before each rectangle in animation (in milliseconds)

opacity: 0.9 - transperancy of slider caption

titleSpeed: 500 - caption fade speed (in milliseconds)

effect: '' - slider animation options (random, swirl, rain, straight)

navigation: true - show/hide navigation in slider

links : true - enables/disables slides links

hoverPause: true - not changes a slide when mouse on slider

16. JQuery-plugin for Kwicks-slider (accordion), has such parameters:

max: 700 - maximum width of active slide

duration: 1700 - slide opening speed (in milliseconds)

isVertical: false - vertical/horizontal slider

easing: 'easeOutBack' - slider animation effect (need JQuery Easing plugin)

17. JQuery Easing is a plugin for JQuery lybrary and it's responsible for animation effects.

18. Tabs is a jquery-plugin for JQuery lybrary that is responsible for tabs and accordions.

19. JQuery Cycle is a jquery-plugin for JQuery lybrary that is responsible for news, products and testimonials scrolls.

20. JQuery Cookie is a jquery-plugin for JQuery lybrary that is responsible for switching of color-schemes.

PSD Files and Structure

Professionally crafted clean, business website design (with surprise).

16 color schemes
Total 23 fully layered and well-grouped PSDs!!!
Multiply pages 980 px. design.

Include:

PSD with ALL SUBPAGES!!! (Surprise! Secret Easter egg layer. Free clipart for the most curious)

20 pages designs in separate files with jpg previews:
• Home
• About
• Full Width Page
• News
• Services
• Tabs, Toggle, Accordion
• Testimonials
• Typography
• Product Page
• Products
• Album Page
• Gallery
• Portfolio Four Columns
• Portfolio Three Columns
• Portfolio Two Columns
• Portfolio One Column
• Project Page
• Blog
• Blog Post
• Contacts

Bonus 3 PSDs:

• Home page PSD with rollovers, more widgets and login lightbox
• Lightbox PSD
• Color schemes PSD

This template can be suitable, especially, for such industries:
Consulting, Marketing, Finance, Investment, Banks, Agencies, Research, Real Estate, Architecture, Interior design, Innovations etc.

Other Settings

Zip is also includes 16 folders: blue, light_blue, strong_blue, deep_blue, brown, green, light_green, strong_green, grey, orange, purple, light_purple, red, violet, deep_violet и yellow, with 16 color schemes.

To change color scheme you need change header part in html-file (eg if you need to change blue with red, you need to edit <link rel="stylesheet" href="css/blue.css" type="text/css" title="main" />,and replace it replace href="css/blue.css" with href = "css / red.css").

After this you need to disable style changer:

1) you must replace script of style changer:

<script type="text/javascript">
   $(document).ready(function(){
      var cookieStyle = 'style';
      var def = $("link#stylesheet").attr('href');
      var cookieOptions = {expires: 7, path: '/'};
      if($.cookie(cookieStyle) != null){
         $("#styleswitcher").parent().find('span').remove();
         $col = $.cookie(cookieStyle).replace('_', ' ');
         $("link#stylesheet").attr({ href: "css/" + $.cookie(cookieStyle) + ".css" });
         $("#styleswitcher").parent().append('<span>   Selected color scheme is "<span style="text-transform:capitalize;">' + $col + '"</span></span>');
      }
      $("#styleswitcher").change(function(e){
         var $bh = $('body').height();
         $('body').append('<div id="load"></div>');
         $('#load').css({ zIndex: '1000', display: 'none', position: 'absolute', top: '0', left: '0', width: '100%', height: $bh, background: '#333 url(images/loader.gif) no-repeat center 400px', display: 'block' }).fadeIn(1000).delay(3000);
         e.preventDefault();
         $.cookie(cookieStyle, $("#styleswitcher option:selected").val(), cookieOptions);
         $("link#stylesheet").attr({ href: "css/" + $.cookie(cookieStyle) + ".css" });
         if($( "#styleswitcher").parent().find('span') ){ $("#styleswitcher").parent().find('span').remove(); }
         $col = $.cookie(cookieStyle).replace('_', ' ');
         $("#styleswitcher").parent().append('<span>   Selected color scheme is "<span style="text-transform:capitalize;">' + $col + '"</span></span>');
         if( $('#middle .navigation .wp-pagenavi a img').parent() ){
            $('#middle .navigation .wp-pagenavi a img').parent().removeClass('hov');
            $('#middle .navigation .wp-pagenavi a:first img').attr({ src: 'css/' + $.cookie(cookieStyle) + '/pager_prev.png' });
            $('#middle .navigation .wp-pagenavi a:last img').attr({ src: 'css/' + $.cookie(cookieStyle) + '/next_prev.png' });
         }
         $('#load').fadeOut(1000, function(){ $(this).remove(); });
      });
      if( $('#middle .navigation .wp-pagenavi a img').parent() && $.cookie(cookieStyle) ){
         $('#middle .navigation .wp-pagenavi a img').parent().removeClass('hov');
         $('#middle .navigation .wp-pagenavi a:first img').attr({ src: 'css/' + $.cookie(cookieStyle) + '/pager_prev.png' });
         $('#middle .navigation .wp-pagenavi a:last img').attr({ src: 'css/' + $.cookie(cookieStyle) + '/next_prev.png' });
         $('#middle .navigation .wp-pagenavi a:first img').parent().hover(function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/' + $.cookie(cookieStyle) + '/pager_prev_sel.png' });
         }, function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/' + $.cookie(cookieStyle) + '/pager_prev.png' });
         });
         $('#middle .navigation .wp-pagenavi a:last img').parent().hover(function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/' + $.cookie(cookieStyle) + '/pager_next_sel.png' });
         }, function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/' + $.cookie(cookieStyle) + '/pager_next.png' });
         });
      } else if( $('#middle .navigation .wp-pagenavi a img').parent() ){
         $('#middle .navigation .wp-pagenavi a img').parent().removeClass('hov');
         $('#middle .navigation .wp-pagenavi a:first img').attr({ src: 'css/blue/pager_prev.png' });
         $('#middle .navigation .wp-pagenavi a:last img').attr({ src: 'css/blue/next_prev.png' });
         $('#middle .navigation .wp-pagenavi a:first img').parent().hover(function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/blue/pager_prev_sel.png' });
         }, function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/blue/pager_prev.png' });
         });
         $('#middle .navigation .wp-pagenavi a:last img').parent().hover(function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/blue/pager_next_sel.png' });
         }, function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/blue/pager_next.png' });
         });
      }
   });
</script>

with this script:

<script type="text/javascript">
   $(document).ready(function(){
      if( $('#middle .navigation .wp-pagenavi a img').parent() ){
         $('#middle .navigation .wp-pagenavi a img').parent().removeClass('hov');
         $('#middle .navigation .wp-pagenavi a:first img').attr({ src: 'css/blue/pager_prev.png' });
         $('#middle .navigation .wp-pagenavi a:last img').attr({ src: 'css/blue/next_prev.png' });
         $('#middle .navigation .wp-pagenavi a:first img').parent().hover(function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/blue/pager_prev_sel.png' });
         }, function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/blue/pager_prev.png' });
         });
         $('#middle .navigation .wp-pagenavi a:last img').parent().hover(function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/blue/pager_next_sel.png' });
         }, function(){
            $(this).find('img').removeAttr('src').attr({ src: 'css/blue/pager_next.png' });
         });
      }
   });
</script>

2) you must delete this code:

<div class="changer" style="position:absolute; top:5px; left:0; color:#fffffe; z-index:500;">
   Change color:    
   <select id="styleswitcher" name="styleswitcher" style="width:150px; line-height:1em;">
      <option value="blue">Blue</option>
      <option value="light_blue">Light Blue</option>
      <option value="strong_blue">Storng Blue</option>
      <option value="deep_blue">Deep Blue</option>
      <option value="brown">Brown</option>
      <option value="green">Green</option>
      <option value="light_green">Light Green</option>
      <option value="strong_green">Storng Green</option>
      <option value="grey">Grey</option>
      <option value="orange">Orange</option>
      <option value="purple">Purple</option>
      <option value="light_purple">Light Purple</option>
      <option value="red">Red</option>
      <option value="violet">Violet</option>
      <option value="deep_violet">Deep Violet</option>
      <option value="yellow">Yellow</option>
   </select>
</div>

that's all...

Do not forget to copy the folders with images that relate to the color schemes, and have the same name as the color scheme.