Guide: Adding content to olive/flower layout

Open the html document in notepad (set filetype to 'all files') or your preferred html editor to add your own content. Content of this guide:

MENU: Adding menu links, Creating more menuboxes with links
MAIN CONTENT: Adding text, Adding a headline/title, Adding a text link, Adding images, Spacing images, Adding an image link, Getting rid of image link borders and link effects, Adding lists, Starting out with a clean slate - getting rid of my added content.

Menu:

Adding menu links:

Each menubox has an un-ordered list (<ul>...</ul>) with list items in it (<li>...</li>).
Each menu link is a list item, and each list can have as many or few list items as you like. The text inside the <h4></h4> tags is the menu title. To add another link inside the menubox simply add another set of <li>...</li> tags containing your new link. (still keeping inside the <ul>...</ul> tags)
Example, menubox with 3 links: (Note: you might need to remove the line breaks and put the entire list code on the same line in notepad, some times browsers get funky over line break inside lists...)

Creating more menuboxes with links:

To create more menuboxes simply add a menubox div (<div class="menubox">...</div>) containing a list, you can just copy one of the existing ones and change the links (or add other content like link banners).
Example, 3 menuboxes: (Note: you might need to remove the line breaks and put the entire list code on the same line in notepad, some times browsers get funky over line break inside lists...)

Main content:

All main content should be inside the <div id="maincontent">...</div> tags.

Adding text:

Put all text inside paragraph tags (<p>...</p>), otherwise it won't be formatted correctly. Use a set of paragraph tags for each paragraph. Make a line break using <br>
example:

Adding a headline/title:

Put the biggest headline in <h2>...</h2> tags and the smaller size in <h3>...</h3> tags.
Note that the first headline/title just below the top banner should be in <h2 class="toptitle">...</h2> tags, otherwise too much space will be added between the banner and the title.

Adding a text link:

This will make a link:

Adding images:

Using the <img src="..."> tag you direct the browser to the location of your image on the server.
Example, image in same folder as html document: Example, image in subfolder: Note: the alt attribute is required in the latest html standarts, so don't leave it out. The title attribute will show a text when mouse is hovered over image. If you don't want a mouse-over text, put title="" in the img tag instead.
(Just leaving out the title attribute is a bad idea as IE (but not Firefox) will then show the alt text instead. You could also just put alt="" and leave out the title attribute for the same result).
The point of the alt attribute is to show a text should the image fail to load (or if image view is turned off in the browser)

Spacing images

If you want to add some extra space around the images, add this to you css (by opening the css file in notepad, copy and paste this bit): The first value will set the size of the top and bottom padding, the second value will set the left and right padding. Set the padding to your liking.

Adding an image link:

To turn an image into a link do this:

Getting rid of image link borders and link effects:

When you turn an image into a link most browsers will add a yucky border to it. To avoid this you can put this in your css or if you used padding like above put the no border part with that, either way will work: Now the styling you've done for the links will also be applied to the image links. This might not matter, but it might also look really silly. Removing the image link styling is a bit more tricky than removing the border, but it can be done by putting the linked images in <span>...</span> tags with a class. That class is then used in the css to remove the links styling.
That means you'll need to edit both html and css.
Example, html: You'll see that the linked imaged has been put inside span tags with a class attribute. We'll then style that class in the css. (Note: don't leave out the punktuation mark in the css, this symbolizes 'class'.)
Example, css: Put all linked images inside styled span tags and you won't get any link or mouse-over effects.
(Note: there might be an easier way to do this, but this is what I got to work.)

Adding lists:

Lists are made by using un-ordered list tags... like this: (I'm putting each thing on a new line so it looks neat and easy to read, but you might need to write it all out as one line, some times browsers get funky over line break inside lists...)
And a list with links: (again, you might need to take out the line breaks)

Starting out with a clean slate - getting rid of my added content:

Here's the basic html without any real content added, copy and paste this for easier editing (be sure to delete ALL of the old page first):