GotoMy.Com's Styling Tutorial - Step 4 My Navbar
Step 2:
Backgrounds
Page
Body / Main
Top Toolbar
Main Navbar
My Navbar
Widgets
Widgets Title bar
Step 3:
Widgets
Background
Additional Styling
Title
Bar
Placement
Optional Styling
Step 4:
My navbar
Background setting
Moving Inner menu
Menu Classes Info
Step 5:
Advanced option
Hiding title bar
Adding site images to title bar
Hiding widgets
Moving widgets
If you
have gone over the widget section you will know how to edit the main
class.
Sample:
.RadDock_menu { margin:0 0 0 0; color:#000; font-family:'ms
sans serif',sans-serif; text-align:left;}
/* inner content start */
.RadDock_menu .rdContent{ background-color:white; overflow:visible;
top:0px; /*brd*/ padding-bottom:0px; /*brd*/ font:11px/1.2 verdana,
sans-serif;}
Inner classes: More details coming soon. Go
ahead and edit the styling, I am sure you can figure out what edits
what.
.RadMenu_menu { background:gray; filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
}
.RadMenu_menu_Context { background:none; }
.RadMenu_menu .link { text-decoration:none; color: white; line-height:
20px; }
.RadMenu_menu .link .text { padding-right: 20px; cursor:pointer; }
.RadMenu_menu .link:hover,
.RadMenu_menu .focused,
.RadMenu_menu .expanded
{ background:black; border-bottom:none; border-top:none; color: white; }
.RadMenu_menu .link:hover .text,
.RadMenu_menu .focused .text,
.RadMenu_menu .expanded .text
{ border-top: 1px solid #1B2B84; }
.RadMenu_menu .rootGroup .disabled:hover { border-bottom:none; border-top:none;
}
.RadMenu_menu .rootGroup .disabled:hover .text { border-top: 1px solid
#a7cfe8; }
.RadMenu_menu .text { padding: 0px 15px; font-size: 11px; }
.RadMenu_menu .group { background: #15572A; border: 0px; }
.RadMenu_menu .group .link { background: #15572A; border: solid 1px
#bfcde3; border-top-color: #15572A; text-align: left; padding-right:
0px; }
.RadMenu_menu .group .text { padding-left:6px; padding-right: 40px; }
.RadMenu_menu .group .link:hover,
.RadMenu_menu .group .focused,
.RadMenu_menu .group .expanded
{ background: #759580; border-bottom: 1px solid #15572A; border-top: 1px
solid white; font-weight: normal; }
.RadMenu_menu .group .link:hover .text,
.RadMenu_menu .group .focused .text,
.RadMenu_menu .group .expanded .text
{ border-top: 0; }
.RadMenu_menu .leftArrow,
.RadMenu_menu .rightArrow,
.RadMenu_menu .topArrow,
.RadMenu_menu .bottomArrow,
.RadMenu_menu .leftArrowDisabled,
.RadMenu_menu .rightArrowDisabled,
.RadMenu_menu .topArrowDisabled,
.RadMenu_menu .bottomArrowDisabled
{ border-left: 1px solid #bfcde3; border-right: 1px solid #bfcde3;
background: #a7cfe8 url('/_static/themes/perkasie/menu/img/left.gif')
center center no-repeat; width:15px; }
.RadMenu_menu .topArrow,
.RadMenu_menu .topArrowDisabled
{ background-image:url('/_static/themes/perkasie/menu/img/top.gif');
width: 100%; }
.RadMenu_menu .bottomArrow,
.RadMenu_menu .bottomArrowDisabled
{ background-image:url('/_static/themes/perkasie/menu/img/bottom.gif');
width: 100%;}
.RadMenu_menu .rightArrow,
.RadMenu_menu .leftArrow
{ height:100%; }
.RadMenu_menu .rightArrow,
.RadMenu_menu .rightArrowDisabled
{ background-image:url('/_static/themes/perkasie/menu/img/right.gif'); }
.RadMenu_menu .vertical .separator .text { background: #d4e5eb;
font-size:1px; padding-top: 2px; border-left: solid 1px #bfcde3;
border-right: solid 1px #bfcde3; }
.RadMenu_menu .expandLeft,
.RadMenu_menu .expandRight
{ background:transparent url(/_static/themes/perkasie/menu/img/groupImage.gif)
right center no-repeat; margin: 0px; }
.RadMenu_menu_rtl .group .link:hover .expandLeft,
.RadMenu_menu_rtl .group .link:hover .expandRight
{ background:transparent url(/_static/themes/perkasie/menu/img/left.gif)
left center no-repeat; margin: 0px 1px; padding-left: 8px;}
.RadMenu_menu_rtl .expandLeft,
.RadMenu_menu_rtl .expandRight
{ background:transparent url(/_static/themes/perkasie/menu/img/groupImageRTL.gif)
left center no-repeat; }
.RadMenu_menu .link:hover .expandLeft,
.RadMenu_menu .link:hover .expandRight,
.RadMenu_menu .focused .expandLeft,
.RadMenu_menu .focused .expandRight,
.RadMenu_menu .expanded .expandLeft,
.RadMenu_menu .expanded .expandRight
{ background:transparent url(/_static/themes/perkasie/menu/img/invertedGroupImage.gif)
right center no-repeat; }