Rad Tabs Trip Skinning Tutorial

Step-by-Step

CREATING SKINS FOR R.A.D.TABSTRIP Quick and Easy Reference to telerik r.ad.controls Skinning

2007 © 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. r.a.d.tabstrip Classes Visually Explained

5.4. Useful r.a.d.tabstrip 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 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:

4

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:

5

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;

6

.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

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;

7

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

8

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

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;

9

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;

10

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

11

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:


{

line-height: 33px;


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:


{

line-height: 33px;


text-align: center;

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

12

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:


{

margin-right: 1px;

padding-left: 7px;


line-height: 33px;

color: white;


}

… and the outermost class of the selected tab button:


{

margin-right: 1px;

padding-left: 7px;

13


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:


{

line-height: 33px;


text-align: center;

padding-left: 23px;


padding-top: 4px;

}

4.5.2. THE SELECTED TAB:

14

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


{

padding-left: 7px;


line-height: 33px;

color: white;


margin-right: -7px;

15

}


{

padding-left: 7px;


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:

16

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>

17

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>

<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

18

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

Rad Tabs Trip Skinning Tutorial

Documents

Transcript of Rad Tabs Trip Skinning Tutorial