Open Source Designs

Welcome to Multiflex-5


Multiflex-5 is the fifth generation Multiflex template. It is robust, flexible and universally browser-compatible, having a Web 2.0 styled design. The HTML code is very slim, and thus easy to handle. Due to its flexible and modular nature, the template can be used for any type of website, such as a personal, educational, business, blog or portal homepage.


Multiflex-5 contains a large number of design features, both in the grid (layout) styles as well as for the content (text) styles. There are numerous grid building blocks and lots of different content styles such as headings, text, lists, quotes, images, links, tables, menus, contact forms, login forms, search forms and multimedia content. The header area can easily and quickly be adapted to your needs. The ordering of the subcontent section can in one step be easily reversed, moving the subcontent section from the right side to the left.

Audio and Video

A new exciting feature introduced in Multiflex-5 is the support for embedded audio and video content to be played from your website. The necessary code and flash player support files are all in place, so you only need to enter the names of your audio or video file names to make your multimedia content ready to go.


The Basic Template Package contains all the HTML, CSS and image files necessary to run the template. This corresponds to the package downloaded from various open source webdesign homepages. See the Basic Template Package Tutorial for further instructions. This package does not include the media player. To give you the files necessary for multimedia content, download the Media Package (see the Media Package Tutorial for further instructions). If you want to modify the various graphical elements, such as the logo, flags, icons to suit the needs of your website, then you find the files needed in the Graphics Package (see the Graphics Package Tutorial for further instructions).

The Full Template Package contains all of the above three packages combined into one package (see the Full Template Package Tutorial for further instructions). Installing the Full Template Package automatically includes a setup of the Media Package, so you are ready to go with your multimedia content from the very start. The Full Template Package is only available from the official Multiflex-5 homepage.


Multiflex-5 will enjoy a long-term future support because I have chosen this template to become the design for my own personal website. New releases will come whenever improvements or bug corrections are made in design or code.

Getting Started

If you want to begin right away, go the Multiflex-5 Tutorial and get started in ten easy steps.

Who can use Multiflex-5?


a. General

Multiflex-5 is released under the Public Domain License, giving any person the right to use, adapt or modify the template for personal, educational or commercial purposes free of charge. As a sign of appreciation I would be very thankful if you keep the linked credit line "Design by" in the footer.

b. Media Player

The embedded media player and its support files were developed by Jeroen Wijering and is under the Creative Commons Attribution License, which requires that you must credit the author in your webpage. The player can only be used for non-commercial websites. However, for a very small license fee the media player can also be used in commercial websites.


Multiflex-5 is more than a template. It is actually a webpage assembly toolbox where you can choose from a collection of design elements to build your own site layout. For this reason you will not see any specific audience targeted in this template (like blog, portal, etc.), but instead find the tools needed to create your desired design. If you are acquainted with CSS, you can even fine-tune the appearance to suit your needs exactly. See the Multiflex-5 Tutorial for more instructions.


Because Multiflex-5 is a webpage assembly toolbox, it is not suitable for WYSIWYG editors like FrontPage or Dreamweaver, which usually cannot edit code in templates of this kind. Creating a website using Multiflex-5 requires a working knowledge of HTML because your assembly will be performed at HTML / CSS code level.

If you do not have any experience in HTML and are not planning to learn HTML, then the best way to use Multiflex-5 is to see if any portings have been made to a Content Management System (CMS). When a template is ported to a CMS, data entry is easy and happens through input forms without difficulty. On the other hand, you can also take Multiflex-5 as your reason to try HTML out for the first time. The code is clearly structured and well commented, so it can serve as a learning tool for you to get acquainted with HTML. You will notice that it is not so difficult after all. Don't be scared to try! It may be a real win-situation for you!

Content Management Systems

I myself do not perform any CMS-portings since that often requires a detailed knowledge about the particular CMS of interest. However, I will post news at the official Multiflex-5 homepage whenever I get informed about a new CMS-porting. All CMS developers are kindly asked to report to me once they have a successful port available, so I can post that information inside the template and on the Multiflex-5 homepage.

