Telerik RadTabstrip step-by-step skinning tutorial

Telerik Inc.

Description

Step-by-Step

Creating Skins for RadTabstrip
Quick and Easy Reference to Telerik RadControls Skinning





















2008 © 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. Example’s Server Tag
5.2. Example’s HTML Output
5.3. RadTabstrip Classes Visually Explained
5.4. Useful RadTabstrip Resources
5.5. General CSS Knowledge











2 ABSTRACT

This tutorial is targetted to web-developers that have intermediate / advanced knowledge of Cascading
Style Sheets – css selectors, pseudo-elements, floats, block-level and inline elements. We also assume
that readers are acquainted with PhotoShop and XHTML basics.

A Beginner’s Cascading Style Sheets Reference, explaining CSS’ basics may be downloaded from ...

Sujets

• Skin-pass
• IMG International Tour Tennis
• Daniel Miller
• Classe préparatoire ENS Cachan D1
• Opéra-bouffe
• Tutoriel

Informations

• Publié par: Vikub
• Nombre de lectures: 1 167
• Langue: English

Extrait

Step-by-Step

Creating Skins for RadTabstrip

Quick and Easy Reference to Telerik RadControls Skinning

2008 © Telerik

2

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. Example’s Server Tag

5.2. Example’s HTML Output

5.3. RadTabstrip Classes Visually Explained

5.4. Useful RadTabstrip Resources

5.5. General CSS Knowledge

3

ABSTRACT

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

Style Sheets – css selectors, pseudo-elements, floats, block-level and inline elements. We also assume

that readers are acquainted with PhotoShop and XHTML basics.

A

Beginner’s 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 RadControls 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 Adobe 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 RadTabstrip 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:

4

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

…

<

rad

TS

:RadTabStrip

id

="RadTabStrip1"

runat

="

server

"

Skin

="TelerikUniversity"

></

rad

TS

: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 RadTabstrip. 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 RadTabstrip, 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 -

- 7 x 33 pixels

TabRight.gif -

- 7 x 33 pixels

5

Finally, let’s create the middle image (TabMiddle.gif). Usually, in the css file, this selector’s 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;

.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

no-repeat

;

}

2.2.3. MIDDLE

Change the

line-height

property with the new value – 33 pixels:

.RadTabStrip_TelerikUniversity

li

a

.innerWrap

{

line-height

:

33px

;

background

:

transparent

url('img/tabMiddle.gif')

0px

0px

repeat-x

;

text-align

:

center

;

}

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

result:

6

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

;

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 RadTabstrip:

.RadTabStrip_TelerikUniversity

{

font

:

11px

Arial,

Verdana,

Sans-serif

;

text-transform

:

uppercase

;

}

… then we have the following result:

7

4.2. SETTING THE TEXT BOLD

To bold any text within RadTabstrip, 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

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

repeat-x

;

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.

8

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

;

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

repeat-x

;

text-align

:

center

;

padding-left

:

23px

;

padding-right

:

23px

;

padding-top

:

4px

;

}

9

4.5.2. THE SELECTED TAB:

.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 RadTabstrip:

STEP 5: GOING FURTHER

5.1. OVERLAPPING TABS:

Making RadTabstrip

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

;

}

.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:

10

Here is how a disabled tab looks under Internet Explorer:

And how under Mozilla and Opera:

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. EXAMPLE’S 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

>

5.2. EXAMPLE’S 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

>

11

<

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. RadTabstrip CLASSES VISUALLY EXPLAINED

5.4. USEFUL RadTabstrip RESOURCES

•

RadTabstrip overview

•

Online skinning examples of horizontal skins

•

Online skinning examples of vertical skins

•

Basics of Telerik radcontrols skinning

•

RadTabstrip online help

•

RadTabstrip support forums

5.5. GENERAL CSS KNOWLEDGE

•

World Wide Web Consortium CSS specifications

•

W3 Schools CSS tutorial

•

Guide to Cascading Style Sheets