decloak logo
Cart cart | sign out  
Template and Menu Hot Sauce
MainFeaturesFLASH MoviesFAQCustomersOverview ONDownloadsBuy

1. Support Home
2. Common Error Messages
3. Useful Upgrade Tips
4. URL Path Confusion
5. Setting Keyboard
6. Sending Error Messages
7. Find And Replace Tips
8. RollOver Problems
9. Layout vs Standard View
10. Site Definitions
11. Editing Vertical
      Tree Menus
12. Recreate Site List
13. Update Site...
14. Web Page Width
15. Designing for
      Search Engines
16. Adjusting Tree
      Menu Margins
17. Set Focus On
      Text Box
18. Rename Folder
19. Dynamic Page
20. No Valid
      Editable Region
21. No Super
22. Initialize Folder
23. Initialize Combo Tree
24. Tree Line
25. UnBalanced
      Editable Regions
26. Foreign Language
      & Special Characters
27. Adjust Row Menu Height of
      Vertical Tree Menu Items

css tutorial
You should be familiar with CSS, specifically the basics, "classes", "pseudo classes", as well as "grouping" and "order of precedence"
Please read the below for a quick tutorial on each topic
  1. Css Classes and Css Pseudo Classes
    "classes" are used to specifically target the menu item for "so and so" kind of formatting.
    "pseudo classes" are used in conjunction with "classes" to add special effects to the menu items such as rollovers, etc.

    Note: Template Parameters are managed by Menu Hot Sauce so as to control the ON and off states of the menu items.

  2. Css Grouping1 and Css Grouping2
    "grouping" is used to format a group of css classes so that Css stylesheet has "efficient" code. In other words, if we want to have "Arial" font for these sets of classes, we group them together in a single multi-class definition so that we don't have to write, "Arial", "Arial", "Arial", "Arial, over and over and over again for each css class definition.

  3. Css Cascading and Inheritance and Order of Precedence
    In conjunction with css "grouping", each css class is further defined afterwards to give it its unique formatting. So whereas a css "grouping" says all these classes use the same font, e.g. Arial, each individual css class in the group is defined a 2nd time so as to give it, for example, a different, color, say, "red" for instance, or "blue"

  4. Css Cheatsheet

Example CSS for file: MHS_VTreeButtonsSTYLE.css (this example is for the Vertical Tree Menu)
/* + + + + + Tree List 01 + + + + + */
/* 1st Cell */
.Tree01TD1_ON_HOVER , 
.Tree01TD1_ON ,
.Tree01TD1_HOVER ,
.Tree01TD1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	vertical-align : top;
	padding: 7px 5px 3px 5px;
	background-color: #008080;
	 background-repeat : no-repeat;
	 cursor : pointer;
 .Tree01TD1_ON_HOVER {background-image: url(images/Bg_008080_TD1.gif);color: #FFCC00;}
 .Tree01TD1_ON {background-image: url(images/spacer.gif);color: #FFCC00;}
 .Tree01TD1_HOVER {background-image: url(images/Bg_008080_TD1.gif);color: #FFCC00;}
 .Tree01TD1 {background-image: url(images/spacer.gif);color: #003063;}
So, WHY all this advanced CSS to set the
colors, background, etc.?
In order to get the ON and off states for all the buttons as well as the HOVER for both ON and off states, there has to be separate CSS classes for each state. This are 4 total. Next, each "level" for the tree could be different as well. Note, if you want it all the same, you can make each level the same properties, just keep use the different class name for each level of the tree menu.

And it's the same for the horizontal menus, well almost. That's a little bit more tricky. With the CSS Horizontal menus, each button has 3 parts, left, middle and right. The middle part automatically expands to the width of the name of the button or the text name. The left and right parts are for "curved, rounded, squarish, or none at all " sides for buttons and tabs. Even if you don't want curved, rounded, or squarish sides, you still have to use them. These 3 parts make up a single button and respond as a unit when the user rolls over each button. Using a different CSS class, the left, middle and right part of each button, the menu item appears as a single button and is able to have the rollover effect as well as the ON and off states as well. With the CSS classes and a tiny piece of Javascript, it can be cross-browser and have tremendous speed for all sizes of websites. A little Javascript and CSS can go a long way if done right.

In a nutshell, by using basic CSS and JavaScript, many different menu types can be created that have many different effects, yet, still giving the user one of the fastest menu system ever created, especially for very large websites. This, used in conjunction with templates allows the user to make a single change and have the entire website reflect that change. And when used in conjunction with nested templates also allows the user to make a single change to update a targeted part of the website instead of the entire website; thus, you get both: the ability to change the entire website, or change a target part of the website as desired.

The only drawback is the complexity of the code which is mostly solved by the Menu Hot Sauce Helper that essentially writes the changes to the HTML code for you.

Note: the correct Javascript is automatically copied to the website and linked to templates so you really don't have to even do a thing for that part.

All the user is to do is set the colors, font, font-size for each menu type as desired in the CSS stylesheet that is used for the type of menu he or she chooses.
terms of use | privacy policy
copyright © 2003 - decloak, inc. all rights reserved