New Wordpress theme is now available at ThemeForest for only $27. Take a look at my previous post for details or check live demo.

Main features:

• Valid XHTML /CSS Transitional
• Wordpress as CMS – one and two column design
• 5 PSD Files included
• 6 colors schemes
  • Brown
  • Red
  • Pink
  • Green
  • Orange
  • Blue
• Jquery Carousel (vertical and horizontal)
• jQuery Colorbox (lightbox)
• jQuery Drop down menu
• Comments of Post Author and admin are highlighted
• Author description below the post (you choose)
• Related posts below the post (you choose)
• Gravatar Support
• widget-ready area
  • Posts sidebar
  • Pages sidebar
• Custom template pages
  • Homepage
  • Blog page
  • Portfolio page
  • Project page (opened in colorbox)
  • Redirect page
• 3-level drop down navigation menu

Custom Theme Option Page:

• Choose one of six color schemes
• Blog post layout (3 layouts)
• Post layout (3 layouts)
• Page layout (3 layouts)
• Homepage highlight animation (pages or posts)
• Featured columns (set catagories for each column)
• Author description below posts (show/hide)
• Related posts below posts (show/hide)
• Banner sdvertising settings
  • 6 x sidebar banner (125×125)
    Specify position in sidebars (homepage/posts/pages)
    • Do not show in sidebar
    • Sho before widgets
    • Show after widgets
  • or custom code for sidebar banners (buysellads.com)

Related posts:

1. Inspiredblog theme Main features: Valid XHTML /CSS Transitional Wordpress as CMS –...
2. A Classy Theme (first preview) I just finished new wordpress theme called "A Classy Theme"....
3. A Classy Theme A great and classy WordPress theme special for web portals,...

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

I implemented all great features from Site Template and I included couple new ones that I think you’ll love. There are also couple design and typography improvements that raises this theme to next level.

Let’s see main features of this theme and than you can look a live demo.

Homepage Post/Pages Vertical Carousel

Three Featured columns (homepage/posts/pages)

Portfolio Page With Vertical Carousel (custom template page)

Project Page With Horizontal Carousel (custom template page)

Related Rosts Section (enabled from theme options panel)

Post Author Section (enabled from theme options panel)

Extended comments

Available on ThemeForest? When?

I uploaded it to ThemeForest and I hope it will be available for download in couple days.

Related posts:

1. New Wordpress Theme: MinimaxWhite New Wordpress theme is now available at ThemeForest for only...
2. A Classy Theme (first preview) I just finished new wordpress theme called "A Classy Theme"....
3. New Site Template: MinimaxWhite I didn’t released any site template in a while so...

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

Here is the change log:

1. header.php

Remove line 11:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/superfish.css" type="text/css" media="screen" />

and line 33:

$("ul.sf-menu").superfish();

Change line 50 to:

<ul id="nav">

2. style,css

Completely remove “Page navigation” section (line 224-278) and replace them with these new lines:

/* Page navigation
------------------------------------------------------*/

#nav, #nav ul{
z-index:999;
list-style-type:none;
list-style-position:outside;
position:relative;
}

#nav a{
display:block;
float:none;
font: bold 1.0em Arial, Tahoma, sans-serif;
color: #fff;
text-decoration: none;padding: 12px 15px 13px 15px; }

#nav a:hover{
background: url("images/bg_nav_hover.gif") repeat-x 0% 0%;
}

#nav li{
float:left;
position:relative;
}

#nav li:hover{
background: url("images/bg_nav_hover.gif") repeat-x 0% 0%;
}

/* first dropdown */
#nav ul {
position:absolute;
top:3.3em;
z-index:999;
margin: 0;
padding: 0;
background-color: #7a7d7d;
}

#page-navigation #nav li ul li{
float: left;
clear: both;
height: auto;
padding: 0;
margin: 0;
}

#page-navigation #nav li li:hover{
background-color: #9cb032;
}

/* drop links */
#page-navigation #nav li ul a {
width:15em;
height:auto;
z-index:999;
border: none;
padding: 7px 5px 7px 15px;
}

