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

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.

The only time you should change core theme files is if it is the only way to change something, have you ever changed a value in a style and forgotten what the original value was when you wanted to roll back the change, or added code in the functions.php and forgotten what you added, all out tutorials going forward are going to use two new files and one line of code in the core functions.php file to load them, you could as a rule add these to your themes as a best practice.

The first file is a css file with the naming convention of your initials plus custom.css so mine is ‘dsc-custom.css’, so when in the tutorial it say open your css file, you will know to open this one.

Open your text editor and add a few comment lines between /* here */ to say what the file is for and save it as described above into your theme folder, it does not matter that there is no code changes in the file.

Stylesheet

/* This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This CSS file will be loaded last, make any changes to your styles only in this file
*/

Functions

this file you will save the same as above with a name of your initials plus functions.php, so mine is dsc-functions.php

<?php
/* This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/
?>

Not impressed, so lets put this into practice, in your own ???-functions.php file we will add some code to load our custom stylesheet and if you are using 2.9 we will add code to give page and post thumbnail support, so lists can show the thumbnails if the plug supports it, the next tutorials will be using the thumbnail functions.

First if you are using 2.9 adding support for the thumbnails only requires three lines of code, here you should set the default thumbnail size.

<?php
/*This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 200, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */
?>

Next we will create a function to load our stylesheet when the theme loads, the clever part with this is the WordPress hook wp_print_styles, which calls a standard function and loads the stylesheet, notice we have added the ‘if’ condition this will stop any fatal errors if a function is withdrawn, or you upload to an earlier version of WordPress.

<?php
/* This file is part of the Digital Raindrops CMS-Tutrorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 200, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */

/* Start code to load custom stylesheet name the function with your initials */
function dsc_stylesheet() {
if (file_exists(TEMPLATEPATH.'/dsc-custom.css')) ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/dsc-custom.css" type="text/css" media="screen" />
<?php }
add_action('wp_print_styles', 'dsc_stylesheet');
/* End code to load custom stylesheet name the function with your initials */
?>

Our last line of code goes into the themes functions.php file, open the file and after the <?php line add the call to your functions file.

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

Conclusion

You now have a tidy system to add styles and functions to your themes without changing the core code to often, and code that is portable between themes, but what was all that thumbnail stuff about?

On your Pages and posts you will now have a new form where you can select a thumbnail for your post or page, WordPress will crunch it to size for you as well.

How can you use this thumbnail, some plugin already support this, on the home page we are using  category posts plugin.

http://wordpress.org/extend/plugins/category-posts/

In the next tutorials we will be using this and the Dynamic content gallery on a theme, trying to get from this theme I created following a post on the Artisteer forum.

Finishing with gallery and three columns of categories as a tutorial not for production use.

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!

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.