Hello !
I've worked with solpartmenu for making my latest skin (
www.takethewave.net ) For info i've also used the
SIFR 2.0 for .ModuleTitle classe.
I will post the code, maybe it can help someone. The ascx code contains all most usefull classes of the solpartmenu. The css is commented.
I'm french, so, please don't take care about frenglies.
Note than i use this for all new skin i'm working because it does not contains stranges bugs like the border bug.
Remark : The Solpartmenu need a "Arrow Selected" for changing the arrow when the mouse is over.
------------------------------
Skin.ascx > SolpartMenu Control
------------------------------<
dnn:MENU runat="server" id="dnnMENU"
menucontainercssclass="MainMenu_MenuContainer"
menubarcssclass="MainMenu_MenuBar"
menuiconcssclass="MainMenu_MenuIcon"
menubreakcssclass="MainMenu_MenuBreak"
menuarrowcssclass="MainMenu_MenuArrow"
menurootarrowcssclass="MainMenu_RootMenuArrow"
menuitemcssclass="MainMenu_Item"
rootmenuitembreadcrumbcssclass="MainMenu_Out"
rootmenuitemcssclass="MainMenu_Out"
rootmenuitemactivecssclass="MainMenu_Active"
rootmenuitemselectedcssclass="MainMenu_Over"
usearrows="False"
useskinpatharrowimages="True"
rightarrow="image.gif"
downarrow="image.gif"
userootbreadcrumbarrow="False"
rootbreadcrumbarrow="images/rootbread.gif"
level="Root"
rootonly="False"
Display="vertical"
menualignment="right"
delaysubmenuload="true"
separatorcssclass="MainMenuSeperator"
BackColor=""
IconBackgroundColor=""
highlightcolor="#FF8080"
SelectedForeColor="White"
SelectedColor="#CCCCCC"
FontStyle="font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: bold; font-style: normal;"
menueffectsmenutransition=""
submenucssclass="SubMenu_Item"
submenuitemselectedcssclass="SubMenu_Over"
usesubmenubreadcrumbarrow="True"
submenubreadcrumbarrow=""
submenuitembreadcrumbcssclass=""
submenuitemactivecssclass=""
rootmenuitemlefthtml=""
rootmenuitemrighthtml="| "
leftseparatoractive=""
rightseparatoractive=""
leftseparatorbreadcrumb=""
rightseparatorbreadcrumb=""
submenuitemlefthtml=""
submenuitemrighthtml=""
/>------------------------------
CSS Classes associated with
------------------------------#Menu1Cell { padding: 15px 15px 0 0; vertical-align: top; text-align:right; color: #6f7487;} /* The TD which contain the SolpartMenu control. It's better to use the padding here instead of in the MainMenu_MenuContainer classe */
/* Styles Solpart Menu */
/*---------------------*/
/* NOTE --> the remarkable classes are
For level 1 :
MainMenu_Item (for the buttons not in use, loaded at page load)
MainMenu_Out (for the buttons not in use, but used when the mouse have pointed them)
MainMenu_Over (for the buttons in mode "selected" when the mouse is over)
MainMenu_Active (for the button of the actually visited page)
For SubMenu level :
SubMenu_Item (for the buttons not in use, loaded at page load)
SubMenu_Over (for the buttons in mode "selected" when the mouse is over)
ModuleTitle_ prefix is used by the classes os the SolpartMenu for Modules.
*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
.MainMenu_MenuContainer {
padding-left: 0;
float:right; /* Force FireFox alignement */
}
.MainMenu_MenuBar, .ModuleTitle_MenuBar {
cursor: pointer; /* The cursor is a Hand, but cursor:hand defined in default.css is not right */
padding: 0; /* Padding:0 and Margin:0 are used for fix some IE troubles */
margin: 0;
}
.MainMenu_Item, .ModuleTitle_MenuItem {
color: #6f7487;
background: #fbfcfa;
font-weight: bold;
font-family: tahoma,arial,verdana,helvetica,sans-serif;
Font-size: 12px;
border: 0;
margin: 0;
padding: 0px 3px 0px 3px;
height: 20px;
}
.MainMenu_Out {
color: #6f7487;
background: url(images/1x1.gif) no-repeat;
padding: 0;
height: 21px;
font-weight: bold;
font-family: tahoma,arial,verdana,helvetica,sans-serif;
Font-size: 12px;
}
.MainMenu_Over {
color: #6f7487;
background: url(images/1x1.gif) no-repeat top right;
padding: 0;
text-align: left;
height: 21px;
font-weight: bold;
font-family: tahoma,arial,verdana,helvetica,sans-serif;
Font-size: 12px;
}
.MainMenu_Active,
.MainMenu_BreadcrumbActive {
color: #1e2d3b;
background: url(images/1x1.gif) no-repeat top right;
padding: 0;
height: 21px;
font-weight: bold;
font-family: tahoma,arial,verdana,helvetica,sans-serif;
Font-size: 12px;
}
.SubMenu_Item, .ModuleTitle_SubMenu {
z-index: 1000; /* With this, the submenu will be at the first plan, ever. 1000 is the most value */
cursor: pointer;
background: url(images/3x3+1.gif) repeat top left; /* I use the 3x3+1.gif (a grey pixel) because the PNGFix don't really work with IE and Firefox as weel */
margin: 0;
padding: 10px 10px 10px 10px; /* Padding : Top Right Bottom Left in pixel, points (pt), or % of the master element */
border: 1px solid #333333; /* Here is your problem. This classe will be herited by all; so, just define a border here (or not) and it will be herited */
font-family: tahoma,arial,verdana,helvetica,sans-serif;
Font-size: 12px;
}
.SubMenu_Over, .ModuleTitle_MenuItemSel {
font-weight: bold;
cursor: pointer;
color: #fbfcfa;
background: #df1a22;
padding: 0px 3px 0px 3px;
height: 20px;
border: 0;
font-family: tahoma,arial,verdana,helvetica,sans-serif;
Font-size: 12px;
}
.MainMenu_MenuArrow, .MainMenu_RootMenuArrow, .MainMenu_MenuIcon, .ModuleTitle_MenuBreak,
.MainMenuSeperator, .MainMenu_MenuBreak, .ModuleTitle_MenuArrow, .ModuleTitle_RootMenuArrow, .ModuleTitle_MenuIcon {
display: none; }
Pleased to help
Sébastien - Aricie