#page-navigation #nav li ul a:hover {
background: none;
background-color: #9cb032;
}

#nav ul ul{
top:auto;
z-index:999;
}

#nav li.current_page_item a
{
background: url("images/bg_nav_active.gif") no-repeat 50% 100%;
padding: 14px 15px 18px 15px;
border-left: 1px solid #ece9e2;
border-right: 1px solid #ece9e2;
}

#nav li.current_page_item li a
{
background: none;
background-color: #7a7d7d;
}

/* second level dropdown */
#nav li ul ul {
left:16.6em;
margin:-2.4em 0 0 0;
z-index:99;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
z-index:99;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
z-index:99;
}

3. functions.js

Add new function that will interact with drop down menu:

function MainNavigation(){
$("#nav ul ").css({display: "none"}); // Opera Fix
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}

$(document).ready(function(){
MainNavigation();
});

Related posts:

1. ChangeLog – FancyTheme v3.1 This update fixes the problem with other plugins that uses...
2. 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...
3. Inspiredblog: How to implement filmstrip navigation from FancyTheme “I would really appreciate your suggestion of a tutorial, how...

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

“I would really appreciate your suggestion of a tutorial, how to include the gallery of your Fancy Theme’s starting page to the starting page of Inspired Blog. I guess, this would be interesting to others, too.. “ said Colorit.

Well, it took me a little while, but here is a tutorial how to do it.

1. Add new options to administration

Open “admin-options.php” file located in “functions” folder and insert (paste) the following code at line 46:

array(	"name" => "Filmstrip navigation",
"type" => "heading",
"desc" => "Settings for home post animation"),

array(	"name" => "Post/page Highlight IDs",
"desc" => "Please enter ID of post(s) you want to display on homepage and separate them by commas",
"id" => $shortname."_hl_ID",
"std" => "",
"type" => "text"),

array(	"name" => "Highlight overlay color",
"desc" => "Please enter color of overlay panel",
"id" => $shortname."_hl_overlay",
"std" => "",
"type" => "text"),

array(	"name" => "Highlight opacity",
"desc" => "Please enter opacity overlay panel (Example: 0.6, 0.3 ...)",
"id" => $shortname."_hl_opacity",
"std" => "",
"type" => "text"),

array(	"name" => "Filmstrip Thumbnail width",
"desc" => "Please enter desired thumbnail width",
"id" => $shortname."_h1_thumb_width",
"std" => "",
"type" => "text"),

array(	"name" => "Filmstrip Thumbnail height",
"desc" => "Please enter desired thumbnail height",
"id" => $shortname."_h1_thumb_height",
"std" => "",
"type" => "text"),

2. Copy all javascript files

Just download this zip file and extract it to themes “js” folder.

3. Include javascript files

Open “header.php” file and replace old jQuery easing plugin at line 43:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.min.js" type="text/javascript"></script>

with the following code:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js" type="text/javascript"></script>

and add this two lines as last called javascript functions:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.galleryview-1.1.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.timers-1.1.2.js" type="text/javascript"></script>

4. Set new easing effect for LavaLamp menu

New easing plugin has changed animation names so we need to change line 56:

jQuery("#nav").lavaLamp({ fx: "backout", speed: 700 });

to:

jQuery("#nav").lavaLamp({ fx: "easeOutBack", speed: 700 });

5. Create filmstrip navigation file

Create new blank file “filmstrip_navigation.php” in themes root directory and paste the following code:

<script type="text/javascript">
jQuery(document).ready(function($){
$('#photos').galleryView({
panel_width: 930,
panel_height: 275,
overlay_width: 285,
overlay_opacity: <?php echo get_option('miptheme_hl_opacity');?>,
overlay_position: 'top',
overlay_color: '<?php echo get_option('miptheme_hl_overlay');?>',
overlay_text_color: '#fff',
caption_text_color: '#dedfdf',
background_color: '#444444',
border: 'none',
nav_theme: 'light',
frame_width: <?php echo get_option('miptheme_h1_thumb_width');?>,
frame_height: <?php echo get_option('miptheme_h1_thumb_height');?>,
easing: 'easeInOutQuad',
pause_on_hover: true
});
});
</script>

