Telerik RadTabstrip step-by-step skinning tutorial
11
pages
English
Documents
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
11
pages
English
Documents
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
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 ...
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
