Hi,

Is there a way to style the Main Menu items so that onmouseover the font and the background stay the same and just the color of the text changes. It seems that the submenu items and the hover state for the main menu items are the same and I can not figure out how to separate the two. I dont mind the submenu items exactly as they are on the DNN Blue for instance, but I would like to have control over the hover state of the links in my main menu.

Thanks for any help with this,
TC

Okay, that makes sense, but please help me by walking me through this.

Here is the site: www.unitychristian.ca/dnn

Here are my styles for the menu section:

/*
===========================
SOLPARTMENU SPECIFIC STYLES
===========================
*/

.MainMenu_MenuContainer {
 background-color: transparent;
}
.MainMenu_MenuBar {
 cursor: pointer;
 height:16px;
 background-color: Transparent;
}
.MainMenu_MenuBreak {
 height: 1px;
}
.MainMenu_MenuItemSel {
 background-color: #8da4d3;
 cursor: pointer;
 color: black;
 font-family: Tahoma, Arial, Helvetica;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
 height: 21px;
}
.MainMenu_MenuItem {
 border-left: #cad5ea 0px solid;
 border-bottom: #cad5ea 1px solid;
 border-top: #cad5ea 1px solid;
 border-right: #cad5ea 0px solid;
 cursor: pointer;
 color: #000000;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
 background-color: Transparent;
 font-family: Tahoma, Arial, Helvetica;
}
.MainMenu_MenuIcon {
 background-color: #cad5ea;
 border-left: #cad5ea 1px solid;
 border-bottom: #cad5ea 1px solid;
 border-top: #cad5ea 1px solid;
 cursor: pointer;
 text-align: center;
 width: 15px;
 height: 21px;
}
.MainMenu_SubMenu {
 background-color: #cad5ea; 
 z-index: 1000;
 cursor: pointer;
 filter:progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
}
.MainMenu_MenuArrow {
 display:none;
}
.MainMenu_RootMenuArrow
{
    display: none;
}

If you look at the page, and mouse over the links you will notice that a blue background happens on mouse over. Also, you will see that I cannot get rid of those little arrow icons beside the active page, despite setting the display:none for both the menuarrow and rootmenuarrow. I want to keep the style for the administrative submenus, but simply have the text for the links turn red.

Another issue: I can't seem to get the separator between the menu items to be transparent, so that the BG is the same as the image I have repeated in the background of the navbar. My code in the XML file is:

  <Token>[SOLPARTMENU]</Token>
  <Settings>
   <Setting>
    <Name>separator</Name>
    <Value><![CDATA[&nbsp;&nbsp;&nbsp;]]></Value>
   </Setting>

Why oh why is there a white space there? Other than these issues, my skin is ready (I think).

TC

Hi Sam

About the moving the links over - yes, agree completely. In the mock ups, they have some padding on the right. Some of the formatting is still wonky in the skin, though. Will fix that.

Yes, I do specify the seperate CSS to true in the XML file.

No, I had not looked at the outputted source, except in admin mode. Why this did not occur to me... I dont know.

This is great feedback. Short of a walk-through, I was simply hoping to have someone give me a lead that I can follow and you provided that for me. I will post the methods and results of my modifications to the skin files to this thread as soon as they are online so that others can learn from it as well.

BTW: thanks for the compliment on the design

TC