In this section of the tutorial you will actually create the new skin.
To start creating the skin, follow the next steps:
- Duplicate the 'default' folder in the 'componentus/menu/skins/' folder in your application
root. Rename the duplicate with the same name as the desired skin, for ex. FirstSkin.
- Open the skin.css file from 'FirstSkin' folder, then find and replace 'default_'
hits with 'firstskin_'. Save your results.
- Replace the original 'rootItemBg.png' image inside your 'firstskin/images/' folder
with this one:
download
- Replace the original 'rootItemHoverBg.png' image inside your 'firstskin/images/'
folder with this one:
download
- Modify '.firstskin_rootmenu' CSS class:
- Remove background style definition
- Modify '.firstskin_rootitem' CSS class:
- Set background-image: url(images/rootItemBg.png);
- Set border-right: 1px solid #c3c3c3;
- Set height: 19px;
- Set font-weight: bold;
- Modify '.firstskin_subitem' CSS class:
- Set border style to border-bottom: 1px solid #c3c3c3;
- Set height: 19px;
- Set font-weight: bold;
- Set background: #f3f3f3 url(images/rootItemBg.png);
- Modify '.firstskin_subitemhover, .firstskin_subitemexpanded' CSS classes:
- Remove border style definition