<div id="head-highlight" class="box">
<div class="head-highlight-inner clearfix">

<div id="photos" class="galleryview">

<?php
global $post;
$nav = '';
$my_query = get_posts('include='.get_option('miptheme_hl_ID').'');
foreach($my_query as $post) :
?>
<div class="panel">
<?php
if ( get_post_meta($post->ID,'thumb', true) ) {
?>
<img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;amp;amp;amp;amp;h=275&amp;amp;amp;amp;amp;w=928&amp;amp;amp;amp;amp;zc=1&amp;amp;amp;amp;amp;q=80" alt="<?php the_title(); ?>" />
<?php
}
?>
<div class="panel-overlay">
<h2><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<p><?php echo ShortenText( $post->post_content, 250 ); ?></p>
<a title="Permanent Link to <?php the_title(); ?>" class="detail" href="<?php the_permalink(); ?>">more detail</a>
</div>
</div>
<?php
$nav .= '<li><img src="'. get_bloginfo('template_url') .'/thumb.php?src='. get_post_meta($post->ID, "thumb", $single = true) .'&amp;amp;amp;amp;amp;h='. get_option('miptheme_h1_thumb_height') .'&amp;amp;amp;amp;amp;w='. get_option('miptheme_h1_thumb_width') .'&amp;amp;amp;amp;amp;zc=1&amp;amp;amp;amp;amp;q=80" alt="'. $post->post_title .'" /></li>';
endforeach;
?>
<ul class="filmstrip">
<?php echo $nav; ?>
</ul>
</div>

</div><!-- end head-highlight-inner -->
</div><!-- end head-highlight -->

6. Include filmstrip navigation on homepage

Open “index.php” file and insert this code at line 12:

<?php include ('filmstrip_navigation.php'); ?>

7. Let’s style the navigation

Open “style.css” file and just insert the following code:

/* Highlight - Main
------------------------------------------------------*/
#head-highlight
{
padding: 15px 15px 2px 15px;
margin-bottom: 15px;
font-size: 1.1em;
color: #dedfdf;
background-color: #444;
}

#head-highlight .panel img { border: 1px solid #999; }

#head-highlight h2
{
font: normal 1.8em/120% Georgia, Times, serif;
color: #fff;
margin-bottom: 10px;
}

#head-highlight h2 a
{
color: #fff;
}

#head-highlight p
{
color: #dedfdf;
}

#head-highlight a.detail
{
display: block;
font: bold 1.0em/140% Arial, Tahoma, sans-serif;
color: #fff;
margin-bottom: 5px;
background: url("images/bullet_1.png") no-repeat 0% 80%;
padding-left: 18px;
}

8. Set up your navigation

Go to wordpress administration and under Appearance select “Theme Options”. You will se new section here called “Filmstrip navigation”. You have to populate all the fields and click “Update” at the end of page. Here is the example how to insert proper values:

Preview

You can preview live demo here.

Related posts:

1. ChangeLog – FancyTheme v3.1 This update fixes the problem with other plugins that uses...
2. 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...
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.

Create your form

Copy/paste this code in ‘Form’ area (Administration -> Contact):

<label>Your Name (required)</label>[text* your-name]
<label>Your Email (required)</label>[email* your-email]
<label>Subject</label>[text your-subject]
<label>Your Message</label>[textarea your-message]
[submit class:submit "Send message"]

save it, and copy and paste generated code into your post content on desired place.

Style your form

Now, for styling. Add these css properties to your “style.css” file, at the end.

/* Page content - comment form 7 plugin
------------------------------------------------------*/

#page-content .wpcf7
{
margin: 30px 0 30px 0;
}

#page-content .wpcf7:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

#page-content .wpcf7 input, #page-content .wpcf7 textarea
{
background: url("images/bg_shadow.gif") repeat-x 0% 0%;
}

#page-content .wpcf7 input.submit
{
width: 130px;
background-color: #444;
color: #fff;
font-size: 0.9em;
font-weight: bold;
}

