Css & Website ThemeDesign My Own Website

The Décor or Theme of your website refers to it’s layout, main graphics and it’s coloring. When using a CMS this is handled by a Theme and by a document called a Style Sheet or a programming code or language for it’s style called CSS which stands for Cascading Style Sheets.

A graphical depiction of a very simple css doc...
Image via Wikipedia

The word cascading, means that the style has a hierarchy. The Style Sheet is the default for your website, but the style used on this sheet can be changed on a per page basic by setting a definition for the style and “calling” it on a page.

Don’t start stressing!

Most people never touch their Style Sheet or write a new CSS definition. I’m just telling you so you know…

Most people using a CMS get a Theme that has been designed by someone who does know how to do it and they upload this Theme into their CMS theme folder, activate it, and instantly they have a new look and feel for their website. It’s that simple.

I Use and Recommend this Flexible Theme

Flexible WP Theme

Click here to view more details

I use it because it works for me. I’m quite lazy myself and don’t really enjoy coding with CSS or anything else. I can do it when I have to but I don’t want to!

This theme lets me set my CSS visually, by showing me colours to choose, and by clearly showing which parts of the site I can change, and giving me easy to understand options for size, colour and placement of fonts, hyperlinks, title areas and other website style elements. The theme makes this possible by adding an administration area for the theme in the back office of your CMS.

The Theme has more than 8 possible widget areas that can be turned on or off.  A place to easily enter banner ads or Google adsense in different website areas. A ready made spot to add your Google analytics code for stats. The Theme is updated regularly and improved each time. The creator and owner runs a forum and answers questions promptly and helps you, if this is needed.

Even so, there are times when a different Theme may be preferable.

There are particular styles of Themes that cannot easily be recreated using Flex, such as Magazine Themes or Portfolio Themes.

Should You Design or Use A Pre Built Website Theme?

It’s up to you! You can design your own website from scratch or have someone else design and code it. You can use a Pre Built theme or modify a pre built theme to suit your needs.

  1. Design Your Own Website Theme
  2. Modify an Open Source Website Theme
  3. Use A Free Website Theme
  4. Buy and Use A Premium Website Theme

Designing Your Own Website Theme

If you want a truly unique Theme and are willing to learn to use the coding languages you need to create it, then you can start from scratch and design your website by following instructions from the WordPress Codex. If you have a talent for graphics and can follow instructions, I believe it’s not so hard.

I’d love to design a site like this for example –

Complete WP Theme Guide

A slightly easier way though is to use a Theme Designer “Wizard” to start designing your own website.

WordPress Theme Generator (free)  &    Artisteer Theme Generator (paid)

Modify an Open Source Website Theme

Many free themes are open source and that means you can use these themes as a base template and modify them to add or remove elements. You can also use a default website theme and design and link a “child” theme for it. That means you can benefit from a great overall theme but modify only those parts of the Theme that you’d like to change.

Get Open Source Free WordPress Themes

You can design your own website Theme by learning more about CSS. Take any free open source Theme and change the theme’s style sheet to customize the elements in it.

To learn more about CSS, get a free CSS editor and Color Picking Tool visit

Green Eclipse Free CSS Editor and Palette

Use A Free Website Theme

Most free website themes have an attribution link in the footer that you cannot remove, but this may not bother you and it’s a way to say thank you for using a theme for free, that certainly took someone a lot of time to create.

Many free themes are very attractive and many are also very useful. The main problem is there is too much choice! There is also a time wasting period while you scroll through hundreds of examples only to install and check out free themes that eventually disappoint you and prove unsuitable.

Even so a free Theme is very often quite suitable to use, so long as you understand it’s license and restrictions.

Top 5 Lists of Free Themes

Crazy Leaf Design List of 50 Free WordPress Themes

Smashing Magazine List of 83 Beautiful WordPress Themes

DJ Designer Lab List of 60 Free Designer WordPress Themes

Web Designer Ledger List of 10 Free Minimal WordPress Themes

Make Use Of – List of 5 Best Free Portfolio WordPress Themes

Buy and Use A Premium Website Theme

Premium themes have similar problems to free themes in that there are so many to choose from and they may end up being unsuitable.

Premium Themes however, are less likely to disappoint you, as they are of a better quality and more likely to have been designed by someone who knows what people want to use in a Theme. Many premium Themes have functions, that are built into the Theme, which are both really useful and very desirable graphically.

You still need to check the Theme licence to find out whether you can remove the attribution link or not. This will also say if you can modify the theme. More often than not – you can, with a Premium Theme that you have paid for, but always check.

These 3 Sites Have Great Premium Themes

Elegant-Signup Today
StudioPress Premium WordPress Themes
StudioPress All Themes
ClassiPress - Premium Classified Ads Theme
Configured App Themes

What To Create When Designing A Website

Planning is again important when designing a website theme. First understand the basic grid structure and decide on what program to use, to design the Theme. The various parts of the website are designed first.

You can see an Illustration of Parts of a Website on Create My Own Website

The overall width of the website and it’s background are the first things to be set. The background displays if your website is not wide enough to completely fill the computer screen.

The header graphic area or Logo, the main navigation menu bar and a header feature area are next.  Where the main article page displays comes then, and whether it has sidebars and if they are left or right.  Finally, in the footer area there may be a second feature area and a footer menu and graphic area.

Once the general layout is designed for your website, widgets can be used to display content within them, or content can be coded into the Theme to display in specific areas inside the layout.

The text font and hyperlinks, the size and colour of header tags, the background colour on titles and block quotes are all generally set inside the Style Sheet.

Finally different types of template pages – for a home page, specific pages, posts, feeds, search results, category and tag pages etc, may be created and set to display for this content. These pages can be made to appear different to a home or normal page, and may have different layouts, displaying different content.

Changing A Header Graphic

In general all that is needed to make a website appear unique is to change the header graphic. You will find this graphic in your theme’s directory. Make a note of the name of the header and it’s graphic extension, and it’s dimensions. Create a new header the same size, save it as the same type, name it by the same name, and use ftp to upload it into the same directory you found it in, overwriting the original.

New Header – Instant New Website Design!

Enhanced by Zemanta