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.

We were seeing a few comments on using a different color on a different page, and the menu items with a color bar underneath, so we though we would have a look at see what we could do.

This is the result of a few hours work and we think it is quite fun, again it is yours to download use, change, delete, first things first is to have a look at the theme in action, you can do that here Color My World, then you may want to download it, that’s easy no registration just download it now Color My World (312) .

This theme is does not have thumbnail support or a widgetized footer so we have gone with the traditional two sidebars, after you have created the pages and are happy with the top level menu item you will need to apply the templates to the pages, we will cover this in this post.

-

Color Options

We designed the theme with neutral color choices for the content, and have given you the ability to change the colors to your own.

The Menu colors are in the sequence you set them in the admin page, you can find this after you activate the theme in “Appearance > Theme Options”, you can see this in the next screen shot.

We have included the header with the theme, you can replace the image in the folder, there is no option in the theme settings, all you need to do is change any of the colors below to your own choice and the theme will update when you save the options, you need to enter the full hex code which looks like #FF00FF.

If you are stuck for ideas for a color scheme then why not get some ideas and inspiration from Colour Lovers you will see the hex codes, write them down and enter them in the admin panel.

Page Templates

When you add pages you will need to apply the correct template, we have included 6 standard and 6 wide templates, the page numbers start after the home page from 0-6, you can apply the templates from, Pages > Edit > select the page and “Quick Edit” as in the screen shot below.

For the coders out there that would like to know how it works we will be following this post up with another functional post with code examples.

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 (358), 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.

Some of the WordPress groups on LinkedIn the members might be to high a level for the posters in the Artisteer forum who require specific answers on Artisteer themes and templates.

Anyway I have created a LinkedIn group ‘Artisteer Online User Group’, feel free to join in we do not mind the level of questions you ask or answer, you can showcase your website, seek critique, ask for help, post a job, post an article link, network with other users.

Please Join me on LinkedIn Artisteer Online User Group

David

On analysis you decide that the blog posts are mainly text and when you land on the website nothing grabs your attention, so you decide that some images will get the viewers attention and add another dimension to the content.

Using Images

To grow your website you may need to find some images,many internet users are of the opinion that the internet is a free resource, free accounts, free websites, free plugins, free themes, free software, free tutorials, free content and free images, and will just Google a few keywords and grab the images.

A lot of resources are indeed free, but that is the choice of the artist, author or asset owner, many images you may see on the internet have been licensed, that means the copyright is still owned by the artist or author and a license has been purchased granting rights managed or royalty free use for the buyer.

There is a few indexing services that can find where an image is used on the internet, one of these that photographers use is TinEye, if they find an un-licensed image on your website you could find yourself with an invoice for a couple of thousand dollars.

Licensed Images

There is a maze of places on the internet you can find safe to use images, most of the images in this post and on the demo themes on this website have been purchased from the micro stock image library IStockPhoto.com for less than $2 each, and where you will find a few million images that are usable on a website or blog on a royalty free licence.

These images can be used in a post or as a header images on a website, but not as a logo or included in a downloadable theme, if you wanted to include a stock image in a template that would require an extended licence which would be well over $100 on most stock sites.

Other Images

You might be handy with a camera and take your own images, as you are the photographer or author you own the copyright, that is providing it was not a commission or taken as part of your job for your employer, you might be thinking that’s great I will just go out and shoot my own images.

You might own the copyright on the images but what about the content, if there are people have you protected yourself by getting a signed model release, that ‘Nike tick’ on the trainer that you have used to emphasise that wearing trainers can damage your feet, or the house that you have used for your realty blog, do you need or have a property release for these. 

This would also cover Creative Commons images from places like Flickr where you can download and use images from other contributors under creative commons licence, although the image licence has been set by the photographer is the content without copyright issues and with all permissions recorded.

Image Licence Type

There are three types of content where an image will be use, un-licensed images can only be used for an editorial article.

Commercial: is the type of website where the website, posts or article is ‘Commercial Content’, this is where the sole purpose of the website is for a Business that is selling products or services, and for this use you would require all images content to conform with a ‘Rights Managed or Royalty Free’ licence.

Advertorial: is the type of website, post or article that looks like it offers help and advice, but the underlying purpose is to sell products and services through the website, and for this use you would require all images content to conform with a ‘Rights Managed or Royalty Free’ licence.

Editorial: is a type of website post or article that may have ad blocks like Google adSense which will have a mix of related and un-related content, but does not endorse or sell it’s own products and services, this may be a magazine that carries reports on events and news, which will use a mix of ‘Rights Managed, Royalty Free and Editorial Licensed’ images as well as un-licensed news worthy images, this could be images of a local church, school or community event, a picture of a person, landmark or building that is related to the news worthy content.

Responsibility

Content of your website is your responsibility, there are some actions that as bloggers or business owners we may not think about or take enough ownership of, we do have a greater responsibility in some of our own business models, two of these areas are ‘Due Diligence’ and ‘Duty of Care’. 

 Due diligence in civil litigation is the effort made by an ordinarily prudent or reasonable party to avoid harm to another party, failure to make this effort may be considered in a civil court as negligence.

As an author your due diligence is to gather enough information about the content and images to make sure to the best of your knowledge that it is ok for you to upload the image.

Many locations like zoo’s will only allow non-commercial photography, when you use photographs of a specific location, then you should inquire about commercial use of any images, even for images that you are going to upload as ‘editorial use only’.

Taking images of people for your blog, use age appropriate images for dating websites etc, when shooting under 18′s like a local teen ‘wannabe model’ that claims to be 18, then you should not just accept the word of the model, but have a recorded ‘proof of age’ if called for and a signed release, the preference is a photocopy of a passport, as any passport fraud is a criminal and not civil offence, a witness to the model’s age should sign at the same time as the model and also be present at the shoot to protect the photographer, if you keep all information and a file of these actions, then you can show you have exercised due diligence for the use of that image.

 Duty of Care is another consideration in business, there should be a duty of care from the blogger or author to the reader, any businesses greatest duty of care is to their customers, ensuring they have the knowledge and information to make a balanced and informed conclusion, and the readers are your blogs customers.

Sites in One Day:

We would like to welcome a new contributor of themes and services to Digital Raindrops,  Sites in One Day are already active and have contributed six themes with two variants left and right sidebars, these themes have flash headers, not just one but a number of different flash headers with instructions on how to change them, we are looking forward to more themes.

CMS-Lite Website:

The cms-lite plugin and website has been released, already we are seeing over 2000 visitors a week for the cms-lite plugin and our latest tutorials, many thanks to all visitors.

Featured Free Theme:

Our featured free theme for March is the Digital Raindrops cms-portfolio theme, this feature packed theme has a clickable logo, header information pane, cu3er slideshow, WordPress thumbnail functions with our added links and mouseover effects, four columns of images on the home page, and two with excepts on the categories page, and not forgetting the four panel footer area, we are proud of this theme and want to, share it, get it,  change it, use it, here is the overview and you can download it from the main Digital raindrops website with the benefit of being notified of upgrades, and thier will be a lot of new functions added to this theme, view it here, and read about it here:

If you would like to contribute tutorials, themes, free or premiun to Digital Raindrops the feel free to contact us: admin@digitalraindrops.net

Thats all folks!

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

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 (696) 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 (64)

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