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.

Overview

On the left over the CMS-Lite logo we have a clickable div region with a left float and a width of 145px, we could have made this 300px, this uses the same attributes as our logo tutorial, when you click the logo from any page it will direct you back to the home page.

-

Over on the right we have our second region, this has a float right and when you click on this region you are directed to the main Digital raindrops website, where you would find the forum and Free WordPress Themes.

-

Our adSense banner will show on all pages except the home page as we have a 320px x 250px advertisement that is often the same graphic, this was created following the adSense tutorial and setting the margin right to position it.

Tutorial

First we will add the style to our demo-custom.css or the themes style.css file, we have edited the names here to make them more identifiable.

/* change the left height width margin and float here */
/* header is 125px */
#demo-header-left
{
 position:absolute;
 float:left;
 height:115px;
 margin-top:5px;
 margin-left:10px;
 width:145px;
 overflow:hidden;
}
/* change the height width for clickable area here */
#demo-header-left a {
 position: absolute;
 display: block;
 height:115px;
 width: 145px;
}
/* change the right height width margin and float here */
/* header is 125px */
#demo-header-right
{
 position:relative;
 float:right;
 height:115px;
 margin-top:5px;
 margin-right:10px;
 width:150px;
 overflow:hidden;
}
/* change the height width for clickable area here */
#demo-header-right a {
 float:right;
 position: absolute;
 display: block;
 height:115px;
 width: 150px;
}

If you have followed any other of our tutorials you would know that we create include files rather than paste blocks of code into the themes main files, this makes our changes easy to manage.

Create a file in the directory of your theme paste in the code below and save it as demo-header-left.php, changing the target url to the value you want full url including a closing slash.

<div id="demo-header-left">
  <a href=<?php echo "'http://yoursite.com/'"; ?> ></a>
</div>

Create a file in the directory of your theme paste in the code below and save it as demo-header-right.php, changing the target url to the value you want.

<div id="demo-header-right">
  <a href=<?php echo "'http://yoursite.com/forum/'"; ?> ></a>
</div>

Next you need to add a call to the files in the header.php add the call just before the closing div for the header class

<!-- Start Raindrops header region left  -->
<?php if (file_exists(TEMPLATEPATH . '/demo-header-left.php')) include_once(TEMPLATEPATH . '/demo-header-left.php'); ?>
<!-- End Raindrops header region left  -->

<!-- Start CMS-Lite header region right  -->
<?php if (file_exists(TEMPLATEPATH . '/demo-header-right.php')) include_once(TEMPLATEPATH . '/demo-header-right.php'); ?>
<!-- End CMS-Lite header region right  -->

That is it, a relatively simple task to do, also adding more features to your themes and another tool to offer your clients from your toolbox.

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!