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 (456) .

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.

This is free version of our portfolio theme and is a cut down version of a commercial premium theme we will be releasing in April, with this version you will need to edit the files where the commercial version will have a setup page and a number of additional pages and options.

This theme is not a typical blogging theme and designed to promote yours or your customers professional skills or services, so it needs no sidebars and is not adSense enabled although there are many other themes and plugins that could deliver these.

Credits and plugins

You will need to have the cu3er slideshow  WordPress plugin from 18Elements which uses a category to feed the display, you can view: The Portfolio Theme here if you have visited the portfolio site recently you might need to refresh your browser, ctrl+F5, and you can download the free version from here. CMS-Portfolio Theme (864)

If you like the fancy bookmarks here and on the single post pages then that plugin is Sexy Bookmarks which you can download and install on your blog.

The thumbnail code in this ‘free theme’ was created based on a post by Mark Jaquith here and we would like to thank mark for making the code easy to follow.

cu3er settings

A picture is worth many words so here are the settings you will need to use, the category ID will be the one you use for the slideshow:

Footer

When you activate the theme you will have four footer areas to populate however you want, these replace the need for a sidebar as you can cover most of what you want with these.

Header Logo

To enable the logo first you must replace with your own logo the ‘logo.jpg’ file (670 x 106 pixels), this is in the theme images folder, then you need to copy the ‘cms-header-logo.php’ file in the cms-addons folder into the themes folder, this will hide the blog title and show the logo.

Header Information

Open the ‘cms-header-info.php’ file in the themes folder, there are four information options in this file, change them to your own values, if you want a URL link then you must have the http from a website or the @ for an email and fill in the $infoName value, looking in the file and at the header image or our portfolio website will help with setting this up.

Changing the Menu Options

You can change the menu options by following the method in this tutorial here:

Changing the Colors

You can change the colors of the links to your own values for the information panel, Post Headers and footer content in the themes cms-colors.css file, you will need to change the hex value for each element to your own requirements.

Body Image

The body image can be found in the images folder you can change this to your own, the header is transparent which gives a rather nice effect.

That all there is really, once again if you like this theme share a link to this post on your own website, leave a comment or feedback.

If you have windows vista or later then the product may already be installed have a look for Windows Live in your program list, if it is not there then Download it Here:

Like many other programs it will suggest other products, just take a look and de-select any you do not want to install.

When you run Live Writer you need to setup your blogging account, you can setup as many as you want once you have installed the first blog, that means you can manage several blogs at the same time, and give other users a way to publish their work without logging onto the blobs admin area.

On the first screen choose the last option for Blogger or WordPress .

Next: enter the website address of your blog, username and password, if you are not on a shared computer you can select to save the logon details.

That is it Live Writer will try to logon to your blog and setup the blog account in Live Writer.

If you would like a what you see is what you get look in Live Writer, you can let the software create a temporary post in your blog, so it can retrieve the style.

Next Live Writer will download the theme, this will not work on all themes but it would not stop you using Live Writer for posting.

Give your Blog a friendly name and select finish.

That is it you are ready to review a post by selecting the Open > More folder on the right and downloading a post for editing, you can create a new page or Post from the main menu, when you insert an image you can choose margins, size, style etc: and save these settings as default.

There are a number of different options for inserting components into your post on the right hand panel.

When you have finished your content, Create or select the Categories and tags, you can also set the publish date, then hit the publish option on the main menu.

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.

The only time you should change core theme files is if it is the only way to change something, have you ever changed a value in a style and forgotten what the original value was when you wanted to roll back the change, or added code in the functions.php and forgotten what you added, all out tutorials going forward are going to use two new files and one line of code in the core functions.php file to load them, you could as a rule add these to your themes as a best practice.

The first file is a css file with the naming convention of your initials plus custom.css so mine is ‘dsc-custom.css’, so when in the tutorial it say open your css file, you will know to open this one.

Open your text editor and add a few comment lines between /* here */ to say what the file is for and save it as described above into your theme folder, it does not matter that there is no code changes in the file.

Stylesheet

