Member Avatar for hirenpatel53

Dear all i have allready Created web application and used skin file for that application now i am planing to change look of my application for that need to change skin file but problem is i am not a good imaginative so need some sides which provides attractive skin file for almost all controls of asp.net or any site which allows to create dynamically skinfile for controls so anybody has any idea Please Help me out

Thanks In advance

  • 4 Contributors
  • 3 Replies
  • 586 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Yoselin
Member Avatar for Yoselin

I have crated my own skin files using ASP.NET 4.5, here are some tips, hope will help you.

Regards.

Creating a Skin File
Skin files must be created in the theme’s folder directly. You can’t store them in a subfolder like you
do with the theme’s images. In the following you see how to create a simple skin file to
change the look and feel of all button controls in the website.
When you start typing in a skin file, you’ll notice that the familiar IntelliSense doesn’t kick in. This makes it slightly difficult to define your controls and their attributes. However, there is a simple
workaround:

  1. Open Visual Studio’s Options dialog box by choosing Tools >> Options.

  2. Expand the Text Editor category and click File Extension.

    1. In the Extension box, type skin and then from the Editor drop-down list, choose User
      Control Editor      .

  3. Click the Add button and then click the OK button to dismiss the Options dialog box.
    From now on, you’ll get IntelliSense in skin files (you may need to reopen existing skin files first if
    you already created one). With this setting on, you may get a warning in the Error List about build
    providers when you have a skin file open. You can safely ignore this warning, because skins work
    fine at run time even with these settings in VS.

Creating a Skin for the Button Control
To effectively use skins, you should strive to use CssClass attributes as much as possible instead of
applying inline attributes that all end up in the final HTML of the page, increasing its size and load
time. However, to show you how it works in case you do have a special need to add inline attributes,
this steps shows you how to apply both.

  1. In the Monochrome theme folder, add a new skin file and call it Button.skin. You add the file by
    right-clicking the Monochrome folder and choosing Add >> Skin File. In the dialog box that follows, type Button as the file name and click OK.

  2. Delete the entire contents from the file and type the following code:

<asp:Button CssClass="MyButton" BackColor="#509EE7" runat="server" />

Note that this markup uses a combination of inline attributes for styling (the BackColor) and the
CssClass to point to a selector in your CSS fi le. Also note that this control does not have an ID
attribute. As explained earlier, you can ignore the warning about missing build providers because
your skin fi les will work fi ne at run time. As soon as you close the skin fi le, the warning goes
away.

  1. Open the Monochrome.css file from the theme folder and add this CSS selector at the end of the
    file:

    .MyButton
    {
    color: White;
    }

    1. Create a new Web Form and call it SkinsDemo.aspx. Give the page a Title of Skins Demo and
      then add a Button by dragging it from the Toolbox into the cpMainContent area of the page. You
      end up with this code:

    <asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat="Server">
    <asp:Button ID="Button1" runat="server" Text="Button" />
    </asp:Content>

    1. Save all changes and then request SkinsDemo.aspx in the browser.
      If you don’t see the changes, press Ctrl+F5 or Ctrl+R to force a fresh copy of the CSS
      file from the server.
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.