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 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.

Look at this image, we have the Home menu item and then three Categories and on the right we have a Page menu, pretty cool menu and not hard to achieve, you will need Artisteer 2.4 to complete this tutorial.

All we have done here was to copy the art-menu() function from the functions.php file and paste this in the demo-functions.php, then we added two parameter which we will use to great effect later, and changed some of the code.

The first parameter we pass in is the menu type ‘pages’ or ‘’ for categories, the second is the position of the ‘Home’ menu item ‘left’, ‘right’ or ‘’, in the screenshot above we have added the home menu item before categories as we always expect this menu item to be the first.

This is the categories function <?php demo_menu_items(”,’left’); ?> ,the first parameter blank for categories the second to place the home button left of the categories, the pages <?php demo_menu_items(‘pages’,”); ?> ,that is quite simple to use really.

As you can see we have also split the two menus, one left and one right, you can place either menu where you like, all on one line, left and right, and pages and categories in their own space,the menu function comes in a file that you can download the demo-functions.php

Horizontal functions download the file here Navigation Functions (1354) however the bonus file is downloadable at the end of this tutorial and includes both Horizontal and Vertical Menu functions.

You do not need to copy and paste the code, but for those that want to integrate this  into their own code here it is.

/* Start CMS-Tutorial horizontal menu */
function demo_menu_items($menuType,$homePosition)
{
 global $artThemeSettings;
 if ('left' === $homePosition) {art_print_homepage();}
 if ('pages' === $menuType)
 {

 add_action('get_pages', 'art_menu_get_pages_filter');
 add_action('wp_list_pages', 'art_menu_list_pages_filter');

 wp_list_pages('title_li=&sort_column=menu_order');

 remove_action('wp_list_pages', 'art_menu_list_pages_filter');
 remove_action('get_pages', 'art_menu_get_pages_filter');
 }
 else
 {
 add_action('get_terms', 'art_menu_get_terms_filter');
 add_action('wp_list_categories', 'art_menu_wp_list_categories_filter');

 wp_list_categories('title_li=');

 remove_action('wp_list_categories', 'art_menu_wp_list_categories_filter');
 remove_action('get_terms', 'art_menu_get_terms_filter');
 }
 if ('right' === $homePosition) {art_print_homepage();}
}
/* end CMS-Tutorial horizontal menu */

Stylesheet

If you want to option to split the menus on one line like the screenshot we need to add two small blocks to the demo-custom.css or the style.css.

/* Start cms-lite menu left and right blocks */
.demo-left
{
float: left;
}
.demo-right
{
   float: right;
}
/* End cms-lite menu left and right blocks */

Functions File

We need to let WordPress know that our function exists to do this we add a line at the start of the functions.php file in the root directory of the theme.

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

Header File

This is where we call our new function, we have a few options here, if we just wanted to add our categories menu somewhere then we leave the Artisteer code and add in a call to our menu open header.php and add your line where you want the menu to appear.

<div class="art-nav">
  <ul class="art-menu">
   <?php demo_menu_items('',''); ?>
  </ul>
</div>

This is the call for the menu in the screenshot.

<div class ="art-nav">
  <div class="demo-left">
   <ul class="art-menu">
     <?php demo_menu_items('','left'); ?>
   </ul>
  </div>
  <div class="demo-right">
   <ul class="art-menu">
     <?php demo_menu_items('pages',''); ?>
   </ul>
  </div>
</div>

We will leave you to explore other options, we do love to hear from you so drop back and leave a comment or add a link to a live website.

Bonus Section

As you have taken the time to read this tutorial here is a bonus just for you, as well as the horizontal menu we have added the vertical, code is much the same except that you pass in ‘top’ or ‘bottom’ for the ‘Home’, and you set this up in the demo-functions.php file.

In the widgets you now have two Vertical Menus the Artisteer one and our Full Vertical Menu, so you could have pages on one and categories on the other, or use the Full Vertical Menu for both pages and categories in any order.

Just the code and the download to add now, for the code in the demo-functions.php you find this function and set the parameters as you want in the full_widget_verticalmenu function look for the code in the first block.

Download: Both Menu Functions (107)

<ul class="art-vmenu">
<?php demo_vmenu_items('','top'); ?>
<?php demo_vmenu_items('pages',''); ?>
</ul>

Categories only Code.

<ul class="art-vmenu">
<?php demo_vmenu_items('',''); ?>
</ul>

Pages only Code.

<ul class="art-vmenu">
<?php demo_vmenu_items('pages','top'); ?>
</ul>

Enjoy share and don’t forget to add some 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.

We have used this plugin in the our wedding theme, the cu3er slideshow  WordPress plugin from 18Elements uses a category to feed the display, you can view: The Wedding Theme here.

To have the slideshow embedded in the home page we cannot use a sidebar widget so you will have to add a line of code to the home page, this tutorial will use a 2.4 version theme created with the Artisteer template maker.

Stylesheet

We need to add a style to the stylesheet for our slideshow container, as we want to pad the slideshow, add borders, change margins to suit our theme, to start we need to open our style.css and find these two style blocks  making a note of the width settings, this will be used to calculate your slideshow width.

/* begin Layout */
.art-content-layout
{
 display: table;
 padding: 0;
 border: none;
 width: 996px;
}

/* begin LayoutCell, content */
.art-content-layout .art-content
{
 width: 75%;
}

We now know the width of our theme and we can calculate the width of our slideshow 996px * 75% =  747px we will be adding a nice left and right margin of 25px and padding 5px to suit our theme, different themes will need adjusting, so our div width = 747 – 60 =  687px we rounded this to 685px to suit our theme.

Next step open our demo-custom.css or style.css file and paste in the code below.

/* begin LayoutCell, sidebar1 */
.art-content-layout .demo-slideshow
{
 margin-top: 7px;
 margin-bottom: 7px;
 margin-left: 25px;
 margin-right: 25px;
 padding: 5px;
 width: 685px;
 border: dotted 2px #D1D1D1;
}

Include file

Next step is to create an include php file for our Slideshow which will be called from the index.php, copy the code below and paste into a new text editor file and save this as demo-slideshow.php .

<div class="demo-slideshow">
 <div class="inner">
<!-- cu3er Slideshow Start -->
 <?php if ( function_exists('install_cu3er') )  { install_cu3er(); } ?>
<!-- cu3er Slideshow End -->
 </div>
</div>

The last code step is to add a call to include our new file in our home.php or index.php or any other page file we may want the gallery on, find this line  <div class=”art-layout-cell art-content”> and insert the code below on the next line.

<!-- demo Slideshow Start -->
<?php if (file_exists(TEMPLATEPATH. '/demo-slideshow.php')) include(TEMPLATEPATH. '/demo-slideshow.php'); ?>
<!-- demo Slideshow End -->

Cu3er Setup

We can now adjust the settings from Admin > Settings > Cu3er, enter the width and height to match our theme, we have worked out the width from the two values we noted earlier, and you can suppress the slideshow category by following the other tutorial on this website.

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.

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!

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.