The full overview of other features can be found in the post for on Business Portfolio One , you can also view the new menu Business Portfolio two:!

Replace the Logo

Create a new Logo 422px * 80px upload the new Logo in the Admin > Media > Add New page:

Copy the File URL and open the Appearance > Theme Options page and paste in the url, save settings and you have now replaced the logo

The New Menu

We have re-designed the menu to make it more appealing, we changed the following images and styles in the style.css, height of the header, header-gradiant, menuItems, and Nav, for the nav.png we added a gradiant, rounded the corners and added an inner glow, for the menu items we made the back transparent and added a footer bar image and arrow head.

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.

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.

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 (1387)

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.

Artisteer is a theme creation tool not a content manager, so the answer was no, however out of the box how close could Artisteer come, the answer “pretty dam close”.

We got to work with Artisteer 2.4 and one key factor we had to consider was that our home page content would all be styled on the ‘sidebar style and not the content area’, so we come up with this template to add our content to, note: that we have not used bullets as they mess things up.

Have a look at the finished site Here: http://digitalraindrops.net/demo/wordpress/cms-overview/

Get the starting theme files: Custard Theme Tutorial Start (221)

Getting Started

All you will need for this tutorial is WordPress 2.9+, a text editor, the demo theme and some images and text to create your posts.

Do not worry if you have not created the files from the best practices post, they are already in the theme download, get it here:

Plugins

The Dynamic Feature Gallery from Studio Grasshopper

Download: http://wordpress.org/extend/plugins/dynamic-content-gallery-plugin/

Website: http://www.studiograsshopper.ch/dynamic-content-gallery/

The Category Post Widget

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

Website: http://jameslao.com/2009/12/30/category-posts-widget-3-0/

Firefox and Browser Add-On

We also recommend that you use the Firefox browser with the firebug Add-on, you use firebug to inspect any issues that may need resolving later, where you might add padding etc.

Content Areas

We have the ‘Dynamic Content Gallery’ and three category columns to create, we will use the WordPress and Artisteer sidebars code to create three content panes, this will be in our new functions file which we will call from the functions.php, the most important thing when creating new sidebars is that they are created after the Artisteer sidebars, the reason is because in the sidebar1.php they are called by index and not name.

Open the file named demo-functions-php and add the code below  before the end tag ?>, we have added a prompt in the file to create the content panes.

/* Start code to create 3 content areas for the categories */
function demo_create_content_pane(){
 if (function_exists('register_sidebars')) {
 register_sidebars(3, array(
 'name' => 'Content %d',
 'before_widget' => '<div id="%1$s">'.'<!--- BEGIN Widget --->',
 'before_title' => '<!--- BEGIN WidgetTitle --->',
 'after_title' => '<!--- END WidgetTitle --->',
 'after_widget' => '<!--- END Widget --->'.'</div>'
 ));
 }
}
/* End code to create 3 content areas for the categories */

Next we need to let WordPress know that we have added the new sidebars, open functions.php and look for the code which will be the same as above and add these lines after the sidebars function.

/* Start code to create 3 content areas for the categories */
demo_create_content_pane();
/* End code to create 3 content areas for the categories */

You now should have this in your functions.php.

if (function_exists('register_sidebars')) {
 register_sidebars(1, array(
 'before_widget' => '<div id="%1$s">'.'<!--- BEGIN Widget --->',
 'before_title' => '<!--- BEGIN WidgetTitle --->',
 'after_title' => '<!--- END WidgetTitle --->',
 'after_widget' => '<!--- END Widget --->'.'</div>'
 ));
}

/* Start code to create 3 content areas for the categories */
demo_create_content_pane();
/* End code to create 3 content areas for the categories */

If you have read the Best Practices post it will all be clearer now, we are creating a new home page with four dynamic content areas, and the only change to our theme is these three lines, how cool is that?

The html code

Next we need two blocks of html code one for our Content Gallery and one for our Category Posts, instead of doing this in the home.php page we will create two new files, again the reason for this is management and portability of functions and code, the empty files are already created for you in the demo theme.

Open the file named demo-contentbar.php, this file contains the structure for our category columns, one container and three columns, notice we are calling the art-sidebar code here, this gives us the sidebar attributes and styles.

<div class="demo-content">
 <div class="demo-content1">
  <?php if (!art_sidebar('Content 1')): ?><?php endif ?>
 </div>
 <div class="demo-content2">
  <?php if (!art_sidebar('Content 2')): ?><?php endif ?>
 </div>
 <div class="demo-content3">
  <?php if (!art_sidebar('Content 3')): ?><?php endif ?>
 </div>
</div>
<div> class="cleared"</div>

the second file we need to populate with code is the demo-feature-gallery.php, this is the container for our “dynamic Content gallery”

<div id="demo-featureGallery">
 <div  class="inner">
<!-- Dynamic Feature Gallery Start -->
<?php if( function_exists( 'dynamic_content_gallery')) dynamic_content_gallery(); ?>
<!-- Dynamic Feature Gallery End -->
 </div>
</div>

That concludes the Content Areas

Home Page

The Home Page will present our content to the public, all we need in this file is a skeleton page structure and our content, the feature gallery sits between the header and content and the category posts sit inside the content.

Open the file named home.php and paste in this code, notice in the code that we are checking if the file exists first, this means if you remove a file you will not get a fatal error.