Color Scheme Contest

If you like Multiflex-5, but didn't find your favorite color, you can participate in the Multiflex-5 Color Scheme Contest. The webdesign community at OpenDesigns will vote for five winners which will receive linked credits in the template.

The graphic elements and CSS files of the five winning contributions will be made available as downloadable add-on packages on my homepage. In this way users of Multiflex-5 can change the color theme of their site any time without having to modify code, they simply replace their image and CSS files.

Contest Rules

A minimum of 25 contributions must be made for the voting results to become effective.

In order for the color schemes to be available as template add-on packages, we cannot allow any modifications in HTML code. Changes permitted only for image and CSS files!!

Your color scheme must include the same elements found in the default template:

  • Rounded corner graphics
  • Header graphics (if needed)
  • Other background graphics (if needed)
  • Logo, icons and bullet graphics
  • Font colors (CSS)
  • Border colors (CSS)
  • Background colors (CSS)

If you want to use the original graphic elements as found in the default template, download the Graphics Package. You can also introduce your own graphic elements, if you feel you have some really nice looking stuff, as long as it fulfills the requirements above.


To get a quick feeling of your scheme, post a screenshot of your page, or a link to your demo.

File formats

Graphic elements must be offered in these two ways: 1) High-resolution PNG with transparencies for editing. 2) Operational format as implemented in your color scheme.

How to participate

Go to the Multiflex-5 Color Contest Forum.

Voting date

July 1, 2008


Image descriptionMy name is Gerhard and you may be surprised to hear that for my real occupation I work as a full-time pastor for a Christian church. If you have thoughts about the meaning of life, or have an interest in healthy living, or like to discover the principles of harmonious relationships, or enjoy discussing society, culture, science, religion and politics, or are wondering about future events in our world, or would like to find out what the Bible says about things that matter most to you, or want check my latest webtemplates, then feel free to come and visit my homepage. You are always welcome!

The road to Multiflex-5 was long and rough. In 2006 I decided to start my own website, but didn't find the template I needed. So I began developing my own. About ten template experiments, two years and countless nights later, I feel that I finally have reached the goal I was aiming for. It was a long journey, but I think it was worth the price!

Until my homepage is up and running fully, you can reach me via the contact form.


Release Notes


March 13, 2008
Full-width option

New feature: A new option added for full-width content, that is, with no subcontent section. The full-width content section can contain up to three columns

Nested side menu

New feature: The menu in the subcontent section now con contain one additional sublevel menu.

Styled table links

New feature: Styled links in consistency with the general design are now available also for content inside tables.

Optimized CSS-class names

Modified: The terminology of the CSS-class names for the content cells and subcells was confusing. Another vocabulary was introduced, now using the term "1-col", "2-col" and "3-col", instead of earlier "cell" and "subcell". In this way the meaning of the CSS class is more obvious. Furthermore, the advantage of this approach is that the HTML code for pages with sidebar and for pages without sidebar remain fully identical, and thus are 100% interchangeable.

CSS classes for tables

Modified: The CSS-class "medium" for tables was removed and the formatting made automatic for the tables regardless of their positions in the code. The automatic formatting is done by localizing if the table is in a 1-column, 2-column or 3-column setting.


January 22, 2008
Vertical margins for lists

Problem: Vertical margins for lists not optimized, including two wrong values for IE6.
Solution: Four CSS-lines were changed: 1) In the file "mf54_content.css" the CSS-statement tag for unordered lists was changed from ".content ul {margin:-1.0em 0 -0.5em 0; padding:1.5em 20px 1.0em 20px;...} to ".content ul {margin:1.4em 0 1.0em 0; padding:0em 20px 0em 20px;...}". 2) The auxiliaryCSS-statement for the indented unordered list was changed from ".content ul.indent {padding:1.5em 50px 1.0em 50px;}" to ".content ul.indent {padding:0 50px 0 50px;}". 3) The same procedure was performed for the ordered list "ol", that is, from ".content ol {margin:-1.0em 0 -0.5em 0; padding:1.5em 20px 1.0em 20px;...} to ".content ol {margin:1.4em 0 1.0em 0; padding:0em 20px 0em 20px;...}". 4) The auxiliary CSS-statement for the indented ordered list was changed from ".content ol.indent {padding:1.5em 20px 1.0em 70px !important /*Non-IE6*/; padding:0 20px 0 80px /*IE6*/;}" to ".content ol.indent {padding:0 20px 0 70px !important /*Non-IE6*/; padding:0 20px 0 80px /*IE6*/;}".

