OK, after having gotten rid of most of the unwanted menu decorations, it's finally time to apply some styles that we do want. First off, the container for the submenus. So far it's been white, which is a bit - meh - on a white background. We've already styled the container for the root menu through the CSSContainerRoot property of the solpart menu, now we're going to do the same for the sub-menus by using CSSContainerSub. Here's the style:

.SubMenuContainer
{
    background-color: Blue;
}

...and here's the solpartmenu tag:

<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU" CSSContainerRoot="MenuContainer"
    UseArrows="false" UseRootBreadCrumbArrow="false" CSSIcon="MenuIcon" CSSIndicateChildRoot="MenuArrow"
    CSSIndicateChildSub="MenuArrow" CSSContainerSub="SubMenuContainer" />

Looking at the result, you'll see that there are still a few things that need to be changed. for instance, the white lines around the menu items, and the annoying twitch that you see when you move from one menu to the other. But at least the container for the sub-menus is blue now. Aren't you glad?

And on to the menu items. Here's the style I'm going to use for starters:

.Node
{
    cursor: pointer;
    color: green;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 9pt;
    font-weight: normal;
    font-style: normal;
    background-color: Aqua;
}

I'm going to apply this to all node properties of the solpart menu for now: CSSNode, CSSNodeHover, CSSNodeHoverRoot, CSSNodeHoverSub, CSSNodeRoot, CSSNodeSelectedRoot and CSSNodeSelectedSub. Phew. Here's the code:

<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU" CSSContainerRoot="MenuContainer"
    UseArrows="false" UseRootBreadCrumbArrow="false" CSSIcon="MenuIcon" CSSIndicateChildRoot="MenuArrow"
    CSSIndicateChildSub="MenuArrow" CSSContainerSub="SubMenuContainer" CSSNode="Node"
    CSSNodeHover="Node" CSSNodeHoverRoot="Node" CSSNodeHoverSub="Node" CSSNodeRoot="Node"
    CSSNodeSelectedRoot="Node" CSSNodeSelectedSub="Node" />

...and here's the result:

No more highlight and no more twitching. Also, no more blue submenu container, and there are still remnants of the main menu container showing red round the root menu items. Less than ideal, so when finalising the skin you'll have to decide, which backgrounds to keep coloured and which ones to set to be transparent. But before we do that, one more addition to our style sheet (no need to change the code file)

.Node td
{
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 2px;
    padding-left: 2px;
    border: solid 1px black;
}

This adds a bit of space, as well as a border around the text of each menu item. Not pretty, but useful to have as a starting point.

And now I've got the skin I usually start out with. At this point everything's set up to have things added or modified as needed. The rest of this series of articles will deal with modifying this starter skin for different wishes.

If you want to download this skin, please feel free to do so. Just install it as you would normally.

Download the Creative Cats skin template

Oh, and one more thing: I'm not a professional skin designer. What I've written here is the result of trial and error from the occasions where I had to deal with skin development. There may well be tricks of which I'm unaware, so please enlighten me if you feel like it...