Step-by-Step

CREATING SKINS FOR R.A.D.TABSTRIP

Quick and Easy Reference to telerik r.ad.controls Skinning

2007 telerik

CONTENTS:
Abstract
Step 1: Preparations
1.1. Choosing the Right Skin to Edit
1.2. Getting the Skin
1.3. Setting the Skin

Step 2: Creating the Normal State of the Tabs

2.1. The Background Images
2.2. Editing the CSS Classes of the Normal Tab
2.2.1. Left
2.2.2. Right
2.2.3. Middle

Step 3: Creating the Selected State of the Tabs

Step 4: Finishing Touches

4.1. Changing the Case of the Tabstrip Buttons
4.2. Setting the Text Bold
4.3. Adding Padding to the Tab Text
4.4. Offsetting the Tabs
4.5. Vertically Centering the Tab Text
4.5.1. The Normal Tab:
4.5.2. The Selected Tab:

Step 5: Going Further

5.1. Overlapping Tabs:
5.2. Styling the Disabled Tabs

Appendix:
5.1. Examples Server Tag
5.2. Examples HTML Output
5.3. r.a.d.tabstrip Classes Visually Explained
5.4. Useful r.a.d.tabstrip Resources
5.5. General CSS Knowledge

ABSTRACT

This tutorial is targetted to web-developers that have intermediate / advanced

knowledge of Cascading Style Sheets css selectors, pseudo-elements, floats, blocklevel and inline elements. We also assume that readers are acquainted with
PhotoShop and XHTML basics.

A Beginners Cascading Style Sheets Reference, explaining CSS basics may be

downloaded from here. Links to various CSS resources are available at the Appendix
section of this document. We also provide Basics of telerik r.a.d.controls CSS
Skinning Reference, containing simple tips and tricks for creating skins for our
WebForms suite.

STEP 1: PREPARATIONS

1.1. CHOOSING THE RIGHT SKIN TO EDIT

Before we start, please, download the PhotoShop file we have used for the
example.

Select a skin from the existing ones that most resembles your design (for
convenience, we will call the target skin TelerikUniversity). Lets have a look at the
skins that we ship along with r.a.d.tabstrip and compare it with our design we
have rounded corners, relatively high tabs and the selected skin is a few pixels
higher than the other tabs, so in order to save time and effort, we should edit the
WebBlue skin:

And will finally get the following result (TelerikUniversity):

TIP: You can create an .aspx page and paste the markup below. For detailed visual explanation of the
html structure, follow this link to the appendix of the tutorial.

<radTS:RadTabStrip id="RadTabStrip1" runat="server"

Skin="TelerikUniversity" width="800" SelectedIndex="0">
<Tabs>
<radTS:Tab Text="Home" SelectedIndex="0"></radTS:Tab>
<radTS:Tab Text="Admissions"></radTS:Tab>
<radTS:Tab Text="Academics" enabled="false"></radTS:Tab>
<radTS:Tab Text="About Us"></radTS:Tab>
<radTS:Tab Text="Forums"></radTS:Tab>
<radTS:Tab Text="Blogs"></radTS:Tab>
<radTS:Tab Text="Sitemap"></radTS:Tab>
</Tabs>
</radTS:RadTabStrip>

1.2. GETTING THE SKIN

Go to ~/RadControls/Tabstrip/Skins/ folder and copy the WebBlue folder, and

rename it to TelerikUniversity. Then open TelerikUniversity/styles.css and replace all
instances of _WebBlue with _TelerikUniversity and save the file:

TIP: To have e clear notion of the CSS classes and the HTML class they are applied to in r.a.d.tabstrip,
please take a look in the appendix section of this tutorial Tabstrip Classes Visually Explained.

1.3. SETTING THE SKIN

In your server declaration change the skin property to TelerikUniversity

<radTS:RadTabStrip id="RadTabStrip1" runat="server"

Skin="TelerikUniversity"></radTS:RadTabStrip>

And then reload the page. The new skin will look exactly the same as WebBlue
skin, but named TelerikUniversity:

STEP 2: CREATING THE NORMAL STATE OF THE TABS

