Multiflex-3 Overview

Flexible and robust template

Now substantially improved and simplified

Multiflex-3 is the third generation Multiflex template. Numerous improvements have been made since Multiflex-2: More modern appearance, more page layouts, new drop down menus with sticky hover zones, solid printer support, expanded browser support, fully scalable upwards and downwards when user resizes the default browser font size, and last but not least, a much better and easier code. But there is more than that. Check the navigation menu to discover all about the new Multiflex-3!

Content Management Systems

Portings already available or in development

At the time of release, portings were being produced for various Content Management Systems, such as MODx, WordPress, and Contrexx.

Extensive browser support

Tested for all common browsers and systems

Multiflex-3 has been tested live for all major browsers, and functions properly for about 97% of currently used browsers. Only exception is the outdated IE5.x which has incorrect rendering.

Template successfully tested for:

Windows 2000 and XP

IE6, IE7, Firefox 2.0, Mozilla 1.7, Netscape 7.2, and Opera 9.0.

Windows Vista

IE7, Firefox 2.0, and Opera 9.0.

Mac OSX 10.3

Firefox 2.0, Mozilla 1.7, Netscape 7.2, Opera 9.0, Camino 1.0, and Safari 1.3.

Mac OSX 10.4

Firefox 2.0, Mozilla 1.7, Netscape 7.2, Opera 9.0, Camino 1.0, and Safari 2.0.

Linux (Fedora Core 4)

Firefox 2.0, Mozilla 1.7, Opera 9.0, and Konqueror 3.4.

Release Notes

Multiflex-3 / Update-7

January 15, 2007

Drop-down menu

Browser: Opera 9.10 / Description: In Opera 9.0.2 the drop-down meus behaved correctly, but in the latest version Opera 9.10, the drop-down main menu collapsed after hovering the main links. / Correction: In the CSS-class ".nav2 ul li a" the float statement was modified to "float:none !important /*Non-IE6*/; float:left /*IE-6*/;" in all "headerNN_setup.css" and "layoutNN_setup.css" files. The !important-float statement defines the behavior for Non-IE6 browsers including Opera, the other float-statement is for IE6.

Screenshots

Browser: All / Description: Fresh screenshots have been made for Update-7.

Multiflex-3 / Update-6

December 18, 2006

Drop-down menu

Browser: IE6 / Description: When hovering the drop-down menu, the rounded-corners image from the sidebar or subcontent boxes are incorrectly placed above the drop-down menu. This bug was initiated by the changes made in Update-4 (see below) / Correction: In the CSS-class ".nav2 ul li" is modified by the parameters "z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/;" was added to all "headerNN_setup.css" and "layoutNN_setup.css". The !important statement is for Non-IE6 browsers, the other statement for IE6.

Multiflex-3 / Update-5

December 17, 2006

Breadcrumb section background

Browser: All / Description: The replacement color (when image not found) for the background in the breadcrumbs section was set to its correct value. / Correction: For the CSS-class ".header-breadcrumbs" the replacement color-value for the parameter "background" was set to "rgb(255,255,255) in all "headerNN_setup.css" and "layoutNN_setup.css" files.

Centered images

Browser: Netscape / Description: Images positioned with "center" were displayed in left-justified position, but now correctly are displayed centered. / Correction: The CSS-class "img.center" was modified by including the parameter "display:block" and "width:auto" in all "layoutNN_text.css" files. As a result of this change, it is no longer necessary for the paragraph to be centered (<p class="center">) when centering images. Paragraphs containing centered images are now simply coded as "<p>", without using any classes.

Footer height adjustment

Browser: All / Description: The footer did not expand sufficiently in the vertical when browser font-sizes were increased. / Correction: For the CSS-class ".footer" the parameter "height" was removed, while top and bottom paddings were introduced in "padding", all in the "layoutNN_setup.css" files.

Sitemessage width and text

Browser: All / Description: The site message in the middle header-has received an increased width. / Correction: For the CSS-class ".sitemessage" the parameter "width" was increased by 50px in all "headerNN_setup.css" and "layoutNN_setup.css" files.

Corrected top drop-down menu

Browser: All / Description: Due to the changes in Update-4, an unwanted sideeffect appeared, namely that the sticky hover zones outside the drop-down submenu were missing on the right-hand side of the menu. The only way to resolve this issue was to remove the sticky hover zones altogether. / Correction: Reformulation and simplification of the CSS-classes belonging to ".nav2" in all "headerNN_setup.css" and "layoutNN_setup.css" files.

Javascript removed

Browser: All / Description: In order for the navigation menu to remain flicker-free for IE browsers, a Javascript was used in the previous versions of Multiflex-3. However, since these hover zones have been removed (see topic above), this Javascript is no longer necessary. / Correction: Link to Javascript in the HTML header-section, the javascript directory "js", the javascript "ieflickerhack.js", and finally the background parameters for the sticky hovering background image in the CSS-class .nav2 were removed in all CSS and HTML files.

Multiflex-3 / Update-4

December 11, 2006

Drop-down menu critical bug solved