Subcontent to left side

Problem: Tutorial did not mention that the ordering of the content and subcontent sections can easily be switched, thus putting the subcontent on the left-side and the content on right-side of the page.
Solution: Extended the tutorial with one step (a new Step Two) to inform the user how this change can be made by a simple "float:right" and "float.left" modification in the CSS-statements ".content" and ".subcontent" in "mf54_grid.css".

Additional side menu

Problem: Side Menu #2 is good, but has a large subheading sizes and distance between submenus.
Solution: Introduced HTML code for a third menu alternative in the subcontent section. Name of menu is "Side Menu #3", which has smaller headings between the menu list items, by using heading-size "h5", instead of size "h2" as used in Side Menu #2.

Media Package

Problem: Missed demo video file in MP4 (H.264) format.
Solution: Demo video file "video.mp4" added. The video has the same streaming rate (350kbps) and resolution (432x270) as the video file in FLV format. File size of Media Package file-size now increased to 11 MB.

Media HTML / CSS code

Problem: Aspect ratio of embedded player not corresponding to demo files aspect ratio.
Solution: Aspect ratio in HTML code adjusted by changing the "height" and "width" properties for the div-section "videoplayer". In conjunction to this change, the CSS-statement ".videoplayer" was adjusted accordingly.


Problem: The min-height property got unknowingly modified in a previous version, so the header height was fixed, even when increasing the text size.
Solution: Fixed the "min-height" and "height" parameters in the CSS-statements ".header", ".header-top" and ".header-bottom". Removed the "overflow:hidden" properties from the same CSS-statements.


January 21, 2008
Media Package

Problem: Demo video files were too large for online content playback.
Solution: Demo video files recoded for a smaller streaming rate (350 kbps) and resolution (432x270). The size of the Media Package was thus reduced from 16 MB to 7 MB. Furthermore, the name of the mediaplayer was changed to the original name of Jeroen Wijering, namely from "player.swf" to "mediaplayer.swf". This change had also to be incorporated in the HTML code where the player is retrieved.

Vertical margins

Problem: Headings h1-h6, p, ul and ol vertical margins were not well adjusted. One bug found for h2.
Solution: Top and bottom margins redefined in "mf54_content.css". Some header tags (h3-h6) had to be adapted in the HTML code accordingly.


Improved instructions given for the Media Package in the section "Tutorial".


Included credits for the BBC nature video used as demo video.


January 20, 2008

Problem: Javascript found in the login forms in file "mf54_content.html".
Solution: Javascript removed, including the "meta" tag in the "head" section at the top of each HTML file.

Bottom Header

Problem: Vertical alignment of search box incorrect in IE6.
Solution: In file "mf54_grid.css" the CSS statement ".header-bottom" was modified by including an "!important" statement for "min-height" for non-IE6 browsers, and at the same time introduced "height"-property for IE6.

Media Player License

Problem: Missing informations on license type.
Solution: Included reference to the Creative Commons Attribution License for the media player. Also the required credit link to the media player author was introduced in the page footer.


Improved content and explanations.

Color Scheme Contest

Rules enhanced and updated.


January 18, 2008

Template submitted to Open Designs, Open Webdesign, Open Source Webdesign and Free Layouts.


Full Template Package

Contains the Basic Template, Media and Graphics Packages. Multimedia files installed automatically.
Latest update

Previous Multiflex


Released: 15.05.2006
OK for operational use.
Latest update


Released: 08.06.2006
OK for operational use.
Latest update


Released: 25.11.2006
Well suited for operational use.
Latest update


Released: 18.12.2007
Well suited for operational use.
Latest update