You must Sign In to post a response.
  • Category: ASP.NET

    Difference between skin, css and themes.

    an any one explain what the major difference between skin, css and themes.

    please don't post the links.

  • #496493
    Difference between Skin File and CSS
    skin file is applied to server controls and controlled and rendered by the server(iis). css is run by client's browser. skin also generates css but in the server whereas css directly sent to browser.
    Skins apply to a single Web server control. Styles can apply to a single HTML element or to collections of elements.

    Surekha Prakash

  • #496499
    Differences between Themes and CSS
    o CSS usually deals with HTML code. You cannot apply CSS to certain ASP.NET specific server controls which are not present in HTML.
    o You can apply Themes and skins to all ASP.NET controls with less effort. Themes and skins can be uniformly applied on both windows and applications.
    o You can apply single theme to each page where as multiple style sheets can be applied to each page.
    o Themes don't override or cascade style definitions by default the way CSS generally do. But you can selectively override local property settings for a control using StyleSheetTime attribute in Themes.
    o You can include CSS files in Themes which is applied as part of Theme structure but not vice-versa.
    You can apply theming for only those properties that have ThemeableAttribute attribute set to true in their control class.
    Generally, Themes contain skins. A skin file contains style definitions for the individual server controls. You can define skin settings for a control using similar markup which we use to add server controls to web page. Only difference you may find between skinned versions of control is that skinned version do not include ID attribute for control. You should retain properties for which you want to configure through Themes. We create .skin files in Theme folder. We can also mix all server controls style definition in a single skin file. Make sure all style definition files like CSS, skin files, Image files and other resources are included in Themes folder in your application directory.
    <asp:button runat="server" BackColor="lightblue" BorderColor="AliceBlue" Font-Bold ="true" ForeColor="black"/>
    Skin file
    There are two types of control skins based on their scope. They are:
    Default Skins: Control skin for which SkinID attribute is not set which means control skin is applied automatically for the controls of same type. For example: if you create a default skin for button then default button control skin will be applied for all the buttons on the page. The scope of default skin depends on where you define default skin.
    Named Skins: Named Skins will have SkinID property set which means you can use named skins with a control only by setting control's SkinID property to specific named skinID. Named Skins do not apply for the controls by type.
    As we discussed in first few paragraphs, we can define Themes for entire site or for pages. So based on scope, we can define Themes into two types:

    Thanks & Regards,

  • #506077
    Well Themes are a collection of a skin and a css file.

    Skin files are meant to to format adn glossify server side controlss , for example an <asp:Button> control. for examle:

    <asp:Label runat="server" ForeColor="BlueViolet" />

    CSS files are used to format html elements on the other side.

    Now we call a skin file and a cs file together as a theme and now comes how we can use themes:

    You make a App_Themes folder in your website:

    Under this you make several folders each for one theme.Keep a skin and a css file for each folder and name the folder as Red theme , Blue theme etc so that it's understandable.

    Now how to apply themes:

    Themes can be applied in two ways:

    1. On a page , using page directive Theme="Red Theme"

    <%@ Page Language="C#" AutoEventWireup="true"

    CodeFile="Default.aspx.cs" Inherits="_Default"

    Theme="Red Theme" %>

    2. In web.config add your theme like this:

    <pages theme="Red Theme" />

    NOTE:You can also change the theme through code during runtime but theme can only be changed during the page_preInit event of page , not the page_load event.

  • This thread is locked for new responses. Please post your comments and questions as a separate thread.
    If required, refer to the URL of this page in your new post.