<?php get_header(); ?>
<?php if (file_exists(TEMPLATEPATH. '/demo-feature-gallery.php')) include(TEMPLATEPATH. '/demo-feature-gallery.php'); ?>
<div class="art-content-layout">
 <div class="art-content-layout-row">
 <div class="art-layout-cell art-content">
 <!-- Start Categories go here -->
 <?php if (file_exists(TEMPLATEPATH. '/demo-contentbar.php')) include(TEMPLATEPATH. '/demo-contentbar.php'); ?>
 <!-- Start Categories go here -->
 </div>
 <?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
</div>
<div></div>
<?php get_footer(); ?>

Layout

In this next section we need to add the layout to the theme, we do this as a stylesheet, setting widths, height and positions.

Starting with the content block which consists of the outer frame and three content areas, notice the widths of the content areas inside the frame.

/* Content Bar and three content areas Width */
/* Content Panel layout */
.art-content-layout .demo-content
{
width:100%;

}
.art-layout-cell art-content .demo-content
{
 position: relative;
 margin-top: 0;
 padding: 0;
 border: 0;
 float: left;
 overflow: hidden;
 width: 100%;
 height: 100%;
}

.demo-content .demo-content1{
 position: relative;
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 overflow: hidden;
 width: 33%;
}

.demo-content .demo-content2{
 position: relative;
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 overflow: hidden;
 width: 34%;
}

.demo-content .demo-content3{
 position: relative;
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 overflow: hidden;
 width: 33%;
}

Next is our Dynamic Content Gallery, here the width is fixed for the theme width, and the height for the content we want to display.

/* Dynamic Feature Gallery alter margin left and top if required */
/* Width of art-contentLayout used for Feature gallery from style.css 992px */
#demo-featureGallery
{
 position: relative;
 margin: 0px;
 padding: 0;
 border: 0;
 float: left;
 overflow: hidden;
 width: 992px;
 height: 300px;
}

#demo-featureGallery .inner
{
 margin: 0px;
 padding: 0;
 border: 0;
 float: left;
}

Dynamic Content Gallery

Activate the “Dynamic Content Gallery” and set the width to 992 and the height to 300, if you have problems later with the display there is  a setting to use java and not mootools changing this works for me, I will not go into details on how to add a picture, create a category of featured, add am image to a post in this category, you need to add the image url and a description, then back to settings and select this category.

Gallery Method = One Category

Add the Category Here – NOTE: It will not show if you have no posts yet

When you Insert the image in the post copy the URL, select all and copy, then paste this in the box on the right, optional add the title to display.

Category Posts

For this theme we have set the thumbnail height and width in the demo-functions.php to 190 x 143, activate the Category Posts plugin, and add one to each of the Content Panes, select the category and say display thumbnails, enter the sizes here and say how many to display, our sample website has four.

Adding the post thumbnail is easy there is a new section on the right, when you select the image there is an option to use it as the post thumbnail

If you view your blog now you would have something like this.

Finishing Touches

As you can see the content has a white background, the theme has a background image we do not want, now you will see the power of using the demo-custom.css file, we will alter all of this without changing one line in the themes style.css, NOTE: see the !important on the colours, this tells WordPress that our setting should take priority over all others, how powerful we are!

Open the file demo-custom.css and add in this block of code, note the changes to art-sheet and art-body are done here and not in style.css

/* Turn off the background image */
body
{
 background-image: none !important;
}

/* color the background same as the sheet */
#art-main
{
 background-color: #FFD700 !important;
}

/* color the background same as the sidebar */
.art-blockcontent-body
{
 background-color: #EDCB07;
}

/* color the background same as the sheet */
.art-block
{
 background-color: #FFD700 !important;
}

/* Add a line to the top of each list item */
.art-blockcontent-body ul li
{
 border-top: 1px solid #000000;
}

/* Increase the height of each list item */
.art-blockcontent-body ul li {
 line-height:200%;
}

/* Add a closing line to the botton of the list */
.art-blockcontent-body
{
 border-bottom: 1px solid #000000;
}

And here we have our website with nice content areas, and the header photographs are mine, another ‘Hobby!”

We will leave you to play about with adding extra borders and styles, and hope that this tutorials gives you a better understanding of changing theme content, you can download the final theme with all the changes.

Demo blog here: http://digitalraindrops.net/demo/wordpress/cms-overview/

Download final theme here: Custard Theme Tutorial Final (42)

if you have really saved some time with this and have benefited with a working knowledge, you can make a donation from any page in the right sidebar!

thanks for looking.

Bonus Section

It would be nice if the post image was shown in the category list when you look up a category, so lets add this, as it would be the same method to add them to the index page on a normal theme!

Add to demo-custom.css

/* Add a div to the category post list for our images */
#demo-image
{
  margin-right: 10px;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 190px;
  height: 100%px;
}

And in the category.php (and index.php for a normal blog) we need to tell wordPress if there is an image then get it!

near the bottom you will find a div called “art-postcontent” after this add this code

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

the cod should now look like this

<div>

 <div class="art-postcontent">

 <!-- Start demo code Add our post image to the category list -->
 <div id="demo-image">
  <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the category 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')); ?>

</div>

this is what you now have and it works great if you do not have lists or quotes at the start of your posts, and you can just add images to specific pots.