In this section of the tutorial you will actually create the new skin that creates rounded-corner rootmenu, and some other changes.

You can also define cells layout using menu items (not only menu groups) class selectors, as follows: '.[SKINNAME]_rootitemhover .leftcell', '.[SKINNAME]_subitemexpanded .rightcell', etc. You can even define different styles for the first and the last menu items in group with the help of '.first' and '.last' classes.

Ex.: '.[SKINNAME]_submenu td.first .leftcell' - the left cell of first subitem in normal state.
Ex.: '.[SKINNAME]_submenu td.[SKINNAME]_subitemhover-first .rightcell' - the right cell of first subitem in hover state.
Ex.: '.[SKINNAME]_submenu td.[SKINNAME]_subitemhover-last .textcell' - the text cell of last subitem in hover state.

• Duplicate the 'firstskin' folder in the 'componentus/menu/skins/' folder in your application root (from first tutorial). Rename the duplicate with the same name as the desired skin, for ex. ThirdSkin.
• Open the skin.css file from 'ThirdSkin' folder, then find and replace 'firstskin_' hits with 'thirdskin_'. Save your results.
• Replace the original 'rootItemBg.png' image from 'thirdskin/images/' folder with this one: download
• Replace the original 'rootItemHoverBg.png' image from 'thirdskin/images/' folder with this one: download
• Save image as 'rootItemFirstLCBg.png' into your 'thirdskin/images/' folder. download
• Save image as 'rootItemFirstLCHoverBg.png' into your 'thirdskin/images/' folder. download
• Save image as 'rootItemLastRCBg.png' into your 'thirdskin/images/' folder. download
• Save image as 'rootItemLastRCHoverBg.png' into your 'thirdskin/images/' folder. download
• Modify '.thirdskin_rootmenu' CSS class:
  • Remove all style definitions
• Modify '.thirdskin_rootitem' CSS class:
  • Change height: 21px;

Add following classes:

/* remove default background image from the
 first root item, we are going to use individual images for each cell in an item */
.thirdskin_rootmenu td.first {
	background-image: none;
}
/* set the background image for the left cell of first root item */
.thirdskin_rootmenu td.first .leftcell {
	background-image: url(images/rootItemFirstLCBg.png);
	background-repeat: no-repeat;
	background-position: left;
	width:10px;
}

/* set the hover background image for the left cell of first root
    item */
.thirdskin_rootmenu td.thirdskin_rootitemhover-first .leftcell {
	background-image: url(images/rootItemFirstLCHoverBg.png);
	background-repeat: no-repeat;
	background-position: left;
}

/* set the left padding for the text cell of first root item to center
    text the default cell size is 16px (.thirdskin_cell) and our left cell of first
    root item is 10px */
.thirdskin_rootmenu td.first .textcell {
	padding-left: 6px;
}
/* set the left padding for the text cell of last root item to center
    text the default cell size is 16px (.thirdskin_cell) and our rightcell cell of last
    root item is 10px */

.thirdskin_rootmenu td.last .textcell {
	padding-right: 6px;
}
/* remove default background image and right border from the last
    root item we are going to use individual images for each cell in an item */
.thirdskin_rootmenu td.last {
	background-image: none;
	border:0px;
}

/* set the background image for the right cell of the last root item
    */
.thirdskin_rootmenu td.last .rightcell {
	background-image: url(images/rootItemLastRCBg.png);
	background-repeat: no-repeat;
	background-position: left;
	width:10px;
}

/* set the hover background image for the right cell of the last root
    item */
.thirdskin_rootmenu td.thirdskin_rootitemhover-last .rightcell {
	background-image: url(images/rootItemLastRCHoverBg.png);
	background-repeat: no-repeat;
	background-position: left;
}

/* set the background image for 'not-rounded' cells of the first and
    last root items */
.thirdskin_rootmenu td.first .textcell,
.thirdskin_rootmenu td.first .rightcell,
.thirdskin_rootmenu td.last .textcell,
.thirdskin_rootmenu td.last .leftcell  {
	background-image: url(images/rootItemBg.png);
}

/* set the hover background image for 'not-rounded' cells of the first
    and last root items */
.thirdskin_rootmenu td.thirdskin_rootitemhover-first .textcell,
.thirdskin_rootmenu td.thirdskin_rootitemhover-first .rightcell,
.thirdskin_rootmenu td.thirdskin_rootitemhover-last .textcell,
.thirdskin_rootmenu td.thirdskin_rootitemhover-last .leftcell {
	background-image: url(images/rootItemHoverBg.png);
}