Hello Kieren

It's almost time I hand off this site to you. You and me both know its not going to get more done then this. So whats the point of trying to hide it- it looks great regardless, and don't feel like your going to be left in the rain- I'll include hints and tips for this design and functions that you might not of guessed.

Please scroll down and read what I have talked about in this document, you might find useful information to further enhance the layout on your own- or to work wordpress into it.

Some HTML Features

Thanks for allowing me to code you up a brand new site for the brand new Non-Stop-Tech. While this website is very simple, it offers a range of techniques and features for you, as well as easily editable in the future with new features or removing current ones!

Images

Above is how an Image renders in this Frame section. This frame section is the primary section for your content and "frames" it.

The image can be inserted, inside or outside a "p" tag, however it doesn't need anything specific tacked on to make it render the border, and padding, as well as centering of the images. In laymans terms, an image in this section will always be centered and have a style without and effort from you!

Headers in the Frame

In the content section, this layout supports something called a header tag. Header tags are used mostly to define segmements and be linked too and do much more then a bold or underlined setence. Different purpose and different awesome the layout supports.

Header 1

Header 2

Header 3

Header 4

Header 5

If you are wondering while we support all the way down to header 5! This is considered the standard when desiging websites, as it allows for heaps of leway in the header system.

You will find Wordpress for example will output somethings in headers, or you can even make it so a header is used for the title of a post. The headers support links inside them, and that means they are ready to go for what ever you do with them!

Lists

This layout uses lots of lists, as you may or may not beaware, the navigation is designed using a list. (more on that later), but lists can be quite diversable in what you use them for. With this layout section in mind, a list will be generated like a regular normal list.

What I have done to this list is the following (cleaverly put inside a list):

Wraping you head around the header!

When we talked, we had very crazy ideas, but what has become of fruition is a much more simple, yet hightly modifiable header design.

Included in this layout is a PSD for the header. You can modify the general area which the logo is in to your suiting as time goes on. At this stage it is a very simple design with a few shading effects which make it more appealing. You will find also that this header is see-through to a degree, and can be used with or without the background enabled.

The navigation is all done with CSS, and isn't an image at all. You will find most of the design elements of the CSS will work with the majority of browsers, but keep in mind some techniques are used from CSS 3 standards, which isn't finalised, so it might not work on all browsers at this stage- and there might be work arounds already implemented in the style sheet.

Also in the header area is a "join" div tag, which at the momement says "join now for access to minecraft server", no doubt if you modify it in wordpress can you insert the realitve PHP which makes it so that section when logged in changes to account settings, ftp links minecraft url links etc.

The Background

The background uses a minecraft image. You may decide this is useful for all your site, or none of your site. You may also choose to include a different background throughout the site at certain times.

If memory serves correctly, you can use a class based system which finds the name of the wordpress page, converts it into a "class" and allows you to then have CSS corasponding to that class, so if that class is found you got your minecraft background- or backgrounds.

But I'm not doing that- you can do that.

/* background: url('images/background.png') no-repeat center center fixed; */

This is the code for a- what do you call it, an old fashion comment out, so if you don't' want to use certain code, keep it there- but remove the effect of it by commenting it out- as shown above. (note: this little bit of code is protected by a "pre" tag, which gives it some nice styling).

Putting into Wordpress

Remember to convert this theme into a wordpress theme, the best way to do it is to aquire the default theme for all the PHP goodies (and just sniff out what you want to use) then convert this theme into.

You will want to include in the style sheet basiclly anything within the style tags (obviously without the style tags). Also remember there are some comments which wordpress needs included in the style sheet (shuch as author, site url etc.) copy the comment sections from another style sheet and edit them with your information!

index.php and home.php can either be both the same content, or home.php can be edited with a few other things to make it more interesting (remember home.php is the page which loads on your home page, and index.php is used more as a basic view of small sniplets of your content. Post.php (I'm fairly sure its a thing) will be the big sections of your news pages, and Page.php is obviously the page sections.

Header.php you will want to copy the header information from another theme (as its got all that PHP goodness remember) and then when you get to the body past in the information from this layout for the header div tag area. Don't copy in the frame into this section (or you can copy the div tag open- and put the div tag closed in the footer.php if you like). Footer.php will obviously be the footer div tag and anything below it.