Customizing tab navigation for dashboard spaces

You can customize tabs, displayed at the top of the content area and below the banner, that are used for page navigation.

About this task

Tabs are made up of a number of images, which are combined into a "sprite" to improve performance. A default sprite named Sprite_01.gif is provided and is found in the WebDAV folder at public/themes/bspaceTheme/images. The most efficient way to customize tabs is to modify or create images in the default sprite.

The following diagram shows the image elements in the default sprite, Sprite_01.gif.

The following list describes some of the image elements in the default sprite.

Tabs

Each tab is made up of a left, middle, and right image. These images create the rounded tab look of the currently selected tab. The nonselected tabs still have a left, middle, and right image, but by default they are given a flatter style to deemphasize them. The following rules contain the styling for these three images.

.tabbedNav .tabLeft
.tabbedNav .tabMiddle
.tabbedNav .tabRight

For the tab that is currently selected, the rules are slightly modified to include the tabSelected class name in the middle.

.tabbedNav .tabSelected .tabLeft
.tabbedNav .tabSelected .tabMiddle
.tabbedNav .tabSelected .tabRight

New Page

The morePagesButton is the plus sign icon to the right of the tabs; clicking it adds more pages. It is made up of an image and a hover image. The following styles control the more pages buttons.

.tabbedNav .newPageIcon
.tabbedNav .newPageIcon:hover

combinedTabBarAndEditPageButton

The combinedTabBarAndEditPageButton is the class name of the table that contains all of the tabs, the new page button, and the mode selector. The part of the image that is covered up by the other items shows through.

combinedTabBarAndEditPageButton

Mode Selector

The mode selector is the button that lets the user enter and exit edit mode. It is made up of a number of images that are controlled by the following rules.

.editPageButtonWrapper .editPageButtonLeft
.editPageButtonWrapper .editPageButtonMiddle
.editPageButtonWrapper .editPageButtonArrowBackground 
.editPageButtonWrapper .editPageButtonRight

In view mode the page has an Edit Page button and a downward-pointing arrow, and in edit mode it has a Finish Editing button and an upward-pointing arrow.

editPageButtonWrapper .editPageButtonArrowDown
.editPageButtonWrapper .editPageButtonArrowUp

Procedure

Copy the Sprite_01.gif file to the root directory of your custom style folder, for example, the same folder that contains the customStyle.css file, and then rename it. The steps in these instructions use customTabSprite.gif as the name of the new sprite.
Customize your copy of the sprite.
Update the rules in your copy of the CSS file for your customization. Ensure that every CSS rule begins with the class selector that corresponds to the name of the space style; in this example, the name is customStyle.
Modify the URL value of the CSS background-image tag so that it refers to the customized sprite. For example:
```
.customStyle .tabbedNav .tabLeft {
background-image: url("customTabSprite.gif");
}
```

Example

This example shows how to modify the CSS rules to achieve the customized tabbed navigation as shown in the following illustration. The example uses the modified sprite, CustomTabSprite.gif. The illustration shows the tabbed navigation created by modifying the sprite CustomTabSprite.gif and the rules as described in this example.

The presence of the customStyle class name at the beginning of each rule means that the tab style is limited to the custom style.

.customStyle .tabbedNav .tabLeft {
background-image: url(CustomTabSprite.gif);
background-position: 0px -900px;
float:left;
height:25px;
width:2px;
}

.customStyle .tabbedNav .tabRight {
background-image: url(CustomTabSprite.gif);
background-position: 0px -900px;
float:left;
height:25px;
width:2px;
}

.customStyle .bspaceTheme .combinedTabBarAndEditPageButton {
background-image: url("CustomTabSprite.gif");
background-position: 0 -450px;
height: 25px;
}

.customStyle .editPageButtonWrapper .editPageButtonLeft, 
.customStyle .editPageButtonWrapper .editPageButtonRight,
.customStyle .editPageButtonWrapper .editPageButtonMiddle {
background-image: url("CustomTabSprite.gif");
}

.customStyle .editPageButtonWrapper .editPageButtonLeft {
background-image: url("CustomTabSprite.gif");
background-position: 0 -100px;
background-repeat: no-repeat;
height: 25px;
width: 5px;
}