In this section of the tutorial you will actually create the new skin that emulates
toolbar, and some other changes.
To create more powerful skins you have to learn more about menu item structure.
It consists of left cell, text cell, shortcut cell (it's not visible by default),
and right cell. Each of them has multiple classes set.
Left cell classes set: .[SKINNAME]_cell leftcell;
Right cell classes set: .[SKINNAME]_cell rightcell;
.[SKINNAME]_cell class defines the default layout for left and right cells. You
can override these settings by using class selectors, as follows: '.[SKINNAME]_submenu
.[SKINNAME]_cell' and '.[SKINNAME]_rootmenu .[SKINNAME]_cell' . To define settings
for the left cell or right cell individually use '.[SKINNAME]_submenu .leftcell'
or '.[SKINNAME]_submenu .rightcell' accordingly (for root menu group use .[SKINNAME]_rootmenu).
Text cell classes set:
- '.textcell toolbar[indexof root item]' only available for root items. Ex.: .[SKINNAME]_rootmenu
.textcell-toolbar2
- '.textcell' for sub items
Shortcut cell inherits the .textcell class. You can tweak shortcut cell settings
through '.[SKINNAME]_submenu .shortcutcell' or '.[SKINNAME]_rootmenu .shortcutcell'
Create Toolbar-like Skin
- Duplicate the 'firstskin' folder in the 'componentus/menu/skins/' folder in your
application root (from previous tutorial). Rename the duplicate with the same name
as the desired skin, for ex. SecondSkin.
- Open the skin.css file from 'SecondSkin' folder, then find and replace 'firstskin_'
hits with 'secondskin_'. Save your results.
- Save image
as 'rootMenuBg.png' into your 'secondskin/images/' folder. download
- Save image
as '0.png' into your 'secondskin/images/' folder. download
- Save image
as '1.png' into your 'secondskin/images/' folder. download
- Save image
as '2.png' into your 'secondskin/images/' folder. download
- Modify '.secondskin_rootmenu' CSS class:
- Set background-image: url(images/rootMenuBg.png);
- Modify '.secondskin_rootitem' CSS class:
- Set height: 62px;
- Remove border style definition
- Modify '.secondskin_rootitemhover, .secondskin_rootitemexpanded' CSS classes:
- Remove background and border style definitions
- Set background-color: #e9e9e9;
- Set color: #000000;
- Find '.secondskin_rootmenu .textcell, .secondskin_submenu .textcell' classes
and split them up into two different classes, then modify '.secondskin_rootmenu
.textcell' class as follows:
- Set vertical-align: bottom;
- Set text-align: center;
- Set background-repeat: no-repeat;
- Set background-position: center center;
- Create '.secondskin_rootmenu .textcell-toolbar0', '.secondskin_rootmenu .textcell-toolbar1'
and '.secondskin_rootmenu .textcell-toolbar2' classes and modify them, as follows:
- Set background-image: url(images/0.png); in '.secondskin_rootmenu .textcell-toolbar0'
class
- Set background-image: url(images/1.png); in '.secondskin_rootmenu .textcell-toolbar1'
class
- Set background-image: url(images/2.png); in '.secondskin_rootmenu .textcell-toolbar2'
class