.skin vs .css from asp.net - asp.net

What is the main difference between .skin and .css in asp.net?
.skin is new enhancement of IDE. I have been working with .css. What is available in .skin that is not to .css
thanks,
saj

In the skin file you can set properties of asp.net controls.
For example,
<asp:TextBox runat="server" Width="200"/>
All the TextBox controls in your application will have width 200.
You can give it a name and only the controls you like you can set them to apply a skin for example,
<asp:TextBox SkinID="MultiLineTextBox" runat="server" TextMode="MultiLine" Height="240"/>
now in a web page when adds TextBox control you can set its SkinID to be "MultiLineTextBox"
as the following,
<asp:TextBox runat="server" SkinID="MultiLineTextBox"/>
and thus it will inherit the TextMode as MultiLine and the Height as 240.
To use the skin you have to add a theme to your application under the App_Themes folder and there you add the skin file, now to use this theme in your pages you have to set the EnableTheming property of the page to true, StylesheetTheme or Theme to the name of your theme. You can also set this properties in the config file.
Setting the theme in the page aspx,
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" EnableTheming="true" StylesheetTheme="Your Theme Name" %>
Setting the theme in the web.config,
<configuration>
<system.web>
<pages styleSheetTheme="Your Theme Name"></pages>
</system.web>
</configuration>

Note that in terms of what these two things actually do there is a considerable difference. Any properties set in the .skin file are copied out to all of the page controls. An advantage to using Cascading Style Sheets is that the information is loaded and cached once. (and can be applied to multiple web pages.) Skin files can cause page bloat because all the properties set in the skin file must be merged with every affected control every time the page is rendered.
Additionally, the default behavior of the ASP.NET Theme .skin files is to override the properties of the controls being affected (this can be an unexpected behavior). For example, if you set the Width property for all ASP:Labels in your .skin file, all the ASP:Labels that use the skin file will have their Width properties set to that of the .skin file's regardless of the control's individual Width setting. To avoid this behavior, the ASP.NET StyleSheetTheme can be used to allow control-level properties to override the global .skin properties.

You can set some properties like Width even in CSS. Apart from being able to set properties that CSS cannot, there are some things you need .skin file for.
Consider an example where you need all the asp:Label controls on your page to be in blue color. A asp:Label is actually text inside a span, thats inside a hidden div. This is why we are able to set some properties like BackColor to this asp:Label and why the standard label control does not have a 'BackColor' property.
So, if you try to set font color to all ASP Labels through CSS,
then something like
Label {
color: Blue;
}
Will not work. On the other hand, using a skin file you can write
<asp:Label runat="server" ForeColor="Blue"></asp:Label>
and this will set all Labels to blue color.

Related

Add custom markup to .NET Theme .skin file?

I am new to .NET Themes. I would like to display different static HTML content in various places using Themes of my Web Application.
My first attempt was to use the ASP Literal control as follows:
In .aspx page:
<asp:Literal runat="server" SkinID="HomeContentFooter"/>
and in my .skin file:
<asp:Literal runat="server" SkinID="HomeContentFooter">
<div>
<!-- I hoped to put some custom static markup for each theme here -->
</div>
</asp:Literal>
This produces the following error:
The control type 'System.Web.UI.WebControls.Literal' cannot be themed.
So is there another approach for this using themes?
Literal control is rendered as plain text on your html, that is, when you have <asp:Literal ID="id" runat="server">Hello World</asp:Literal> you will get just Hello World on client. Since skin files are used for setting properties of elements and literal does not have style related properties or any properties or tags at all, it makes sense that it cannot be themed.
You can use asp:Panel instead, you customize it in your skin file and it will be rendered as div.

ASP.NET Master Page Content Page's IDs all changed, breaking CSS based on original element IDs? Are you kidding me

ASP.NET Master Page Content Page's elements all seem to be having their ID's changed or prepended by the ASP.NET page renderer.
This breaks all CSS styles based on the original element IDs.
Is this seriously how it works? If so, is there a way around it?
Yes, you can specify the ClientIDMode set it to static.
examples:
Client Side
<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"></asp:TextBox>
Code Behind
TextBox txtBox = new TextBox();
txtBox.ID = "TextBox1";
txtBox.ClientIDMode = ClientIDMode.Static
By setting it to static...
The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.
Update thanks to #Chris Lively for the additional info
Page Level
<%# Page Language="C#" ClientIDMode="Static" AutoEventWireup="true"...
Application Level
<system.web>
<pages clientIDMode="Static"></pages>
</system.web>
references:
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
http://beyondrelational.com/blogs/hima/archive/2010/07/16/all-about-client-id-mode-in-asp-net-4.aspx
I think you need to use the ClientID property instead of the ID property.
Documentation: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

how to access .skin file from aspx page

i have a .skin file inside my app.themes folder. To access .css file from asp page we have to give link. but i couldn't find any thing on asp header to give link for .skin file.
<asp:TextBox SkinID="txtBox" ID="TextBox1" runat="server"></asp:TextBox>
i got the following error..
A SkinID has been specified but the page is not configured to use a page theme or stylesheet theme. This is acceptable if the theme or stylesheet theme will be set programmatically.
should i create any link?
thanks
saj
Should specify the name of the theme (ie the folder in your App_Themes folder that contains your skin file) on the Theme property of the Page.
In code:
Page.Theme = "MyTheme"
or in your markup:
<%# Page Theme="MyTheme" .... %>
Don't use ID="TextBox1" in any skin file

