Styling
==>
The TMS-SiteNav window's Styling tab allows you to pick a pre-existing style, and then modify its characteristics, such as color and font. Most of the Styling tab features also exist on the TMS-Custom-Link-Bars window. See "Shared Styling Controls".
The current style is stored in a css file; by default the file name is "tms-sitenav/master.css".
NOTE: Changes beyond what the Styling tab provide could be done by editing that css file directly in Expression Web. Before doing such direct editing, close the TMS-SiteNav or Custom Link Bars window. Afterwards, save the css file, before clicking on toolbar buttons TMS-SiteNav or Custom.
Viewer
The Viewer shows what a link bar will look like (on the page currently selected on the Site tab), for the current style settings.
Apply/OK/Cancel Buttons
The Apply/OK/Cancel buttons are common to each tab page. Details here.
Shared Styling Controls
The Shared Styling Controls are the same on both the TMS-SiteNav Styling tab and the TMS-Custom-Link-Bars window. Details follow.
Style Templates
This is a list of .css files that are designed to work with TMS-SiteNav's link bars. Clicking one, sets all the style characteristics (font, colors, padding).
You can save your own style templates. Start by clicking one of the existing templates. Make changes via the Styling tab. "Done" to apply and close the TMS-SiteNav or Custom Link Bars window. Then locate the current style file (by default, "tms-sitenav/master.css"). Use Windows Explorer to copy that to C:/Program Files/ToolmakerSteve/TMS-SiteNav/default/yourfilename.css. [name it whatever you like; keep the .css suffix].
Link States
A link or button shows in three different color-combinations.
Normal is the default appearance, when a link first appears. Most of the links on a link bar will be in this state.
Hover is the appearance when the mouse is over the link.
ThisPage is the appearance of a link representing the page we are already on. Clicking such a link will have no effect (since we are already at the link's destination). This in-context identification of the page we are on makes it easier for a visitor to make sense of a web site as they navigate around. For instance, you can click on each link in turn to traverse all the pages of a section. At each point, you see visually where you are in the section. If you also use option Show Bread Crumbs, a visitor can navigate up and down through your site's hierarchy of pages, with a solid sense of where they are at all times.
Menu Orientation
A Horizontal link bar has the links side-by-side across the page.
A Vertical link bar has the links top-to-bottom down the page.
Drop-Down Menu
COMING SOON [DISABLED IN BETA 1]
Bar Style Properties
Bar / padding
# pixels of blank space in background color on all sides surrounding the group of buttons.
Bar / background
This color appears around [bar padding] and between [button spacing] the buttons.
Button Style Properties
Button / padding: (top, right, bottom, left)
# pixels of blank space in background color on each side of the button text.
Button / spacing
# pixels between each button.
Button / border: (width, style, color)
width: # pixels of border color all around the button
style: FUTURE VERSION [DISABLED IN VERSION 1]
color: brings up a color-picker for the border color.
Button / color: (text & background)
These are six color squares, in three pairs. For each of the three link states (normal, hover, this page), bring up a color-picker for (color, background):
text: the text color
background: the color of the blank area behind and around the text.
Button / color: / normal
See Link States / Normal. Controls the text and background colors for the default appearance.
Button / color: / hover
See Link States / Hover. Controls the text and background colors for the appearance while mouse is hovering. (Auto-calculated when "Auto-Color hover + thisPage" is checked.)
Button / color: / thisPage
See Link States / ThisPage. Controls the text and background colors for the link that represents the page we are on. (Auto-calculated when "Auto-Color hover + thisPage" is checked.)
Button / color: / Auto-Color hover + thisPage
When this is checked, the 4 hover & thisPage colors are computed from the 2 normal colors, every time one of the normal colors is changed.
Button / font: (family / size / weight / <body>)
For font selection, <body> is the only unusual control. If your web site has a style sheet that sets font size for the body tag, click this to check it, and then select that font size from the list.