Hi, I am trying to use the ".MainMenu_RootMenuItemActive" css style in a DNN Skin for a client and after inserting it into the CSS file and it didnt work, I looked in several places to find out why. It has been mentioned that you need to set up these extra styles in the skin.xml file. Could you please tell me how this is done?

Thank you in advance!

Hello,

Yes this is correct, have you read this page:
http://www.skinningtoolkit.com/tabi...fault.aspx

and as an example for the skin.xml file:

<Token>[MENU]</Token>
        <Settings>
            <Setting>
                <Name>seperatecss</Name>
                <Value>True</Value>
            </Setting>
            <Setting>
                <Name>rootmenuitembreadcrumbcssclass</Name>
                <Value>MainMenu_RootMenuItemBreadcrumb</Value>
            </Setting>
<Setting>
                <Name>submenuitembreadcrumbcssclass</Name>
                <Value>MainMenu_SubMenuItemBreadcrumb</Value>
            </Setting>

etc . . .

Hope this helps, thanks,

Hey, thank you soooo much for getting back so quickly. Unfortunatly it is still not working. Below is the MENU section of my skin.xml file and the MainMenu_RootMenuItemActive section of my skin.css file:

skin.xml 

<Object>
  <Token>[MENU]</Token>
  <Settings>
   <Setting>
    <Name>Display</Name>
    <Value>Vertical</Value>
   </Setting>
    <Setting>
     <Name>seperatecss</Name>
     <Value>True</Value>
     </Setting>
      <Setting>
       <Name>rootmenuitemactivecssclass</Name>
       <Value>MainMenu_RootMenuItemActive</Value>
      </Setting>
  </Settings>
 </Object>

skin.css

.MainMenu_RootMenuItemActive
{
    background-color: white;
    height: 12px;
    border-right: #660000 2px inset;
    border-top: #660000 2px inset;
    font-size: 11px;
    border-left: #660000 2px inset;
    color: #660000;
    border-bottom: #660000 2px inset;
    font-style: italic;
    font-family: Verdana;
}

Thanks again for your quick responses, I really appreciate your help!

Hello,

Ok, took a bit of experimentation to find, there are css classes overriding the settings that you are specifying:

1) You need to delete all of the css from the default.css file related to the menu.
2) Then you need to delete   background:transparent;   from the classes:
.MainMenu_MenuBar
and
.MainMenu_MenuItem

3) then add in
.MainMenu_RootMenuItemActive
{
    background-color: Yellow;
    height: 50px;
}

and you will now see a large yellow background behind the current selected item.

If you have the web developers toolbar installed to firefox you can try this out on the live site without editing the actual skin to confirm that it works.

Basically if you are creating a vertical menu I would strip out all of the menu css and start from scratch adding in each element that you require.

Hope this helps, thanks,