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.

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!