#page-content .wpcf7 textarea
{
width: 500px;
}

New theme update

I’ll will include this styles in my next update of Inspiredblog theme.

Related posts:

1. Contact us Interested in working with us? Fill the form below and...
2. Retro theme tutorials (part II): How to replace the text main site name with a simple PNG file? After v2.0 update, this theme got a little “boost”. I...
3. Inspiredblog: How to implement filmstrip navigation from FancyTheme “I would really appreciate your suggestion of a tutorial, how...

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

Option to disable color switchers?

I’m planning to implement this option in “Theme options” panel so that administrators can select their own color/style and disable one or both style switchers. But, for now yu have to do it manually.

Step 1: Select your header style

Open “header.php” file and locate styles for body styles:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body2.css" title="body2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body1.css" title="body1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body3.css" title="body3" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body4.css" title="body4" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/body5.css" title="body5" media="screen" />

You see that there are five stylesheets and four of theme have “alternate” in “rel” attribute. This means that the first one is default and active. Now, delete the styles you don’t want to use, leave the one that will remain as default and delete “alternate” option from “rel” attribute. Result is only one body style.

Step 2: Select your footer style

Open “header.php” file and locate styles for footer styles:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot3.css" title="foot3" id="foot3" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot1.css" title="foot1" id="foot1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot2.css" title="foot2" id="foot2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot4.css" title="foot4" id="foot4" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/foot5.css" title="foot5" id="foot5" media="screen" />

and follow all the steps as for body styles.

Step 3: Remove body style switcher

Open “sidebar_switcher.php” file and comment or delete complete code.

Step 4: Remove footer style switcher

Open “page_footer_switcher.php” file and comment or delete complete code.

Finally

Unfortunately, if you want to disable style switchers, you have to follow these steps. I’m working on new update for this theme which will have this option implemented in “Theme options” panel, among other new features. This update will be released by the end of this month.

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. ChangeLog – FancyTheme v3.1 This update fixes the problem with other plugins that uses...

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

New features:

• Custom template pages
  • Full wide content
  • Portfolio list (wide, with no sidebar)
  • Project detail (project sidebar)
  • Redirection to first child

• Theme Options (administration area)
  • Project slideshow animation style (choose from 6 predefined effects)
  • Project slideshow animation timeout (transition from one slide to the next)

Bug fixes (v3.1):

• problem with plugins that uses jQuery framework

Related posts:

1. Inspiredblog theme Main features: Valid XHTML /CSS Transitional Wordpress as CMS –...
2. A Classy Theme (first preview) I just finished new wordpress theme called "A Classy Theme"....
3. Update: A Classy Theme (v2.0) This is a first update for this theme so I...

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

• Inspiredblog theme specs.

Related posts:

1. Inspiredblog: How to disable style switchers and select your default color? My latest theme Inspiredblog, has a pretty cool feature called...
2. TealGray Retro theme A WordPress portfolio theme designed to be used as a...
3. Inspiredblog theme Main features: Valid XHTML /CSS Transitional Wordpress as CMS –...

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

First on my list is a new version of FancyTheme , with two new features you requested. This update is off course free for all users that bought this template at ThemeForest.

New features:

• New comments page with “Reply to comment” implemented
• Breadcrumb navigation
  • Uses Yoast Breadcrumb plugin
  • New panel in ‘Theme options’, so you can select where to show it (home, pages or posts)

Bug fixes:

• Drop down menu not showing over slideshow

Related posts:

1. New Update: FancyTheme v4.0 Well, I'm releasing new update as promised, but one thing...
2. Fancy Theme A powerful WordPress theme special for online blogging and business/personal...
3. Retro Theme v3.0 For the last two months I summarized all your wishes...

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

It comes in 3 different color schemes:  Green, Orange and Blue.

• A Classy Theme specs

Related posts:

1. Finally! A new WP theme: Fancy Theme A powerful WordPress theme special for online blogging and business/personal...
2. A Classy Theme A great and classy WordPress theme special for web portals,...
3. A Classy Theme (first preview) I just finished new wordpress theme called "A Classy Theme"....

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