Open Source Designs


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 "" or "", 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 "mf54_mypage". Your first decision is to know if you want a page with or without a sidebar section. If you want a page with a sidebar, then go to the HTML files and save a copy of the file "mf54_grid.html" under the name "mf54_mypage.html". This will be your working copy where you will assemble the grid (layout) and content (text) for your new website. If you instead want a page without a sidebar where the content uses the full width, then go to the HTML files and save a copy of the file "mf54_grid_nosidebar.html" under the name "mf54_mypage.html".

Step Two

This step is only for those who have decided to use a page with a sidebar. You must now decide 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 "mf54_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 "mf54_mypage.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 either to delete the sections you do not want, or to copy and paste the sections you want to multiply. Perform these operations until you have your grid fully set up. After each delete, copy or 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, you have two choices. If you are building a page with a sidebar, then open the file "mf54_content.html". If you are building a page without a sidebar, then open the file "mf54_content_nosidebar.html". Copy the content sections you want, and paste them into your new file "mf54_mypage.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 "mf54_grid.css" in the directory "css" if you are building a page with a sidebar. For a page without a sidebar, you should instead open "mf54_grid_nosidebar.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 "mf54_grid.css" in the directory "css" if you are building a page with a sidebar, otherwise open "mf54_grid_nosidebar.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 "mf54_grid.css" if you are building a page with a sidebar, otherwise open "mf54_grid_nosidebar.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 "mf54_mypage.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 "mf54_mypage.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 in the footer. Thank you!

Step Ten

Rename your file "mf54_mypage.html" to suit your needs. If it is your entry page, name it "index.html".

Congratulations! Your webpage is now ready to go online!

HTML and CSS Code


The HTML is coded using XHTML 1.0 Strict. Four files are available, "index.html" containing the overview, "mf54_grid.html" the grid styles, "mf54_content.html" the content styles and "mf54_tutorial.html" the tutorial.

A special feature which makes Multiflex really flexible is that the HTML-tag coding is uniform throughout the entire content and subcontent sections. In other words, the HTML data has identical coding, and can thus easily be moved from one part of the template to another without having to change the tags. All examples given in Content Toolbox (with sidebar) and in Content Toolbox (without sidebar) use the absolutely identical HTML code, regardless of their grid (layout) positions.


The CSS is coded using CSS 2.0. Three files are available, "mf54_reset.css" resetting all CSS parameters to a common value in order to reduce cross-browser inconsisttencies, "mf54_grid.css" and "mf54_grid_nosidebar.css" define the grid styles, while "mf54_content.css" and "mf54_content_nosidebar.css" define the content styles.


Multiflex-5 has been tested successfully for Firefox, Opera, Netscape, Safari and Internet Explorer. The template is highly robust and stable, and works safely in any modern browser environment.


Grid Toolbox

The Grid Toolbox is the tool with which the basic grid structure is constructed. This serves as the backbone of the template. Go to the Grid Toolbox (with sidebar) or Grid Toolbox (without sidebar) to see the available styles.

Content Toolbox

The Content Toolbox is the tool with which you fill the grid with actual text, image, audio or video content. Go to the Content Toolbox (with sidebar) or Grid Toolbox (without sidebar) to see the available styles.

Template Packages

Basic Template Package

The Basic Template Package contains all the necessary HTML, CSS and image files. This corresponds to the package version available at typical open source webdesign sites. If you downloaded your package from such a site, this is most probably the package you received.

If you don't care about offering audio and video content on your site, this package is all you need! The package does not contain any files needed for media content presentation or modification of original graphics files.

Installation instructions
  • Download (File size: 70 KB)
  • Unzip the file "".
  • To build your webpage, follow the instructions in Getting Started.

Full Template Package

The Full Template Package is an all-in-one package containing all files related to Multiflex-5, that is, the Basic Template Package, the Media Package and the Graphics Package. Here you have the option of also using audio and video content on your website. When unzipping the file, all files necessary for audio and media content are automatically installed in the right place.

Installation instructions
  • Download (File size: 11.9 MB)
  • Unzip the file "".
  • To build your webpage, follow the instructions in Getting Started.

Media Package

The Media Package is of interest to those persons who downloaded or have built their website using the Basic Template Package, but now would like to include audio and video content as well. The Media Package includes all the necessary files to get your media content going. As for the HTML coding, all necessary code is already in place in the Basic Template Package. The Media Package supplies the extra files needed for the flash player.

Installation instructions
  • Download (File size: 11.0 MB)
  • Unzip the file "" into the folder where your HTML files are located.
  • You should see three new directories, namely "media", "source" and ".svn".
  • You should see one new file, namely "mediaplayer.swf".
  • The directory "media" contains an audio and two video demo files (FLV and MP4), and one image preview file. This is also where you put your own media files and preview images.
  • The flash player works for users having Adobe Flash Player 9.0 or higher, which corresponds to about 90% of the global web surfers.
  • You are now ready to play media content.
Playable file formats

The media player can play the file formats MP3, SWF, FLV and MP4 (H.264). Please note that MP4 files must be encoded in H.264. Playback of MP4 files is only possible for users having Adobe Flash Player or later installed.


The MP3, SWF and FLV files immediately start playing in streaming mode, while MP4 playback waits until the entire file has been downloaded. However, the player can also be put in streaming-mode for MP4 files. Check Wijering's Media Player Setup Wizard to get the informations you need.

Further options

When the Javascript version of the media player is used, there are lots of additional options such as playlists and other effects. See a remarkable Media Player demo site with many examples.

Graphics Package

The Graphics Package is of interest to those persons who want to modify some or all of the graphical elements used in Multiflex-5. For this reason, files are offered in the original Corel, Adobe Photoshop or high-resolution PNG graphics formats.

Installation instructions
  • Download (File size: 0.8 MB)
  • Unzip the file "" to any location you prefer.
  • Edit the graphics according to your needs.