Overview | License | Help Info
UltraSimplicity

This is probably the simplest template in the world - no images, no javascript - just css-based layout.

When setting colors in the shaker, do not forget that the text and link colors for the sidebars and the middle (main content) column are different - for example, if you set dark background for the sidebar and light background for the main (middle) column, you should set light text/link color for the sidebar and dark - for the main content...

You will see that some possible layout settings are in "percents". The difference between values in "pixels" and "percents" should be evident - the size in % will be browser-calculated for the respective screen/browser size, while when you set values in "pixels", the size will be the same in any browser/screen size.

This template includes so called "pull-down" (or "drop-down") menu. The menu is nothing special -- just several <ul>/<li> tags, but in case you do not catch how it works, read the notes below...

First of all, the menu should not be edited in WYSIWYG mode, you must switch your html editor to "html" or "code view" in order to change menu content.

The menu container is located on the top of the page body. Just look for the following comment inside the html code:

<!-- EDIT MAIN MENU BELOW, JUST USE THE SAME STRUCTURE: -->

Menu begins under this comment and ends just before the closing comment:

<!-- END OF MAIN MENU -->

As you'll see, the menu code is just a combination of nested unordered lists (<UL>). We use top-level <UL> for the main-menu items, and nested <UL> for the submenu-items.

A typical menu screenshot shown below:

The definition of each menu/submenu should be as follows:

<li><a href="item-link.html">Item Title</a></li>

 

NOTE: You'll see that the submenu items are nested inside optional <table> element -- this is the way we can make the menu to work with IE6, so - do not remove these optional tables ...