1. Wp-ecommerce
2. Cforms II
3. WassUp
4. Google Analytics
5. WP-polls
6. WP-DownloadManager
7. All in one SEO pack

This site runs on the new Wordpress 2.5 and It seems like every plugin runs smooth. All these Wordpress plugins are easy to use and very useful if you are selling stuff on your website. Note that I also use Gold Cart which you can find at the WP-ecommerce website (paid features)

Elastic layouts are cool because they scale perfectly when your visitor want to adjust the font size in his or her browser, even the images scale. It’s not “the perfect solution” but it’s fun to try new things. We are going to use the em unit on everything, even the borders. If you don’t know what I am talking about you should download the template I made for this project. I called it Summer Romance and you can download it here. To see how this works simply open the index page in your browser and change the font size. You should be familiar with Html, Css, basic Photoshop and basic Flash before you start.

To get the basic idea on how this works just open the “Summer Romance” stylesheet called style.css. The only values you need to edit to see how this works is the values of the so called “em”. Try to change the width to 40em in the container element.

#container {
width: 50.5505em;
margin: 1em auto;
border: 0.286em solid #a2ba8c;
background-color: #FFFFFF;
}

As you can see the main page will become smaller. Where we usually use pixel values we now use em values. The easiest way to make a page like this is to simply build it with pixel values first then convert the pixel values to em values. The key to get control over this is to set your body font size to 75%, 87.5% or 100% (small, medium or large)

If you use 75% one pixel would be 0,0833 em
If you use 87.5% one pixel would be 0,0715 em
If you use 100% one pixel would be 0,0625 em

This means if you set your body font size to 87.5% (like in Summer Romance) you have to multiply all of your pixel values by 0.0715. Let’s try to convert the width in the container element to pixels and see if this works. If we divide 50.5505 with 0.0715 we get the value 707 which is our pixel value. Replace the value 50.5505em with 707px and check in your browser if it’s right.

(10px X 0.0715 = 0,715em)

Using the pixel converter that comes with the template makes it easy to convert all of your pixel values, simply choose your body font size and start converting.

Pretty simple but what about the images? we want them to resize as well. It’s very simple, in Summer Romance I have added this css class to the main image (Flash):

.mainimage{ width: 31.746em;
height: 24.024em;
}

The reason I use flash is that jpg’s dosen’t look good when you scale them with html or css. First you need to create an vector image (vector images can be scaled just like you want without the loss of quality). you should actually use illustrator for this and trace the image by hand, however here’s a quicker way (of course the quality is not as good as if you do it by hand, but it works if you don’t know how to make vector images). Open an image in Photoshop and resize it so it fits in your header, save as jpg. open Macromedia flash and create a new document, import your header image and go to modify—> bitmap —-> trace bitmap. Now try different values until you are happy with your vector image (Note, This is a quick solution and do not work very well with all images, but it can actually turn out quite nice with some images, experiment with different images and values). Now you have a simple vector image that can be scaled just like you want without the loss of quality. Export you little flash movie and insert it to your html document like this:

<object type=”application/x-shockwave-flash” data=”images/mainheader.swf” class=”mainimage”>
<param name=”movie” value=”images/mainheader.swf” />
<img src=”images/mainimage.jpg” class=”mainimage” alt=”Summer Romance Template” />
</object>

In Summer Romance this will be in the headerRight div, and as you can see we have used the “mainimage” class to make sure the image will scale properly with the rest of the page.

Spice up your typography as well

<object type=”application/x-shockwave-flash” data=”images/pixel_free.swf” class=”heading”>
<param name=”movie” value=”images/pixel_free.swf” />
<img src=”images/pixel_free_layouts.jpg” class=”heading” alt=”Pixel free layouts” />
</object>
<h1><span>Pixel free layouts</span></h1>

The class used here is

.heading{
width: 25.025em;
height: 2.574em;
margin-bottom: 1em;}

As you can see, it’s done the same way as the other flash images, the only difference is that I have added the H1 which is hidden using this class:

span {text-indent: -2000px;}

Note that this span is a little different than the method used in the Summer Romance. This is simply because this will make it a little more accessible than using display: none;

You can download Summer Romance for free here.

Margin is the space outside an element, while padding is the space inside an element. To illustrate this I have posted this image, which should explain it quite well.

You cannot use negative values with padding, but with margins you can.

If you are new to css it may be quite hard to adapt this to the template so I made it a bit easier. If you want Delicious Fruit with Stu Nicholls CSS flyout menu just replace index.html and style.css with the content of this zip file

(also note that there is an extra css file, this should be placed in the same folder as index.html and style.css)

• 2 Column fixed layout
• 3 column fixed layout
• 3 column fluid layout
• 4 column fluid layout

I thought this would be great for beginners learning css or for those of you who just want some simple “skeletons” to work with. All four templates should be very easy to edit and could even become complete websites with your own custom graphics.

All these templates are zipped into one file and can be used just like you wish, no backlink is required (but of course always appreciated)

Download these templates

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

The best way to integrate CSS into your site is to place it in an external file with the ending .css.

You do not need any special software to create a stylesheet. You can use Notepad or Wordpad, however using an
editor like Dreamweaver have some benefits like line counter and color code which makes it a little easier to locate errors.

When you have created your stylesheet you need to put a link in your html file to get all the css information.
If you call your stylesheet style.css it would look like this in your html file:

<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>

(always place it between the head tags in your html file)

Let’s just create a very simple page to see how it works. First we need to create a new html file. Open
Notpad or your prefered editor and copy and paste this text and save as index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My first webpage</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>

<body>

<h1>This is my main heading</h1>
<p>This is my first text</p>

</body>

</html>

Then we need to create a Css file. copy and paste this text and save as style.css

h1 {color: red;}

Ok, now we have created a basic page. as you can see your heading would be red (you can also use hex values instead of keywords like red, blue, green etc.)

the h1 tag should only be used once in a webpage, but what if we had two paragraphs with text where the first paragraph contains green text and the second blue?

The solution is to add a class attribute in the p tag like this:

<h1>This is my main heading</h1>

<p class=”green”>This is my first text which is green</p>

<p> class=”blue”>This is my second text which is blue</p>

Then we need to define our classes in our stylesheet. A class always starts with a punctuation like this

.green

(You can name your classes whatever you want but it’s clever to use logic names, maybe .greentext would be even better here)

Now, write this in your stylesheet:

.green {color: green;}

.blue {color: blue;}

Ok, not to exciting yet but you would soon understand how incredible cool CSS is and how powerful it is.

We would of course prefer to place our content in a cool layout. This is achieved using boxes. All websites are actually just boxes with content.

These boxes are called div’s

Let’s place our text in small box and place it in the center of the screen. Add this to your html file:

<div id=”mainbox”>

<h1>This is my main heading</h1>

<p class=”green”>This is my first text which is green</p>

<p> class=”blue”>This is my second text which is blue</p>

</div>

Then go to your CSS file and add this:

#mainbox {width: 500px;
margin: auto;
border: 1px solid green;}

Now, open your index.html in your browser and take a look.

You may have noticed that we did not have any prefixes on our h1 tag then we used the punctuation on our green text and this # on our div box.

This is because h1 is just used once at our page and we defined the tag directly, if we created another page h1 would be red there too. Classes (.) can be used several times and the id (#) attribute that we used on our div should be used only once.

This is the very basics of CSS, it’s not hard to imagine that we could do a lot of cool stuff with CSS when we have loads of CSS properties we can use.