MBU Versatile, Corporate, Minimalist template

Home

Minimalist, Versatile, Corporate

Four modules

The mbudm#001 template lets you choose pages/site sections from four module types designed to help you customise the template to your liking. Of course a navigation item can also link to an external URL.


1. Mostly text module

An example of the ‘text module’ is shown on this home page. This module type is for pages that are predominantly text. It has one textField with support for inline images and html/css and it includes my utility, ‘Automatic Table of Contents’ which can be switched on and positioned to your liking.


2. Gallery module

The gallery module presents images and videos in a clean, uncluttered design. Of course deep linking is integrated into the gallery module as shown by this link to an image of a sunset.


4. Form module

The form module is quite customisable, as the form fields are editable in the XML file. The XMl is also very easy, because it uses as much standard html form tags as possible.


4. External swf module

This module loads a separate swf of your choice. It can be configured to receive onResize() broadcasts plus it can also be set up to call another function at the root of your external swf and pass a parameter to this function. One example of how this can be useful is for calling an initialise() function in your swf. The ‘external module’ is shown here.


The TOC list

This text block is set to have the table of contents turned on. It is also set to search for all headings that are marked up with h2 tags. You can buy the ‘Automatic Table of Contents’ utility separately from Flashden by following this external link: Buy the Table of Contents utility. External links are easy to create - just standard html..



Deep linking

The mbudm#001 template includes inbuilt methods that can be used in two ways to navigate within the mbudm#001 template itself. These utilise the Coordinate or Id system. The Coordinate system let’s you link to pages ‘relatively’, for example, page 2 of section 2 . The ID system let’s you target a precise page no matter where it is in the site structure. The link to the 'external module' above uses this system. The mbudm#001 template is smart enough to know what navigation option you are using and updates the main navigation site structure to enable you to see where you are.


The other aspect to deep linking is the ability to use the browser 'back' button, and to be able to bookmark any page. As you navigate through this demonstration site, you might notice that the browser location box changes to reflect where you are in the site. This is achieved by using the SWFAddress system. If you specify an ID for a particular page then the URL will use this instead of the standard coordinate system, this means that you can create 'friendly' urls that help people remember where they are (and what it is that they bookmarked) and give your URLs semantic meaning



Full SEO solution

The mbudm#001 template comes with an optional index.php file. This file is a customisation of the SWFAddress SEO solution. This file generates a text version of your site that can be read and indexed by Google.


To use the SEO solution you require a couple of things, these are fairly stock standard things that most web hosts provide, but check with your hosting provider if you are not sure.

  • An apache web server that has php version5
  • The ability to create .htaccess files on your server

Of course the standard SWFAddress dep linking mentioned above does not require these server settings.



Background Fader

You can set a background image or SWF for each page, each section, each sub section or none at all. The background will crossfade with whatever background is currently present and will resize with the browser - maintaining the image or swf scale.



Change the theme


Choose two colors to create a theme...

All graphical elements in the mbudm#001 template source their colors from the main 'theme' object. Changing the colours in the main 'theme' object is a simple matter of specifying two colours - a 'base' color and a 'composite' color. The theme object then creates tints and shades of these two colors which will be used by all the graphics in the mbudm#001 template.


...Plus use CSS to change the color of anything

In addition, if you don't like the 'theme' colour that has been chosen for a particular item, you can add a CSS override for that specific item.



Layout options with XML

The mbudm#001 template in the preview is set to a fluid layout with a 10% margin at right and left, a specific pixel margin at top and bottom and a navigation menu of 160 pixels in width. The full list of changeable layout options are:

  • Fixed width or fluid layout
  • Margin top, left, bottom, right. Pixels or percentages
  • Navigation width
  • Navigation offset X & Y
  • Navigation items space, for each tier in the hierarchy
  • Logo offset X & Y
  • Logo width
  • Content box radius
  • Content padding top, left, bottom, right. Pixels or percentages
  • Footer padding top, left, bottom, right.
  • Footer aligned with content


    • CSS control of text styles

    All text items in the template are controllable from the one CSS file. Support for embedded fonts is built in. All you need to do is add a font symbol to the library and use the export name in the CSS file. You can easily change:

  • Navigation font style (different style for each tier in the hierarchy)
  • The main text box style
  • The page heading text style, plus the space between the heading and the main text
  • The table of contents heading and link styles
  • The footer text style
  • The loader label text style
  • ... plus many examples of custom inline styles for emphasising text or creating custom sub titles in text.



    • Mouse Wheel scrolling

    The text content areas in this module all have a smooth scrollbar, and the option of adding the Table of Contents list for easier navigation. In addition to these text scrolling options, mouse wheel functionality has been added. This cross OS functionality is made possible with the use of the 'MouseControl class' from MrSteel and the SWFObject add-on: MouseWheel on Mac OS from pixelBreaker.



    Code customisation

    For the more experienced actionscript developer who may want to modify this template even further, you will be pleased to hear that the code is well organised into base clases and classes for UI and design. All code is commented and the documentation provides an overview of how the code is organised so that you can quickly identify what you need to make your customisations.