Nina's Blog - Customising the Module Dropdown Menu Alignment

Tuesday, April 10, 2007

Customising the Module Dropdown Menu Alignment

Ok so it's only for Administrators but these things are a bit annoying - those funny lines in the dropdown menu in the module actions.

You'll find this by default resides in the Portals\0\_default\default.css file and unless you're completely controlling it, you'll find that by default it will have that rather ordinary looking menu.

I fixed it today on another project (I have a fast 'super build' of DNN) and I thought it was a nice and easy fix. Yes, once again, it's a core change since updating the website will bring back the original file.

If you don't want to do this at 'host' level - eg.. affecting every single portal you install on that build, you can just add to your skin.css file for the same results, but only on a 'per skin' option.

This code listed here makes it just that little more attractive -

/* Module Title Menu */
.ModuleTitle_MenuContainer {
    border-bottom: #fefefe 0px solid;
    border-left: #fefefe 0px solid;
    border-top: #fefefe 0px solid;
    border-right: #fefefe 0px solid;
}

.ModuleTitle_MenuBar {
    cursor: pointer;
    cursor: hand;
    height:16px;
    background-color: Transparent;
}

.ModuleTitle_MenuItem {
    cursor: pointer;
    cursor: hand;
    color: #000000;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    border-left: #ffffff 0px solid;
    border-bottom: #ffffff 0px solid;
    border-top: #ffffff 0px solid;
    border-right: #ffffff 0px solid;
    background-color: #ffffff;
}

.ModuleTitle_MenuIcon {
    cursor: pointer;
    cursor: hand;
    background-color: #eeeeee;
    border-left: #ff0000 0px solid;
    border-bottom: #cccccc 1px solid;
    border-top: #cccccc 1px solid;
    text-align: center;
    width: 16px;
    height: 18px;
}

.ModuleTitle_SubMenu {
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
    background-color: #FFFFFF;
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);
    border-bottom: #FFFFFF 0px solid;
    border-left: #ffffff 0px solid;
    border-top: #FFFFFF 0px solid;
    border-right: #FFFFFF 0px solid;
}

.ModuleTitle_MenuBreak {
    border-bottom: #EEEEEE 0px solid;
    border-left: #EEEEEE 0px solid;
    border-top: #EEEEEE 0px solid;
    border-right: #EEEEEE 0px solid;
    background-color: #EEEEEE;
    height: 1px;
}

.ModuleTitle_MenuItemSel {

    cursor: pointer;
    cursor: hand;
    color: black;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    background-color: #cccccc;
    border-top: 0px solid #cccccc;
    height: 18px;
}

.ModuleTitle_MenuArrow {
    font-family: webdings;
    font-size: 10pt;
    cursor: pointer;
    cursor: hand;
    border-right: #FFFFFF 0px solid;
    border-bottom: #404040 0px solid;
    border-top: #FFFFFF 0px solid;
    height: 18px;
    width: 16px;
}

.ModuleTitle_RootMenuArrow {
    font-family: webdings;
    font-size: 10pt;
    cursor: pointer;
    cursor: hand;
    height: 18px;
}

/* Module Title Menu */