/* This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This CSS file will be loaded last, make any changes to your styles only in this file
*/

Functions

this file you will save the same as above with a name of your initials plus functions.php, so mine is dsc-functions.php

<?php
/* This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/
?>

Not impressed, so lets put this into practice, in your own ???-functions.php file we will add some code to load our custom stylesheet and if you are using 2.9 we will add code to give page and post thumbnail support, so lists can show the thumbnails if the plug supports it, the next tutorials will be using the thumbnail functions.

First if you are using 2.9 adding support for the thumbnails only requires three lines of code, here you should set the default thumbnail size.

<?php
/*This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/

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

Next we will create a function to load our stylesheet when the theme loads, the clever part with this is the WordPress hook wp_print_styles, which calls a standard function and loads the stylesheet, notice we have added the ‘if’ condition this will stop any fatal errors if a function is withdrawn, or you upload to an earlier version of WordPress.

<?php
/* This file is part of the Digital Raindrops CMS-Tutrorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/

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

/* Start code to load custom stylesheet name the function with your initials */
function dsc_stylesheet() {
if (file_exists(TEMPLATEPATH.'/dsc-custom.css')) ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/dsc-custom.css" type="text/css" media="screen" />
<?php }
add_action('wp_print_styles', 'dsc_stylesheet');
/* End code to load custom stylesheet name the function with your initials */
?>

Our last line of code goes into the themes functions.php file, open the file and after the <?php line add the call to your functions file.

/* Start code to load custom functions file */
if (file_exists(TEMPLATEPATH. '/dsc-functions.php')){
include_once (TEMPLATEPATH. '/dsc-functions.php');
}
/* End code to load custom functions file */

Conclusion

You now have a tidy system to add styles and functions to your themes without changing the core code to often, and code that is portable between themes, but what was all that thumbnail stuff about?

On your Pages and posts you will now have a new form where you can select a thumbnail for your post or page, WordPress will crunch it to size for you as well.

How can you use this thumbnail, some plugin already support this, on the home page we are using  category posts plugin.

http://wordpress.org/extend/plugins/category-posts/

In the next tutorials we will be using this and the Dynamic content gallery on a theme, trying to get from this theme I created following a post on the Artisteer forum.

Finishing with gallery and three columns of categories as a tutorial not for production use.

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:

Layout Stylesheet

/* Header Ad set the float and margins here */
#cms-header-ad {
display: block;
float:right;
height:60px;
margin-top:30px;
margin-left:0px;
margin-right:20px;
width:468px;
overflow:hidden;
}

There are only four settings we need to change here, float will place the adblock left or right, then you need to set the left or right margin and zero the other one, last is the top margin, header height – 60 and divided by two for ours 125-60 = 65,  65 / 2 =32.50 so we set ours at 30px

The paste this at the end of your style.css file remember to add start and end comments like this /* Start added by cms header  adSense block */

The Header Ad php code

<?php
/* update your ad here between ' ' */
$cmsmyadtext = 'replace with your adSense code here';
$cmsadtext = get_option('cms_banner_ad_text');
if ($cmsadtext != $cmsmyadtext) update_option('cms_banner_ad_text',$cmsmyadtext);
if(get_option('cms_banner_ad_text')){ ?>
<div id="cms-header-ad">
<?php echo stripslashes(get_option('cms_banner_ad_text')); ?>
</div>
<?php } ?>

This code will create and store the adsense code you enter between the single quotes on line 3 in a WordPress option, it will then compare this to what it gets back from the database, if it has been altered it will reset it to what you have in this file, to disable it just blank the text between the single quotes.

The Themes Header File

We now need to call this new file in the themes header file, you will need to know the structure of the header to place the code inside the correct tag, in our header we have placed the code in the art-header-jpg <div>.

<!-- Start CMS-Lite header ad  -->
<?php if (file_exists(TEMPLATEPATH . '/cms_inc/addons/cms-header-ad/cms-header-ad.php')){
    include_once(TEMPLATEPATH . '/cms_inc/addons/cms-header-ad/cms-header-ad.php');
} ?>
<!-- End CMS-Lite header ad  -->

