The new design is a big change, with lots of improvements in usability and more suited to big screens.

Wordpress powered

Both sites (studio & themes)  are powered by Wordpress so I designed a great premium themes for them. Mip Design Themes will be launched today and Studio is due in a couple of days. With a completely different color scheme (hope you like it).

Html5 markup

The new site is built in HTML 5 and CSS 3, but I’m still polishing the css file to get it valid.

The coolest part about HTML5 is definitely its offline capabilities. Programs like Thunderbird and Outlook (and now GMail to an extent) let you browse through your old data while staying offline.

What about IE6?

What does it mean for IE6? I really don’t care and I didn’t even bother to test it. I have no problem with IE8, but I still think it’s on the end of browser chain.

Conclusion

There are always things I wish could have been different and there are still some more tweaks to do, but on the end I can honestly say I’m happy with the work I put into. The final result is in front of you and I hope you’ll enjoy your stay.

Related posts:

1. Vacation Time! Well, finally come that time of year when I close...
2. Mip Design themes BETA edition When I first heard about ThemeForest and templates “starting at...

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

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.

New update:

• added “post-thumbnails” support for wordpress 2.9.x versions
  (with various image dimensions)
• added new widget-ready area in footer, styled with all skins
  (enable/disable option in theme options panel)

Bug fixes:

• wrong color on main navigation sub levels (hover)
• wrong color on sidebar images (hover)

Related posts:

1. Update: A Classy Theme (v2.0) This is a first update for this theme so I...
2. New Update: FancyTheme v4.0 Well, I'm releasing new update as promised, but one thing...
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.

Update log:

• added “post-thumbnails” support for wordpress 2.9.x versions
  (with various image dimensions)
• added “Show related posts” in theme options panel
• added new custom template pages: redirect to first child

• fixed problem with scaled gravatar image in comments

Related posts:

1. A Classy Theme A great and classy WordPress theme special for web portals,...
2. Update: Fancy Theme (v5.0) Just uploaded new version (v5.0) to ThemeForest and I think...
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.

Problem with themes?

I know there is a huge problem with images in my themes if you are using wordpress 2.9.x. “TimThumb” script no longer works in new versions and that is a serious problem. Lucky for us (or not), Wordpress 2.9 introduced a new thumbnail feature with which you’ll be able to easily upload a post thumbnail.

Therefore, I’ll update all my themes and post it to ThemeForest as soon as possible.

What can you expect for this month?

I prepared a list of projects that will be published till end of this month:

• A Classy Theme v2.0 (this week)
• Fancy Theme v5.0 (next week)
• InspiredBlog v2.0 (next week)
• Book Template v2.0 (next week)
• TealGray Retro Theme v4.0 (next week)
• MinimaxWhite Wordpress Theme (based on MinimaxWhite site template)
• A new site template…

Related posts:

1. New Update: FancyTheme v4.0 Well, I'm releasing new update as promised, but one thing...
2. New Site Template: MinimaxWhite I didn’t released any site template in a while so...
3. Vacation Time! Well, finally come that time of year when I close...

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

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.

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.

Nail in the coffin

The final stroke was this morning when I couldn’t log into my Wordpress account for 3 hours. That was it, time to leave and find better luck.

The search for Holy Host

Well, I reviewed a couple hosting companies that satisfied my humble needs and decided to take a leap. After long and painful search (approx. 45 minutes), I decided and chose “Just Host“. Why? No special reason. They are always in top 5 ratings for what I needed, they have good features and the final word was payment via PayPal.

Installation

Complete surprise. I couldn’t believe. I transferred my primary domain and 8 sub-domains, installed 9 Wordpress sites, uploaded all the files and imported everything via phpMyAdmin in just 2 hours.

Conclusion

For now, I’m pretty satisfied. Everything works like a charm and even support was quick and efficient. I’ll test it more in days to come to see if it’s good enough to transfer my other domains here.

Related posts:

1. Mip Design themes BETA edition When I first heard about ThemeForest and templates “starting at...
2. Mip Design Re-design/Re-branding First I thought about a re-fresh or update of the...

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