This template is released under GNU-GPL. Download an enjoy the new template.

So, you found a great looking free CSS template and want to add your contents and publish in your website. But, the problem is that you haven’t done it before.  You have no prior experience in HTML, CSS or PHP.  Before thinking about hiring a designer just to edit a free CSS Template, why not consider learning to do it yourself? It is actually pretty simple. But, not that simple.

In this tutorial I will show you how to edit the CSS and HTML based template and add contents to it.

I can’t edit this template using MS Word!

No, you can’t use Microsoft Word or iWork Pages to edit your website.  You can’t even use Microsoft Frontpage to do that.  MS Word and iWork Pages are Word Processors. Not HTML Editor.  MS Frontpage will only mess things up.  So, keep this in your mind – Never open a website template in MS Word, iWork Page or MS Frontpage. Not even once.

What you need ?

To edit HTML, You will need software that are designated to do that.  There are plenty of great apps out there that will help you edit HTML like a Pro. Most people would prefer WYSWYG editors like Adobe Dreamweaver and other expensive software.  But serious web designers prefer a simple text editor like Notepad++ or TextMate.  But, for a beginner, editing HTML on text editors might be a bit difficult.

Hence, for this tutorial we will use a free and Open Source HTML Editor called KompoZer.  This is probably the only free HTML editor that gives the much required importance for accessibility and web standards.  So, go ahead and download a suitable version of KompoZer for your Operating System.  It works with Mac OS X, Windows and Linux.

The Interface

Below is a screenshot of KompoZer running on Mac OS X.

Set up everything.

Let’s get started.  For this tutorial, I am using the CSS Heaven 2 Template I released earlier.  Download the template and extract it into a folder.  Now open KompoZer and you will see a screen like the above. Click on Edit Site List icon as shown on the image below.

You will get a screen asking you to select a directory (see the image below). Click on the Select A Directory button and choose the folder where you just extracted the template. and click OK.

You will see a list of files and folders at the left side of the screen (see below)

Double click on the index.html file from the list and you will get a window like in the screenshot below.

Now, the real work.

By default, KompoZer will open an html file in design mode. But you should never edit the contents using the Design Mode.  Although it is very easy to do it that way, it is not the proper and professional way.

At the bottom of the window, you will see 3 tabs (as shown in the screenshot below).  Now, go ahead and click on the second tab (Split).

Now, you will be able to see all the html tags and source code in another window right below the preview.  That is where we will be editing our template.

Changing the website name.

Select the Website name from the preview window and you will see the the source code of the selected text right below the preview window.  Now, click on the source code and  change your website name.

Click again on the preview window and you will see that the name is now changed.

The right way is to edit only the contents and not the design.  When you look at the source code of the website, you will see many tags like <h2>, <p>, <div>, <span> etc. These tags should not be removed or edited unless you know what you are doing.  If you are a newbie and don’t know anything about HTML, leave these tags alone and edit only the contents inside them.

Now,  let’s edit a paragraph.

Select the text under the heading About. You will see the source code under the preview window.  You can see that the actual content is inside Paragraph tags (<p>….</p>). Now, when you edit. make sure that you don’t remove the container tags. ie, <p>….</p>.  Only edit the text inside that.  This way you will be able to edit the text contents without disturbing the design.

Now go ahead and click on all the contents that you want to change and edit the source code shown below the preview window.  And, always make sure that you don’t change or delete the container tag.  After editing each content, refresh the preview and make sure that all is looking good.

That’s all for now about editing the contents of a website template.  In the next tutorial, you will learn how to customize a CSS Template’s design.  I am still preparing the tutorial and hope to publish it pretty soon. So, stay tuned.

Thank you all for the kind words.

Also, there seems to be a bit of confusion regarding the licensing.  Creative Commons Non-Commercial license does not mean that you can’t use it for your company website.  You can use it for your personal or company websites as long as you keep the link back to this website.  Non-commercial only means you are not allowed to sell this work to third-parties.

Most of my recent templates are in GNU-GPL, but I released the template ‘Portfolio’ in CC considering the amount of work went into designing that template.

Enjoy all the new designs and there are more on the way!

License

SilverBlog template is released under GNU GPL license. You are free to use it or modify it in any way you want without any restrictions. A link back to this website is always appreciated.

Enjoy the new template

License

This template is licensed under Creative Commons Attribution License. Yo are free to download and use it for your website as long as you keep the link back to this website unaltered.

For those who are interested in buying the PSD file, contact me using the contact form.

Most of the style elements are in the CSS including styles for Blog, Comment Templates etc.  If you want to quickly make the portfolio thumbnails in PSD, you can download the PSD template here

This template is released under GNU-GPL License. You are free to download, modify and use it in any way you want to. A link back to this website is always appreciated.