Lets look at this code, the first line is our comment, the next line checks to see if our new file exists, if it exists the third line includes the code in the header, then we end with another comment.

Here is a screenshot with the Artisteer adSense block, I am sure i have seen that website before somewhere, please leave some feedback!

You can do this if you want, however you are damaging the chances of your website being found by the search engines and loosing the feeds that use the blogs title, lets say your blog was “Acme Computers Supplies London”, someone looking for computer supplies London will not pick you up from a feed.

How you can resolve this problem is quite easy, open your header.php file and at the bottom before the closing tag add this code:

<style>
#header h1 { display:none };
</style>

Make sure you paste this before the closing tag </div> and you now have a title that the feeds and bots can see but the public can not!

Adding a clickable logo to your theme is quite easy, you may have adsense, flash or another clickable area in your header so making the header clickable is not an real option, to overcome this you can add a clickable logo that has it’s own URL region, you will find the files in the addon folder which will be available soon, you can drop the folder into your theme or you can create the files from the code here, lets have a look at the css layout stylesheet first:

Stylesheet css

/* change the height width margin and float here */
/* header is 125px */
#cms-header-logo
{
 position: absolute;
 float:left;
 height:85px;
 margin-top:20px;
 margin-left:10px;
 width:300px;
 overflow:hidden;
 background-image: url('images/logo.png');
 background-repeat: no-repeat;
 background-position: center center;
}
/* change the height width for clickable area here */
#cms-header-logo a {
 position: absolute;
 display: block;
 height:85px;
 width: 300px;
}

What values do you need to change for your own theme:

Simple one this value places the logo position on the left or right:

float:left;

The height of your logo file:

height:85px;

The top margin is where it will fit horizontal to the top of the header section, on this website we have a header section of 125px, with an image height of 85, so to center the logo horizontal we make this value 20px.

margin-top:20px;

This is the indentation from the left, if your logo was on the right this would be margin-right, on this site we changed this to 10px to match the content.

margin-left:10px;

The width value of your logo here, ours is 300px.

width:300px;

The url which is the location and name of the logo image file relative to the themes root folder, notice there is no leading slash.

background-image: url('images/logo.png');

The second block of code is the clickable area, when you set an image as a background image it is not clickable, so you are adding a clickable area with the a tag, the size of this is the same as our logo in this example.

So you have the css code finished so you just paste this into the bottom of your css file, take time and enter some comments inside /* your comment */, this will enable you to identify your changes to move to a new theme, we will be publishing another post shortly on a good way to do this without using the themes file.

The Header logo php file

Instead of pasting the blocks of code into the header.php we will use another file and call this from the header with a single code line, this means that we can easy use the code on another theme, and we are not messing about with the core theme code and losing track of where we have been playing.

<?php
$logosrc = TEMPLATEPATH. '/images/logo.png';
if (file_exists($logosrc)){ ?>
 <div id="cms-header-logo">
 <a href=<?php echo "'http://www.digitalraindrops.net/'"; ?> ></a>
 </div>
<?php } ?>

This code will check if the logo exists in the themes folder, if it does it will create a div to hold the logo, the ‘a href’ is the url you want to direct the user to.

Save this code with a text editor with a php extention and place this in a folder in the themes root directory, use a good naming convention so you can relate to who created the file, we use csm-filename.php, so you could use your initials.

The Themes Header File

We now need to call this new file in the themes header file, you will need to know the structure of the header to place the code inside the correct tag, in our header we have placed the code in the art-header-jpg <div>.

<!-- Start CMS-Lite header logo  -->
<?php if (file_exists(TEMPLATEPATH . '/cms_inc/addons/cms-header-logo/cms-header-logo.php')){
    include_once(TEMPLATEPATH . '/cms_inc/addons/cms-header-logo/cms-header-logo.php');
} ?>
<!-- End CMS-Lite header logo  -->

Lets look at this code, the first line is our comment, the next line checks to see if our new file exists, if it exists the third line includes the code in the header, then we end with another comment.

You may be wondering what the <?php and ?> are for, in this code block they switch between html code and and the php code lines.