This theme is packed with jQuery Carousels that are really “Eye Candy” but at the same time very practical.

Here are the features:

• Valid XHTML /CSS Strict
• Table Less Layout
• 6 different color styles
• Jquery Carousel (vertical and horizontal)
• jQuery Colorbox (lightbox)
• jQuery Drop down menu
• 11 XHTML pages inluded
  • 3 custom post pages
  • 3 custom blog pages
• 5 PSD files included
• easy to customize
• code well documented

Preview all the color schemes

• Preview style (brown)
• Preview style (pink)
• Preview style (blue)
• Preview style (green)
• Preview style (orange)
• Preview style (red)

Related posts:

1. MinimaxWhite Main features: Valid XHTML /CSS Strict Table Less Layout 6...
2. New Wordpress Theme: MinimaxWhite New Wordpress theme is now available at ThemeForest for only...
3. Book Template A WordPress blog/portfolio theme, designed to be used as a...

Related posts brought to you by Yet Another Related Posts Plugin.

1. header.php

Replace line 21-34:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/functions.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-easing.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/superfish.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.galleryview-1.1.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.timers-1.1.2.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$('li.current_page_parent').addClass('current_page_item');
$('li.current_page_ancestor').addClass('current_page_item');
$("ul.sf-menu").superfish();
});
</script>

with:

<?php wp_enqueue_script ('fancytheme-functions', get_bloginfo('template_directory') . '/js/functions.js', array ('jquery')); ?>
<?php wp_enqueue_script ('fancytheme-jquery-easing', get_bloginfo('template_directory') . '/js/jquery-easing.js', array ('jquery')); ?>
<?php wp_enqueue_script ('fancytheme-superfish', get_bloginfo('template_directory') . '/js/superfish.js', array ('jquery')); ?>
<?php wp_enqueue_script ('fancytheme-jquery-galleryview', get_bloginfo('template_directory') . '/js/jquery.galleryview-1.1.js', array ('jquery')); ?>
<?php wp_enqueue_script ('fancytheme-jquery-timers', get_bloginfo('template_directory') . '/js/jquery.timers-1.1.2.js', array ('jquery')); ?>
<?php wp_enqueue_script ('fancytheme-jquery-cycle', get_bloginfo('template_directory') . '/js/jquery-cycle.js', array ('jquery')); ?>
<?php wp_head(); ?>

<script type="text/javascript">
jQuery(document).ready(function($){
$('li.current_page_parent').addClass('current_page_item');
$('li.current_page_ancestor').addClass('current_page_item');
$("ul.sf-menu").superfish();
});
</script>

2. highlight_slider.php

Replace line 2:

$(document).ready(function(){

with:

jQuery(document).ready(function($){

3. highlight_filmstrip.php

Replace line 2:

$(document).ready(function(){

with:

jQuery(document).ready(function($){

4. page.php

Replace line 31-37::

<?php
$key="gallery"; if ( get_post_meta($post->ID, $key, true) != '' ) {
?>
<div id="gallery"><?php echo get_post_meta($post->ID, $key, true) ?></div>
<?php
}
?>

with:

<?php
$key="gallery"; if ( get_post_meta($post->ID, $key, true) != '' ) {
?>
<div id="slideshow-gallery" class="clearfix">
<div id="slideshow"><?php echo get_post_meta($post->ID, $key, true) ?></div>
<ul id="gallery_changer"></ul>
</div>
<script type="text/javascript">
// redefine Cycle's updateActivePagerLink function
jQuery.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
jQuery(pager).find('li').removeClass('current')
.filter('li:eq('+currSlideIndex+')').addClass('current');
};

jQuery(function() {
jQuery('#slideshow').cycle({
timeout: 3000,
pager:  '#gallery_changer',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#">'+ slide.src +'</a></li>';
}
});
});
</script>
<?php
}
?>

5. style.css

Add new classes:

#main-content #slideshow-gallery
{
margin: 0 -20px 20px -20px;
padding: 10px;
background-color: #f3f3f3;
text-align: center;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}

#main-content #slideshow-gallery img
{
padding: 0;
margin: 0;
border: none;
width: 581px;
}

#main-content #slideshow-gallery ul
{
list-style: none;
margin: 0;
padding: 0;
}

#main-content #slideshow-gallery ul li
{
float: left;
margin: 0;
padding: 15px 5px 5px 10px;
background: none;
}

#main-content #slideshow-gallery ul li a
{
width: 14px;
height: 14px;
display: block;
text-indent: -9999px;
background-color: #fff;
border: 1px solid #424747;
}

#main-content #slideshow-gallery ul li a:hover
{
background-color: #424747;
}

#main-content #slideshow-gallery ul li.current a
{
background-color: #9cb032;
border: 1px solid #9cb032;
}

Finally

There are also changes in:

• js/functions.js
• js/jquery.galleryview-1.1.js
• js/jquery-cycle.js

but as for this functions, I recommend you just replace the old ones.

Related posts:

1. Inspiredblog: How to implement filmstrip navigation from FancyTheme “I would really appreciate your suggestion of a tutorial, how...
2. ChangeLog – FancyTheme v4.2 This update will fix most problems people have with Internet...
3. Inspiredblog: How to disable style switchers and select your default color? My latest theme Inspiredblog, has a pretty cool feature called...

Related posts brought to you by Yet Another Related Posts Plugin.

Let’s finish the job

Open ‘index.php‘ file and on top you will see:

...
<div id="page-content" class="clearfix">
<?php include ('headimage.php'); ?>
...

Replace the lines so the code looks like this:

...
<?php include ('headimage.php'); ?>
<div id="page-content" class="clearfix">
...

Now, repeat this step for pages: ‘single.php‘, ‘page.php‘ and ‘search.php‘.

Add a little style

Replace styles in “style.css” file with:

#page-navigation
{
background: url("images/bg_page_content.png") repeat-y 0% 0%;
padding: 0px 0px 0px 20px;
}

#content-head
{
background: url("images/bg_page_navigation.png") no-repeat 0% 0%;
padding: 20px 10px 0px 10px;
height: 240px; /* insert height of your pictures */
}

Finally

The origibal ‘bg_page_navigation.png’ file was only 60px in height which is insufficient for our task. So, you have to replace it with a new one.

Download new ‘bg_page_navigation.png’ file

Related posts:

1. Retro theme tutorials (part I): How to position the navigation menu below the header image? TealGray Retro Theme is our most succesfull wordpress template so...
2. Inspiredblog: How to implement filmstrip navigation from FancyTheme “I would really appreciate your suggestion of a tutorial, how...
3. Inspiredblog: How to set up a simple contact form using Contact Form 7 plugin Most of us, are using some kind of wordpress plug-ins...

Related posts brought to you by Yet Another Related Posts Plugin.

TF announced this post late in December and it got my intention (not just mine). We had another project going and a very little time for something like this. So, I handled it on my own, in my free time. The result can be viewed here.

Related posts:

1. Business in Color I A simple, clean, colorful and beautiful business site. Features: valid...
2. Business in Color II A simple, clean, colorful and beautiful business site. Features: valid...

Related posts brought to you by Yet Another Related Posts Plugin.