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!
HTML and CSS Code
HTML
The HTML code comes with four files, "index.html" containing the overview, "mf5_grid.html" the grid styles, "mf5_content.html" the content styles and "mf5_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 use the absolutely identical HTML code, regardless of their grid (layout) positions.
CSS
The CSS code comes packaged in three files, with "mf5_reset.css" resetting all CSS parameters to a common value in order to reduce cross-browser inconsisttencies, "mf5_grid.css" defines the grid styles, and "mf5_content" defines the content styles.
Browsers
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.
Toolboxes
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 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 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 "mf5_basic.zip".
- 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: 17.1 MB)
- Unzip the file "mf5_full.zip".
- 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 only gives the files needed for the flash player to be in place.
Installation instructions
- Download (File size: 16.1 MB)
- Unzip the file "mf5_media.zip" 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 "player.swf".
- The directory "media" contains one audio, two video demo and two image preview files. 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 webusers..
- You are now ready to play media content.
- 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.
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.
Instructions
- Download (File size: 0.8 MB)
- Unzip the file "mf5_graphics.zip" to any location you prefer.
- Edit the graphics according to your needs.