Browser: All / Description: When hovering the drop-down submenu at very large font-sizes, i.e. when the menu is shown on two or more lines, the hovered submenu is now shown on top of other main menu items. Until now, the hovered submenu would erroneously appear below other menu main items, thus making it impossible to reach those submenu links. / Correction: Removed the "z-index:1000" parameter in the CSS-class ".nav2 ul li" in all "headerNN_setup.css" and "layoutNN_setup.css" files.

Multiflex-3 / Update-3

December 4, 2006

Browser compatibility increased

Browser: Konqueror, Netscape and Mozilla / Description: Drop-down menus now correctly open up vertically. / Correction: Added a width-specification for the CSS-class ".nav2 ul li:hover ul" in "headerNN_setup.css" and "layoutNN_setup.css".

IE flicker hack moved

Browser: IE / Description: Flicker bug hack now moved from CSS to Javascript, for compatibility with IE6 versions before SP1. / Correction: Delted "html{expression...}" from "headerNN_setup" and "layoutNN_setup", and placed the code in the Javascript file "ieflickerhack.js" in the directory "js". Advantage is, that the CSS-file now validates correctly.

Browser screenshots

Browser: All / Modification: Individual image links removed, instead a general link to my homepage directory containing the screenshots of interest. Advantage is that screenshots can be added or deleted without breaking any links in the template.

Footer text

Browser: All / Modification: Designer credits now reads "Design by", instead of before "Original Design by".

Multiflex-3 / Update-2

November 29, 2006

Printer layout and background color

Browser: All / Description: When printing, a gap was created between the header-and the content section. Further, no background color was printed for the left navigation sidebar. / Correction: Removed erroneous vertical padding in CSS-class ".header-breadcrumbs in all CSS-files "layoutNN_setup.css". Further, included a printer CSS statement for the class ".main-navigation" in CSS-files "layoutNN_setup.css".

Template links

Browser: All / Modification: All template links now point to my homepage, instead of to Open WebDesign. This change was done in "index.html".

Multiflex-3 / Update-1

November 27, 2006

Drop-down menu items

Browser: IE7 / Description: Misbehavior when hovering main link by showing multiple columns / Correction: Reformulated conditional "if" statements in "layoutNN.php", "headerNN.php" and "index.html".

Bottom header-background

Browser: All / Description: Background gap between bottom header-and breadcrumbs when browser font-size reduced / Correction: Added background to the CSS-class ".bottom-header" in "layoutNN_setup.css".

Rounded corners line

Browser: All / Description: When decreasing or increasing browser font size, a horizontal line appears above the rounded corners for subcontent boxes with boundary. Effect happens when font-size resizes, but page is not reloaded. / Solution: Simply reload the page, and the horizonal line disappears. This is a Safari bug which we have no control over.

Top search form

Browser: Konqueror 3.4 / Description: Field width available for search form widened, so that "Go" button appears to the right, and not below, the search area. / Modification: CSS-class ".header breadrumbs" changed in "headerNN_setup.css" and "layoutNN_setup.css".

Search form layout

Browser: All / Description: Search forms now have their "Go" buttons below the search entry field (only exception is search form below the page header). Reason for this is that Design remains consistent when browser font-sizes are resized / Modification: CSS-class ".button" changed in "headerNN_setup.css" and "layoutNN.css".

Button styles

Browser: All / Description: Default buttons are styled very differently for different browsers. / Correction: To harmonize button appearance we have now styled the buttons explicitly. However, Camino and Safari overrule this style with Mac-specific buttons. / Modification: CSS-class ".button" changed in "headerNN_setup.css", "layoutNN_setup.css" and "layoutNN_text.css".

Credits for flags

Credits were included for the flags.

Multiflex-3 Launched

November 23, 2006

First public release at Open Web Design.

Development tools

Many people ask me what tools I use. Here is the list:

  • HTML-Kit 292 freeware for coding the HTML documents.
  • TopStyle Lite 3.10 freeware for coding the CSS documents.
  • Browsercam provides fantastic browser screenshots and live testing of all currently available browsers on various systems.

Visit OpenDesigns.org

Latest top website for open-source webtemplates

Maybe you have heard of the latest news in the open-source webDesign community. As of December 2006 a new community of webDesigners was launched at OpenDesigns.org, featuring some of the very best talents. If you want to stay on the cutting edge of open-source webtemplates, learn and get ideas from experienced Designers in an active forum, or simply download state-of-the-art webtemplates for you to use, then this is definitely the site you want visit regularly.

Credits for ideas and reviews

Persons who contributed with ideas or CMS-portings for Multiflex-3:

  • Jesse Rochman (USA) -- CMS-port to MODx.
  • Ainslie Johnson (UK) -- CMS-port to WordPress.
  • Martin Thumann (Germany) -- CMS-port to Contrexx.
  • Ryan Thrash (USA) -- IE6 hacks using "!important".
  • Stu Nicholls (UK) -- Drop-down menus.
  • Big John (USA) -- CSS-hack for clearing floats.
  • Mark James (UK) -- Icons and flags.
  • Wolfgang Bartelme (Austria) -- Green header-background.