Top Navigation Bar
The top navagation bar sits just below the Quick Search on every CalmView page. It is meant to quickly take the user to some of the most important parts of CalmView like the Advanced Search, Image Gallery, or main page. It usually looks like this:
If CalmView can't find or read the file, it assumes the default layout and creates the standard Home, Advanced Search, ImageGallery and Showcase buttons shown above. You are not limited to the buttons supplied with CalmView, however. It is possible to change what each button does and how many buttons there are by editing the TopNav.sitemap file, which is located in the \CalmView folder (usually found in \inetpub\wwwroot\CalmView wherever you have installed CalmView). For example, you could remove the link to the Image Gallery if your organisation does not use it, or add a link to your organisation's e-commerce site. An example TopNav.sitemap file which has replaced the Showcase button with a Google search button looks like:
<?xml version="1.0" encoding="utf-8"?>
<siteMap enableLocalization="true" xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<siteMapNode url="default.aspx" title="$resources:MenuBarResource,Home" description="$resources:MenuBarResource,Home" id="HomeBtn"> </siteMapNode>
<siteMapNode url="advanced.aspx" title="$resources:AdvancedSearch.sitemap,sitemap_title" description="$resources:AdvancedSearch.sitemap,sitemap_description" id="SearchBtn">
<siteMapChildNode url="advanced.aspx?src=CalmView.Catalog" title="$resources:AdvancedSearch.sitemap,n1_title" description="$resources:AdvancedSearch.sitemap,n1_description" id="CatalogBtn" />
<siteMapChildNode url="advanced.aspx?src=CalmView.Persons" title="$resources:AdvancedSearch.sitemap,n2_title" description="$resources:AdvancedSearch.sitemap,n2_description" id="PersonsBtn" />
<siteMapChildNode url="advanced.aspx?src=CalmView.Places" title="$resources:AdvancedSearch.sitemap,n3_title" description="$resources:AdvancedSearch.sitemap,n3_description" id="PlacesBtn" /> </siteMapNode>
<siteMapNode url="imagegallery.aspx" title="$resources:MenuBarResource,ImageGallery" description="$resources:MenuBarResource,ImageGallery" id="ImageGalleryBtn"> </siteMapNode>
<siteMapNode url="http://www.google.com" title="Google" description="Search on Google" id="GoogleBtn"> </siteMapNode>
</siteMap>
This will produce a top toolbar that looks like:
Buttons
Each button is listed in the TopNav.sitemap file in the following format:<siteMapNode url="Web Address You are Linking to" title="What It Will Say on the Button" description="Not Currently Used" id="Behind-the-Scenes Identifier for the Button> </siteMapNode>
- url: This is the address that clicking the button will take the user to. This can be either within your CalmView site or elsewhere on the internet. If you are linking to a page within your CalmView site, enter the filename for that page within the \CalmView folder (for example, the Advanced Search page sits within the \CalmView folder and not in a subfolder within that folder, so to link to Advanced Search you just need to enter advanced.aspx). If you are linking to a site elsewhere on the internet, this must be the full address, beginning with 'http://' (if it is a web page).
- title: This is the text that will appear on the button. If you make the title too long, the button will grow taller to fit all of the text.
- description: This is not currently in use in CalmView.
- id: This is an identifier for the button. The identifier should be a small amount of text (like 'GoogleBtn', above) that helps to identify the button. It must be present and you must also have a line that refers to it in the MenuBar.css file (which is kept in \CalmView\App_Themes\Default, \CalmView\App_Themes\Showcase, or \CalmView\App_Themes\Customer, depending on the theme you are using). If you are adding a new button, you must add the following to MenuBar.css (replacing Button ID with the id for the button, like 'GoogleBtn', above):
ul.headerlinkslist li#Button ID.NavButton
{
Drop-Down Menus
It is possible to create drop-down menus like the one below Advanced Search, above. The process for this is the same as creating a new button except instead of the button's code beginning with 'siteMapNode', it begins with 'siteMapChildNode'. A child button is listed in TopNav.sitemap immediately below the button that it drops down from. If you are adding a drop-down button to another button, there should only be one </siteMapNode> tag and it should come after the last button that drops down from button on the top navigation bar. For example, the following code<siteMapNode url="http://www.google.com" title="Google" description="Search on Google" id="GoogleBtn">
<siteMapChildNode url="http://www.bing.com" title="Bing" description="Search on Bing" id="BingBtn"> </siteMapNode>
adds a Bing button that drops down from the Google button. It would look like:
Button Organisation
Buttons appear in the order they are listed in the TopNav.sitemap file, so it is possible to re-order the existing buttons even if you choose to keep all of them.You can have any number of buttons on the top navigation bar. By default, buttons are allocated 25% of the screen, so it is easiest to use four buttons (or multiples of four like eight or twelve). If you are not using a multiple of four, you need to amend the width of buttons in the MenuBar.css file to make sure each takes up the correct amount of space. Menubar.css is kept in \CalmView\App_Themes\Default, \CalmView\App_Themes\Showcase, or \CalmView\App_Themes\Customer, depending on the theme you are using. In MenuBar.css, there are width options under both ul.headerlinkslist li.NavButton and ul.headerlinkslist li.NavButtonDropDown. By default these look like:
width: 25% /* fallback for non-calc() browsers */width: calc(100% / 4);
You will need to change both of these. The first must be the percentage of screen width each button will take up, and the second must be 100%/ the number of buttons there will be on each line. If you wanted three buttons per line, for example, this should read:
width: 33% /* fallback for non-calc() browsers */width: calc(100% / 3);
Please note: if you are upgrading to CalmView 3.0 from an older version of CalmView, you will have an older MenuBar.css file that does not take into account the new way buttons are structured. If you did not apply branding to the buttons in the old version of CalmView (for example by changing the colour of the buttons or removing images on them), all that is needed is to copy MenuBar.css from the \CalmView\App_Themes\Default folder into the \CalmView\App_Themes\Customer folder. If you did apply branding to the buttons in the old verison, this will need to be recreated. Contact the service desk for more advice on this.