We were seeing a few comments on using a different color on a different page, and the menu items with a color bar underneath, so we though we would have a look at see what we could do.

This is the result of a few hours work and we think it is quite fun, again it is yours to download use, change, delete, first things first is to have a look at the theme in action, you can do that here Color My World, then you may want to download it, that’s easy no registration just download it now Color My World (960) .

This theme is does not have thumbnail support or a widgetized footer so we have gone with the traditional two sidebars, after you have created the pages and are happy with the top level menu item you will need to apply the templates to the pages, we will cover this in this post.

-

Color Options

We designed the theme with neutral color choices for the content, and have given you the ability to change the colors to your own.

The Menu colors are in the sequence you set them in the admin page, you can find this after you activate the theme in “Appearance > Theme Options”, you can see this in the next screen shot.

We have included the header with the theme, you can replace the image in the folder, there is no option in the theme settings, all you need to do is change any of the colors below to your own choice and the theme will update when you save the options, you need to enter the full hex code which looks like #FF00FF.

If you are stuck for ideas for a color scheme then why not get some ideas and inspiration from Colour Lovers you will see the hex codes, write them down and enter them in the admin panel.

Page Templates

When you add pages you will need to apply the correct template, we have included 6 standard and 6 wide templates, the page numbers start after the home page from 0-6, you can apply the templates from, Pages > Edit > select the page and “Quick Edit” as in the screen shot below.

For the coders out there that would like to know how it works we will be following this post up with another functional post with code examples.

But for now download and enjoy, don’t forget some feedback and share this page with others, if you want to buy us a pint then you can donate via PayPal from the home page.

Our latest theme is the Portfolio Theme, we have used Artisteer 2.4, cu3er slideshow and have created a function to add a number of categories, posts and tags when the theme is first loaded, check back early February for linking, columns and mouseover fading.

Visit The Wedding Theme to see how the post images look, while you are there sign the guestbook, we would say view our photos but if we have not emailed you the password you will not be able to.

This post has been created based on a post by Mark Jaquith here and we would like to thank mark for making the code easy to follow.

But in this short tutorial we are only looking at the Post Images, support for post images is now a part of WordPress and is easy to implement so lets get started, if you have been following our tutorials then you will already have these lines in the demo-functions.php file, if not you can add them to the Artisteer functions.php file.

The width (200)  and height (133)  dimensions we used here in line three are for a standard landscape image, you may want to change the dimensions to a square or portrait based on the type of posts you will be making.

Add to either your demo-functions.php or the Artisteer theme functions.php

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 133, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */

Now we need to add a style to the stylesheet for our image, you may want to pad the image or add additional margins to suit your theme, Artisteer adds a margin around the img tag, in our theme it was 7px so we added that to the image width, 200 to 214px, and a right margin just to push the text more to the right.

Add to either your demo-custom.css or the Artisteer theme style.css

/* Add a div to the post list for our thumbnail images */
#demo-image
{
 margin-right: 7px;
 float: left;
 overflow: hidden;
 width: 214px;
 height: 100%px;
}

Last step is to add our image into two Artisteer files, index.php and archive.php, as you scroll down you will see this line.

<?php while (have_posts()) : the_post(); ?>

Below that is another line that look like this, paste the code lines after this lines

<!– article-content –>

Add this code to the index.php and archive.php

<!-- Start demo code Add our post image to the post list -->
 <div id="demo-image">
 <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the post list -->

So your code block should look like this:

<div class="art-postcontent">
 <!-- article-content -->

 <!-- Start demo code Add our post image to the post list -->
 <div id="demo-image">
 <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the post list -->

 <?php if (is_search()) the_excerpt(); else the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>
 <?php if (is_page() or is_single()) wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

 <!-- /article-content -->
</div>

Now that is it with the code how easy was that, just edit a post and in the right column you will see an option for the Post Thumbnail, select an image from the post media and you will see an option to make thumbnail, save the post and view your website.

The last and most important thing is to let others know if this helped you, just add your comment to this post for anyone else reading it.

If it is your first visit and you are looking for the walkthrough you will find the pages on the top menu, the CMS-Lite has child menu items.

Feedback on the posts is welcomed, support is through the parent website, see the support page for the links.

The plugin has taken quite a while to complete, it is free of any charge to use as you see fit, if you do not understand something you can ask, you can suggest how to improve the plugin, do this through the forum.

If you have themes you would like us to add to the collection email us from the support page, these can be both free and premium, you will get full credit and links back to your website services.

Get the Plugin HERE: