Getting Started

Step One

Those familiar with XHTML and CSS will find it easy to get used to Multiflex-5. Unzip the template package file. Save a copy of the file "mf5_grid.html" under the name "mf5_mysite.html". This will be your working copy where you will assemble the grid (layout) and content (text) for your new website.

Step Two

Open your newly created file "mf5_mysite.html" with an HTML-editor of your choice. Please note that WYSIWYG editors like FrontPage or Dreamweaver cannot do the job you now are about to perform! You must work on code level if you want to produce a reliable and stable code. I myself use Notepad++ as code editor. It is a fantastic tool. As you open your new file you will see all the available grid components. Now simply get going with copy and paste until you have the basic grid setup you prefer. After each copy and paste step don't forget to reload the page in the browser to see if the last edit step was performed correctly, or if some error occured and the layout now breaks. If the layout breaks, undo the last edit step. When finished with copying and pasting make a quick check to see if the page also prints. However, be aware that Firefox is known to have difficulties in printing, so use Internet Explorer 6 or 7 instead.

Step Three

After your printing test has passed it is time to fill the various grid sections with text, image, video or audio content. To do this you open the file "mf5_content.html". Now copy the content sections you prefer and paste them into your file "mf5_mysite.html" at the appropriate place within the grid. After each paste, reload the page in your browser to see if everything worked fine. If not, undo the last edit step. Repeat the process until you have filled your page with all the content styles you need.

Step Four

In case you introduce video or audio content, now is the time to set up the media package. If you used the Full Template Package, then your media package is already installed and you do not need to do any further setup. If you used the Basic Template Package, you need to install some media setup files. IMPORTANT: Users of Internet Explorer 7 will note that media does not play when the page is locally on the harddisk. Once you upload your webpage and media contents, IE7 plays the media as expected. For media testing purposes use Firefox instead. Once your page is online, everything will work as expected. See the Media Package Tutorial for more instructions.

Step Five

Now is the time to modify the header according to your needs. The header area is divided into two vertical sections, the top and bottom header. First you must decide if you want a merged header where the background covers both the top and bottom sections with the same image or color, or if you want the top and bottom headers to remain separate. Once you have made your decision, you need to know if you want an image background or a simple color background. The default template configuration is the use of separated headers using simple color backgrounds.

Using separate headers

If you want to use a simple color background, open the CSS-file "mf5_grid.css" in the directory "css". At the top of the CSS statements you will find ".header-top" and ".header-bottom". In each of these CSS statements go to the RGB definitions and modify the RGB values to the colors you prefer. Save and close the file. Your header is now ready.

If you want to use background images, you do not need to open the CSS-file. First produce the images for each of the header sections. The top header requires an image size of 958x100 pixels, and the bottom header 958x30 pixels. If your image only has vertical variations, but is uniform in the horizontal direction, you can use a smaller width for the image and use the repeat function for extending the background image in the horizontal direction (already activated in the default template). Name your image files "bg_header_top.jpg" and "bg_header_bottom.jpg" and place them in the directory "img". Your header is now ready.

Using a merged header

Open the CSS-file "mf5_grid.css" in the directory "css". At the top of the CSS statements you will find ".header-top" and ".header-bottom". In each of these CSS statements simply put an "x" at the beginning of the property name "background {...}", ie. "xbackground {...}". You have now deactivated the two separate top and bottom headers. Now you need to activate the merged header, which is defined in the CSS statement ".header".

If you want to use a simple color background please remain in the CSS file and modify the RGB values in the CSS statement ".header" under the property "background". Your header is now ready.

If you want to use a background image, you can now close and save the CSS file. Produce an image with the size 958x130 pixels. Rename your image file to "bg_header.jpg" and place it in the directory "img". Your header is now ready.

Adapting the icons

There are a number of graphical icons in the header section, like the logo, flag, and RSS icons. These images have been adapted to the grey background in the default template and may no longer match your new header background appearance. To make it possible for you to adapt the graphical icons according to your needs, you need the Graphics Package to adapt the icons for your needs. For the layout to remain balanced, your new icons should have the same image heights as the default icons. Your header is now ready.

Step Six

Now we want to take a look at the body background, that is, the background color outside the template on the left and right sides. Especially for wide-screen users there is a substantial region to the left and right of the webpage that is not filled with information. You can decide which color you want to give this region. The default background color is grey.

If you want to change the body background color, please open the CSS file "mf5_grid.css". In the first CSS statement "body" go to the property "background" and modify the RGB values according to your needs. However, the rounded corners for the outer border of the template assume that the background is grey. If you modify the background color, the rounded corner graphics must be recreated using the graphics files in Graphics Package.

If your background color was changed to white, you do not need to recreate the rounded corners. Simply go to the directory "img" and rename the file "bg_corner_top_white.gif" to "bg_corner_top.gif", and the file "bg_corner_bottom_white.gif" to "bg_corner_bottom.gif". Of course you first backup the old files by renaming them to "bg_corner_top_grey.gif" and "bg_corner_bottom_grey.gif" respectively. Your new background and rounded corners are now ready.

Step Seven

In the last step we adapt the footer. In your new website file "mf5_mysite.html" go to the end of the file and enter your copyright and company name informations. Do not forget to enter your name under "Modified by". As a sign of appreciation for receiving Multiflex-5 for free, please leave the linked author credits Design by 1234.info in place. Thank you!

Congratulations! Your template is now ready for operational use!