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;
}
4 comments:
Hi this is VaraPrasad.
i want the code to be written for the rad controls which i have to apply our own skin not the rad skins?
Hi Varaprasad,
Yeah i got you, i have explained in my post for both categories.
Have you observed it?
I explained that there are 2 ways of applying skins.
second category explins the way of creating our own (customised) skins.
Also refere
http://programmerfindings.blogspot.com/2008/09/what-is-globalization-and-localization.html
for globalisation concepts
Cheers,
Srinivas
hi i am pavan kumar
what is application in asp.net?explain with example how an application work.
Hi Pavan,
Sorry after a long gap i am reviewing my old blogs.
Regarding application in Asp.Net, it can be used as a shared varaiable.
It is simillar to what a session object is but session is specific to a user in a application or web site he/she access.
Where application is also accessed in such manner but not specific to a user but specific or unique in an application.
Information that can be shared among all online users or users working on a web application can share globally among them using Application varaiable.
Sure i shall post a blog in short span about this.
Thank you for your engage,
Cheers,
Srinivas
Post a Comment