Creating ASP.NET composite control. How to apply properties associated with SkinID?

I am creating a custom composite control based off of an asp:Label control. I'd like to be able to have the label's default properties be skinable as well as additional properties that I add to my control.
But when I add a skin definition to the Default.skin file in my themes directory, and add the control to my page with the SkinId specified, I cannot figure out how to get the control to render with the Skinned properties.
Additional points:
My custom control is defined in a separate library/dll.
I added one test property, and added the [Themeable(false)] attribute. Then I set that property in the .skin file. I didn't get any errors when I tried to view the page, so it appears to me that the .skin file is not getting applied or that the control def in the skin file doesn't get matched up with the control def in the aspx page.
From the skin file:
<ctrl:ExtendedLabel SkinId="test" runat="server"
Expandable="true" Lookup="true" Required="true"
RequiredCssClass="required" Text="Hello" />
From the aspx page:
<ctrl:ExtendedLabel SkinID="test" runat="server"/>
From web.config:
<pages>
<controls>
<add tagPrefix="ctrl" namespace="MyCompany.WebControls"
assembly="MyCompany.Web" />
</controls>
</pages>
I added a test property to the control, marked it as [Themeable(false)] in order to test if I'd get the runtime error when setting that property in the skin file. No error.
Notice that the pages tag doesn't have a styleSheetTheme attribute. I do however, have a Base page class that overrides StyleSheetTheme property, which seems to work for everything else.
If I add the styleSheetTheme attribute to the pages tag in web.config, the skin stuff works, including getting the error if I try to set the non-Themeable property.
What's the difference? How can I get it to work with the Base page class property code?
What are you getting when you try this? I just created a simple test project and was able to skin a custom property on a web custom control. My steps were:
Create the custom control.
Add [Themeable(true)] attribute to the class definition in the code-behind file.
Add a Label control to my custom control.
Add a property named "LabelText" to my custom control, which gets/sets the label controls Text value.
In web.config, add 'theme="TestTheme"' to the system.web/pages section.
In web.config, add '<add tagPrefix="mine" tagName="Test" src="~/UI/Test.ascx" />' to the system.web/pages/controls section.
In my Default.skin file, added '<mine:Test runat="server" LabelText="Test Text" />
In Default.aspx, added '<mine:Test id="test1" runat="server" />'
Load the page up and see the text "Test Text", which was only present in the Skin file.
Hopefully one of my steps above will be something you forgot, but if not, please update your question with details on what you are trying and what you are seeing.

ASP.Net Validator Default Style

I'm using several variants of the Validator controls (RequiredFieldValidator, CompareValidator, etc) and am using the CssClass property of the validator. I can see (via Firebug) that the class is being applied, but the validator control itself is adding a style element to it, namely color: red. But I don't want that. I want the control to use the cssclass only.
I know I can override the Forecolor attribute, but I'll have to do that on every validator in the project. And I'd really like to be able to just change my CSS Class in my stylesheet in case we have to change all the error message appearances in the future.
Anyone have any clues how to tell the Validator controls to NOT use their default styles?
You can do this in your css file:
.validator
{
color: blue !important;
}
This will override the inline red style.
You can change the default style of validators using Themes.
Right click on the website in Visual Studio
Choose "Add ASP.NET Folder"
Choose "Themes", name the new folder "DefaultTheme"
Create a file called "Controls.skin" in the DefaultTheme folder
Add the following to the Controls.skin file:
<asp:RequiredFieldValidator runat="server" CssClass="validation-error" />
<asp:RangeValidator runat="server" CssClass="validation-error" />
<asp:CompareValidator runat="server" CssClass="validation-error" />
<asp:RegularExpressionValidator runat="server" CssClass="validation-error" />
<asp:CustomValidator runat="server" CssClass="validation-error" />
<asp:ValidationSummary runat="server" CssClass="validation-error" />
Merge the following into your web.config:
<configuration>
<system.web>
<pages theme="DefaultTheme" />
</system.web>
</configuration>
Then you can set whatever colour you want for .validation-error in your CSS files.
(Note that versions of ASP.Net before 4.0 used to apply style="Color:red" to all validators by default, making it hard to override their colours in CSS. If you find that is affecting you, then you can override it by setting the ForeColor property on each of the theme elements above, or add !important to your CSS rule.)
See:
How to: Define ASP.NET Page Themes
How to: Apply ASP.NET Themes
Validation Controls Lost Their Red Color in ASP.Net 4.0
If you use themes, you can set up your skin file to control the appearance of your validator. The problem with Forecolor inline is that the way .Net renders the default controls, it inserts a color="#..." attribute that overrides CSS at the element level. If Keltex's solution above doesn't get it for you with the !important directive, your next step is probably to use/adapt/help work on the CSS-Friendly Control Adapters project at http://www.asp.net/CSSAdapters/.
Shameless plug: Brian DeMarzo is working on extending this project at Google Code.
Have you looked at themes?
Set Forecolor=""
And
CssClass="your-css-class"

Resources