2.2

PrintShop Web Skinning Guide | 28
Creating a Tabbed menu
Below is a sample of the Menu bar where the menu items have a tabbed style. To achieve this a
repeating background image is added to the <li> tag. Space is added between the items by adding a
right margin. To complete the design border attributes are set for top, left and right sides of the <li> tag.
The Menu bar with repeated background image
#menu li {
display: inline;
border-width: 1px 1px 0 1px;
border-color: #666666;
border-style: solid;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
line-height: 2em;
margin-right: 3px;
margin-left: 0;
background-image: url("images/btn-bg.gif");
background-repeat: x;
}
Styling the selected menu item
PSW will add an additional class to the selected menu item. This allows the style for the selected menu
item to change to make it stand out. The color, font-weight, background color or background image can
be used to create various effects.
#menu .selected a {
color: black;
}
The following code snippet shows how both the font color and background color of the selected item
can be changed.
#menu .selected a {
color: black;
background-color: <? generateSkinContrastColorHighLight(1.1); ?>;
}