What ever product or tool, either you or I or third party develops, it cannot do beyond the extent what browser understands.
What ever it is , the final destination is the response should give html content.
To make the content displayed on browser, to make user more effective or attentive you should build using CSS (cascading style sheets), which is similar to XSD for XML files.
So even skins what rad tool is using for its components obviously use CSS files to make content decorated on to the bowser window. I think you got what do I mean.
There 2 ways to define Skins for Rad tool.
Use existing skins provided by Telerik (Third party , Rad product developer). They are
Default
Default2006
Hay
Inbox
Office2007
Sunset
Telerik
Vist
Web20
WebBlue
Default is the skin which is applied to a rad component you create in the page, for which you can change while creating .
Example :-
You can define in aspx page
<telerik:RadComboBox ID="RadComboBox1" runat="server" EnableEmbeddedSkins="false" Skin="Vista">
You can define in aspx.cs
RadComboBox1.Skin = "SunSet"; in aspx.cs
Note : While using existing Telerik provided skins be very sure about case , because skins are case sensitive.
You cannot give SunSEt for Sunset which throws error.
If I use Vista skin.
If use Sunset skin
Define or customise your own skin according to your own view specifications.
Main important attribute which you should set to false is EnableEmbeddedSkins.
EnableEmbeddedSkins=”false” case when you are trying to define your own customised skin. (Saying not to embed default skin and disable them).
As I said before to control the desing of the content you should define css file according to your view requirement.
So now the task in this case is to create Style sheet file.
To make my job easier and to make you understand easily , I will create a skin of my own called “MyStyle1” which should have the following contents.
Folder created seperately for this style and I name that folder as “MyStyle1”.
I should create a sub folder in this folder saying “ComboBox”.
(I have same folder from C:\Program Files\Telerik\RadControls for ASPNET AJAX Q2 2008\Skins\Vista\ComboBox to make my job easy).
I should create a separate style sheet name (ComboBox.MyStyle1.css).
(To make my job easier I copied file content at
C:\Program Files\Telerik\RadControls for ASPNET AJAX Q2 2008\Skins\Vista\ ComboBox.Vista.css).
(Modified the content in combobox.mystyle1.css file, which has Vista to MyStyle1)
So now my style sheet folder structure in project is
I should link this style sheet folder in head tag as
My aspx page is
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html >
<head runat="server">
<title>Untitled Page</title>
<link href="MyStyle1/ComboBox.MyStyle1.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div >
<telerik:RadComboBox ID="RadComboBox1" runat="server" EnableEmbeddedSkins="false" Skin="MyStyle1">
<Items>
<telerik:RadComboBoxItem Text="1" runat="server" />
<telerik:RadComboBoxItem Text="2" CssClass="test" runat="server"/>
<telerik:RadComboBoxItem Text="3" runat="server" />
<telerik:RadComboBoxItem Text="4" runat="server" />
</Items>
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
</div>
</form>
</body>
</html>
Also to make you find the difference in view while using MyStyle1.css and Vista I have copied “rcbArrowCell.gif” file from
C:\Program Files\Telerik\RadControls for ASPNET AJAX Q2 2008\Skins\Sunset\ComboBox folder and replaced exisintg at ../Rad1/MyStyle1/ rcbArrowCell.gif (vista skin image file with sunset skin image file).
You can observe output with “MyStyle1”.
You can find change in colour/image background since I have used same image files from Vista but replaced rcbArrowCell.gif image file with the one from Sunset.
Modifying the style or view (skins) can also be done for asp or html component
Here i am having 2 buttons , click on first button applies class (style) "Test1" from Stylesheet2.css file and click on second button applies class(style) "Test2" from Stylesheet2.css file
This is done using javascript, so the view gets modified smoothly
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="dc_head">
<title>Test</title>
<link href="StyleSheet2.css" rel="stylesheet" type="text/css" id="lnk"/>
<script type="text/javascript" language="javascript">
function applyskin(skn)
{
document.getElementById('div_test1').className=skn;
}
</script>
</head>
<body>
<div class="Test1" id="div_test1">
Using same style sheet class file not modifying the path but just trying to change the class name<br />
<input type="button" value="Test1" id="btnTest1" onclick="applyskin('Test1');"/> <input type="button" value="Test2" id="btnTest2" onclick="applyskin('Test2');" />
<br/>
Hai Friends
</div>
</body>
</html>
Stylesheet2.css file content
body {
}
.Test1
{
background-color:Gray;
}
.Test2
{
background-color:Yellow;
}
No comments:
Post a Comment