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

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.

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.