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.

This is the themes front page, from the top we have added a search box, clickable logo, five social network clickable icons, Super Slide post slider, advertisement bar with four adverts, theme thumbnails, three feature posts, and a four section widgetised footer.

We have changed the name of the Artisteer ‘Footer’ option page to ‘Theme Options’ and given you a way to dynamically set the URL’s and alternative text from this page.

To start view the Business Portfolio Theme, then if you like what you see you can download it here and now: CMS-Lite Business Portfolio (1029), then just upload the theme to a test environment and read the rest of this post for the setup options.

.

Header Options

Activate the theme and from the Admin > Appearance > Theme Options you will see two sections, Header Logo URL and Header Social Icons, you only need to add the header logo URL if you want the logo to direct the viewer to a main website, leave this blank for your blogs home page.

For the five social icons you activate these when you enter a URL, for an email address you add mailto: to the email address, the websites should start with http://, the five icons that come with the theme are email, facebook, twitter, linked in, and an rss feed, you can change these if you want we will tell you where to get them and how to change them later in this post.

Other Setup Options

The Home Feature Post Category is what you will use for the three featured posts on the home page, this category should only have 3 posts and will not show in the sidebar menu.

Home content adverts is the central bar of four adverts and can be used to link to any sites, pages, posts etc:, following the instructions for the social icons URL’s.

Smooth Slider

For this theme you will need to use the Smooth Slider plugin downloadable from WordPress, just search for this Smooth Slider plugin from the plugins page.

We are using Smooth Slider in preference to cu3er and the Dynamic Feature Gallery which we have used in other themes, this is to showcase other slider options.

Set the following options from Admin > Settings > Smooth Slider, note the height and width required for this theme, you can set the other options to your own preferences.

Adding Posts

You can see from the screenshot below that there are two new options on the post page, the checkbox below the post is where you choose the Smooth Slider posts to include, adding a thumbnail to a post will give a thumbnail in the category archives, adding a post to the  Home Feature Posts category will display the post thumbnail and except to the home page.

Changing Theme images

To change the header logo just create a png logo with a transparent background we use this free website for our text logos, and replace the one in the themes images folder, make sure that the height of your logo is 80 pixels.

To change the social media icons you can download the icons for ‘free’ from this website and from this set resize the icons to 60 pixels by 60 pixels and replace one of the icons in the icon’s folder, it is important to use the same name.

To change the advert gif images replace one of the images in the ads folder, we have left the images from the website in the folder for testing, it is very important to size the images 250 pixels by 115 pixels.

That is all there is to it, please enjoy the theme pop back and leave a link to a website where you have used the theme, or leave a comment we are not able to offer support for our free themes, feel free to contact us if you would like us to develop an exclusive theme just for your site.

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

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

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.