AquaLogic User Interaction Development Guide

     Previous Next  Open TOC in new window   View as PDF - New Window  Get Adobe Reader - New Window
Content starts here

ALI 6.5 Adaptive Styles Navigation Elements

These elements control style and layout for navigation elements, including the menus and breadcrumbs. This is not a complete list; for all available elements, see the mainstyle.css file.

Note: Parameters marked “!important;” are related to drop-down lists within navigation elements. These paramaters can be customized, but must not be removed; eliminating them will cause the drop-downs either to not work or to distort.
Element Navigation Component Example
#ali-mainNav The main navigation section of the portal page.
#ali-mainNav {
	clear:left;
	float:left;
	width:100%;
	height:30px;
	background-color:#3068CF;
	background-image:url(../img/main_nav_tab.gif);
	background-repeat:repeat-x;
	border-bottom:solid 1px #5083CB;
	letter-spacing: 1px;
	min-width:980px;
}
#ali-nav All lists within navigation sections in the portal page.
#ali-nav, #ali-nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}
a.ali-navmenu The portal navigation menu.
a.ali-navmenu {
	color:#385ABD !important;
	width:170px !important;
	background-color:#F1F5F9 !important;
	border-bottom:solid 1px #146BC5;
	font-size:1.15em;
}
a.ali-nav-actions A separate style for items in the portal navigation menu that are actions, as opposed to links to pages/sections on the portal. Sets a different background color for these items in the menu to offer a clear distinction between menu navigation links and action links.
a.ali-nav-actions {
	color:#2B49AC !important;
	width:170px !important;
	background-color:#C9D4E9 !important;
	border-bottom:solid 1px #146BC5;
	font-size:1.15em;
}
#ali-secondNavBar The second-level navigation bar is used on the User Profile page and Community Pages. A second bar appears below the main navigation bar in a different color and is mainly used to list pages within a community.
#ali-secondNavBar {
	clear:both;
    float:left;
    width:100%;
    padding:0;
    margin:0 0 -21px 0;
    background-image:url(../img/nav_2nd_pages.gif);
    background-repeat:repeat-x;
    letter-spacing:0;
    font:bold .725em Helvetica;
    min-width:980px;
}
#ali-secondPages The list of secondary pages in a community or other sections of the portal that use a second level of navigation.
#ali-secondPages {
	float:left;
    color:#51617a;
    background-color:none;
    width:80%;
}
#ali-secondSub The drop-down menu for pages within a community (“sub-communities”).
#ali-secondSub {
	float:right;
    padding:0;
    margin:0;
    background-image:url(../img/nav_2nd_sub.gif);
    background-repeat:repeat-x;
    border-bottom:solid 1px #82A8F3;
    border-left:solid 1px #82A8F3;
}
#ali-secondNav The list of links in the sub-community drop-down menu.
#ali-secondNav, #ali-secondNav ul { 
	padding: 0;
	margin: 0; 
	list-style: none;
}
a.ali-secondMenu The link color and background color for the sub-community drop-down menu.
a.ali-secondMenu {
	color:#4467CB;
	font:bold 8pt Arial, Helvetica, sans-serif;
	width:161px;
	background-color:#F1F6FF;
	border-bottom:solid 1px #83A1D8;
}
#ali-community-name The look and placement of the community (or home page) name for the second navigation bar.
#ali-community-name {
    position:relative;
    left:-40px;
    background-image:url(../img/nav_2nd_home.gif);
    background-repeat:repeat-x;
    border-right:solid 1px #82A8F3;
    letter-spacing:1px;
    color:#5374A1;
    padding:8px 12px 6px 12px;
	margin-right:-3px;
}
#ali-breadcrumb The breadcrumb list displayed at the top of the portal page content section.
#ali-breadcrumb {
	float:left;
	margin:4px 0 0 12px;
	padding:0;
	color:#888888;
	padding:0;
	font-family:Helvetica, Arial, sans-serif;
	font-size:.7em;
	letter-spacing:1px;
}

  Back to Top      Previous Next