Before we start, please take a look at the DOM-tree of r.a.d.tabstrip. For detailed
html structure, server declaration and css overview, please, follow this link to the
appendix of the tutorial.

To style the top (root) level tabs tabs of r.a.d.tabstrip, we need to edit three css
selectors, each one being a different part of the button:

.RadTabStrip_TelerikUniversity li a represents the left corner;

.RadTabStrip_TelerikUniversity li a .wrap represents the right corner;

.RadTabStrip_TelerikUniversity li a .innerWrap represents the middle part

of the tab containing the text;

2.1. THE BACKGROUND IMAGES

Before editing the css we need to create the proper images, so open the .psd file
with PhotoShop, and using the rulers (Ctrl+R), outline the necessary elements for
the button the left, the middle and the right ones:

TIP: To avoid width issues later, make sure that the left and right images for the normal and selected
tabs have same widths. In the case of the TelerikUniversity it is 7 pixels.

TIP: An easy way to create the two images (TabLeft.gif and TabRight.gif) for the left and the right tab is
to cut the left image only, and then flip it horizontally (Image > Rotate Canvas > Flip Canvas Horizontal):

TabLeft.gif -

TabRight.gif -

- 7 x 33 pixels

- 7 x 33 pixels

Finally, lets create the middle image (TabMiddle.gif). Usually, in the css file, this
selectors background image is set to repeat-x, so in order to make things
lightweight, we cut only one pixel, which will repeat itself horizontally:

TabMiddle.gif -

- 1 x 33 pixels

2.2. EDITING THE CSS CLASSES OF THE NORMAL TAB

2.2.1. LEFT

The padding-left and line-height properties represent the width and the height
of TabLeft.gif image, i.e. firstly we need to change them with the proper values in
order to set the correct width and height of the new image, i.e. padding-left: 7px;
line-height: 33px;. Then we set the proper color of the link color: white; or
color: #fff or color: #ffffff;
6

.RadTabStrip_TelerikUniversity li a
{
padding-left: 7px;
line-height: 33px;
color: white; /* or #fff, #ffffff */
background: transparent url('img/TabLeft.gif') 0px 0px no-repeat;
text-decoration: none;
}

TIP: The other two properties background and text-decoration are usually constant and are not changed
during the process of creating a skin.

TIP: This selector is also the place where we could specify properties for the onmoouseover of the
tabstrip, for example:

.RadTabStrip_TelerikUniversity li a:hover
{
color: orange;
}

2.2.2. RIGHT

Exactly the same is the situation with the right part of the tab button, with the only
difference that here we set padding-right instead of padding-left:
.RadTabStrip_TelerikUniversity li a .wrap
{
padding-right: 7px;
line-height: 33px;
background: transparent url('img/tabRight.gif') right 0px norepeat;
}

2.2.3. MIDDLE

Change the line-height property with the new value 33 pixels:

7

.RadTabStrip_TelerikUniversity li a .innerWrap
{
line-height: 33px;
background: transparent url('img/tabMiddle.gif') 0px 0px repeatx;
text-align: center;
}

and then reload the page. Having skinned the normal state of the tabs, you will
have the following result:

STEP 3: CREATING THE SELECTED STATE OF THE TABS

TIP: For detailed instructions, please, have a look at STEP 2: CREATING THE NORMAL STATE
OF THE TABS

The situation with the selected state of the tab is similar to the normal tab button.
Again we have three classes to which we have to set proper values and images:

TabLeftSelected.gif -

- 7 x 33 pixels;

TabRightSelected.gif -

- 7 x 33 pixels;

TabMiddleSelected.gif -

- 1 x 33 pixels;

Edit the classes in the same way as we did with the Left classes:

.RadTabStrip_TelerikUniversity li a.selected
{
padding-left: 7px;
8

line-height: 33px;
background: transparent url('img/TabLeftSelected.gif') 0px 0px
no-repeat;
}

.RadTabStrip_TelerikUniversity li a.selected .innerWrap

{
background-image: url('img/tabMiddleSelected.gif');
}

.RadTabStrip_TelerikUniversity li a.selected .wrap

{
line-height: 33px;
padding-right: 7px;
color: black; /* or #000, #000000 */
background-image: url('img/tabRightSelected.gif');
}
then reload the page and you will see the following result:

STEP 4: FINISHING TOUCHES

4.1. CHANGING THE CASE OF THE TABSTRIP BUTTONS

By design, the text of the tabstrip buttons is in uppercase. Obviously, this could be
easily achieved simply by typing the text with Caps Lock button pressed, but this
could also be done with css, by using the text-transform property, applied to the
outermost element of r.a.d.tabstrip:

.RadTabStrip_TelerikUniversity
{
font: 11px Arial, Verdana, Sans-serif;
9

text-transform: uppercase;
}

then we have the following result:

4.2. SETTING THE TEXT BOLD

To bold any text within r.a.d.tabstrip, we simply add the bold property to the
.RadTabstrip_TelerikUniversity class:

.RadTabStrip_TelerikUniversity
{
font: bold 11px Arial, Verdana, Sans-serif;
text-transform: uppercase;
}

and we get:

TIP: Adding properties to the wrapping element, i.e. .RadTabstrip_TelerikUniversity will cause any
child element to cascadingly inherit these, so if we need other settings for the child classes, we have to
specify them separately in the relevant classes.

4.3. ADDING PADDING TO THE TAB TEXT

10

By design, we have 30 pixels left and right padding of the tab text. 7 pixels are
already compensated with the left and right padding we have added to the
.RadTabStrip_TelerikUniversity li a and .RadTabStrip_TelerikUniversity
li a .wrap selectors. For the remaining 23 pixels, we add padding to the
.RadTabStrip_TelerikUniversity li a .innerWrap selector:

.RadTabStrip_TelerikUniversity li a .innerWrap
{
line-height: 33px;
background: transparent url('img/tabMiddle.gif') 0px 0px repeatx;
text-align: center;
padding-left: 23px;
padding-right: 23px;
}

then we hit F5 and we see the result:

TIP: In the cases where we have several paddings (top, right, bottom, left) used, we may use the
shorthand property, instead of adding all four properties:

.RadTabStrip_TelerikUniversity li a .innerWrap
{
line-height: 33px;
background: transparent url('img/tabMiddle.gif') 0px 0px repeat-x;
text-align: center;
padding-left: 23px;
padding-right: 23px;
padding: 4px 23px 0 23px; /* top, right, bottom, left */
}

It is important to have in mind the order of the values in these cases it is clockwise, i.e. top, right,
bottom, left.
11

4.4. OFFSETTING THE TABS

As you can see, our design requires tab buttons to be 1 pixel offset from each other.
To achieve this, we have to set proper margin to two selectors:

The outermost class of the normal tab button:

.RadTabStrip_TelerikUniversity li a
{
margin-right: 1px;
padding-left: 7px;
background: transparent url('img/TabLeft.gif') 0px 0px no-repeat;
line-height: 33px;
color: white;
text-decoration: none;
}

and the outermost class of the selected tab button:

.RadTabStrip_TelerikUniversity li a.selected
{
margin-right: 1px;
padding-left: 7px;

12

background: transparent url('img/TabLeftSelected.gif') 0px 0px

no-repeat;
line-height: 33px;
}

and the final result will look like:

4.5. VERTICALLY CENTERING THE TAB TEXT

Usually, the line-height property centers the tab text vertically. In fact, in our case
it is also centered, but as visually the normal tabs are smaller than the selected
ones, we have to add some padding (in our case it is 4px) to the innermost tab
elements of the relevant selectors:

4.5.1. THE NORMAL TAB:

.RadTabStrip_TelerikUniversity li a .innerWrap
{
line-height: 33px;
background: transparent url('img/tabMiddle.gif') 0px 0px repeatx;
text-align: center;
padding-left: 23px;
padding-right: 23px;
padding-top: 4px;
}

4.5.2. THE SELECTED TAB:

13

.RadTabStrip_TelerikUniversity li a.selected .innerWrap

{
background-image: url('img/tabMiddleSelected.gif');
padding-top: 4px;
}

and here goes the final version of the new TelerikUniversity skin for
r.a.d.tabstrip:

STEP 5: GOING FURTHER

5.1. OVERLAPPING TABS:

Making r.a.d.tabstrip tabs overlapping is also done with css by applying negative
margin to the proper selectors. Although the design of TelerikUniversity skin does
not require it, we may test this important feature.

.RadTabStrip_TelerikUniversity li a
{
padding-left: 7px;
background: transparent url('img/TabLeft.gif') 0px 0px no-repeat;
line-height: 33px;
color: white;
text-decoration: none;
margin-right: -7px;
14

.RadTabStrip_TelerikUniversity li a.selected
{
padding-left: 7px;
background: transparent url('img/TabLeftSelected.gif') 0px 0px
no-repeat;
line-height: 33px;
margin-right: -7px;
}

And witness the following result:

5.2. STYLING THE DISABLED TABS

Although using the disabled=disabled property (set server-side with the

enabled=false flag on the tabs collection), disabled tabs should also be styled for
Mozilla and Opera, because these browsers do not change visually the disabled
element as Internet Explorer does:

Here is how a disabled tab looks under Internet Explorer:

And how under Mozilla and Opera:

15

To enhance visually the appearance of disabled tabs for Mozilla and Opera, we
specify cursor and text-decoration:

.RadTabStrip_TelerikUniversity li a.disabled,
.RadTabStrip_TelerikUniversity li a.disabled .wrap,
.RadTabStrip_TelerikUniversity li a.disabled .innerWrap
{
cursor: no-drop; /* IE, Mozilla, Opera */
text-decoration: line-through; /* IE, Mozilla, Opera */
}

and we get the following picture with Mozilla and Opera:

APPENDIX:

5.1. EXAMPLES SERVER TAG

<radTS:RadTabStrip id="RadTabStrip1" runat="server"

Skin="TelerikUniversity" width="800" SelectedIndex="0">
<Tabs>
<radTS:Tab Text="Home" SelectedIndex="0"></radTS:Tab>
<radTS:Tab Text="Admissions"></radTS:Tab>
<radTS:Tab Text="Academics" enabled="false"></radTS:Tab>
<radTS:Tab Text="About Us"></radTS:Tab>
<radTS:Tab Text="Forums"></radTS:Tab>
<radTS:Tab Text="Blogs"></radTS:Tab>
<radTS:Tab Text="Sitemap"></radTS:Tab>
</Tabs>
</radTS:RadTabStrip>
16

5.2. EXAMPLES HTML OUTPUT

<div id="RadTabStrip1" class="tabstrip RadTabStrip_TelerikUniversity ">

<script type="text/javascript" src="">[script goes
here]</script>
<div class="levelwrap level1">
<ul>
<li><a href="" class="selected" id=""><span
class="wrap"><span class="innerWrap">Home</span></span></a></li>
<li><a href="" id=""><span class="wrap"><span
class="innerWrap">Admissions</span></span></a></li>
<li><a href="" disabled="disabled" class="disabled"
id=""><span class="wrap"><span
class="innerWrap">Academics</span></span></a></li>
<li><a href="" id=""><span class="wrap"><span
class="innerWrap">About Us</span></span></a></li>
<li><a href="" id=""><span class="wrap"><span
class="innerWrap">Forums</span></span></a></li>
<li><a href="" id=""><span class="wrap"><span
class="innerWrap">Blogs</span></span></a></li>
<li><a href="" id="RadTabStrip1__ctl6"><span
class="wrap"><span class="innerWrap">Sitemap</span></span></a></li>
</ul>
</div>
<input type="hidden" id="RadTabStrip1_Hidden" name="RadTabStrip1"
/>
<script type="text/javascript">[script goes here]</script>
</div>

5.3. R.A.D.TABSTRIP CLASSES VISUALLY EXPLAINED

17

5.4. USEFUL R.A.D.TABSRIP RESOURCES

r.a.d.tabstrip overview

Online skinning examples of horizontal skins

Online skinning examples of vertical skins

Basics of telerik r.a.d.controls skinning

r.a.d.tabstrip online help

r.a.d.tabstrip support forums

5.5. GENERAL CSS KNOWLEDGE

World Wide Web Consortium CSS specifications

W3 Schools CSS tutorial

Guide to Cascading Style Sheets

18