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 "mf53_basic.zip" or "mf53_full.zip", depending on which package you use. You will now see a number of folders, four HTML files, and if you use the Full Template Package also the flash media player file. Duplicate all folders and files, saving them in a new folder with the name "mf53_mysite". In that folder go to the HTML files and save a copy of the file "mf53_grid.html" under the name "mf53_mysite.html". This will be your working copy where you will assemble the grid (layout) and content (text) for your new website.

Step Two

Your first decision is to know if you want the subcontent section (where the side menus also are found) to be on the left or right side of the page. It is very easy to reverse the ordering of these two sections. The default template has the subcontent section on the right, in line with current Web 2.0 trends. However, if you prefer it the classical way with the subcontent on the left, then perform the following changes. Go to directory "CSS" and open the file "mf53_grid.css". Look for the CSS-statements ".content" and ".subcontent". Each of these statements have the CSS-property "float", which decides the alignments. In ".content" change from "float:left" to "float:right", and in ".subcontent" change from "float:right" to "float:left". Save and close the CSS file. Your content ordering has now been switched. HTML code does not be changed! Check results in your browser.

Step Three

Open your newly created file "mf53_mysite.html" with an HTML-editor of your choice. Personally I use a Notepad++, which you can download for free. It is an fantastic tool. Please note that WYSIWYG editors like FrontPage or Dreamweaver cannot do the job you are about to perform! You must work on code level. As you open your new file, you will see all available grid components. Now start copying and pasting the sections you want until you have your basic grid set up. 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 prints satisfactorily. Be aware that Firefox is known to have difficulties in printing, so use Internet Explorer 6 or 7 for this purpose.

Step Four

Nowe we want to fill the various grid sections with text, image, video or audio content. If you want to add multimedia content, the permitted file-types for the media player are for audio (MP3) and video (SWF, FLV, MP4), where the MP4 option is only for files encoded in the H.264-standard. To fill your grid with content, open the file "mf53_content.html". Copy the content sections you want, and paste them into your new file "mf53_mysite.html" at the appropriate place within the grid sections. 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 Five

In case you introduced 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 the media player and related support files. See the Media Package Tutorial for more instructions. Check in the browser if your audio and video content is playing as expected.

Step Six

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 "mf53_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 "mf53_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 Seven

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 "mf53_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 Eight

In your file "mf53_mysite.html" enter correct links and link texts for your menus (flag menu, global menu, top navigation bar and side menu). If there are some menus you don't need, delete those parts of the HTML-code.

Step Nine

Go to the end of your file "mf53_mysite.html" and enter your copyright informations. Do not forget to enter your name under "Modified by". As a sign of appreciation for receiving Multiflex-5 for free, please keep the linked author credits Design by 1234.info in the footer. Thank you!

Step Ten

Rename your file "mf53_mysite.html" to "index.html".

Congratulations! Your webpage is now ready to go online!