Creating Styling with Themes


Posted Date:     Total Responses: 0    Posted By: R.Vijayaragavan   Member Level: Gold   Points/Cash: 90   


Creating a Theme



The process of creating a theme involves creating a .skin file, which defines the appearance of each element on the page, and placing this skin file within a folder, the name of which specifies the name of the
theme. All themes are stored within a folder in an application directory called App_Themes.



The Following steps are involved in create a simple theme to define a style formatting.



  1. Open up your website. Right Click the Solution Explorer and select Add ASP.NET Folder-->Theme.

  2. This creates a new folder within the application called App_Themes, and a new empty folder within App_Themes that you will have to name. Name the new folder Blue.

  3. Right-click the App_Themes folder and add a new Theme folder named Red. You now have two themes available to your site, although you don’t yet have any skin files containing style definitions.This is the next part.

  4. Right-click the Blue folder and select Add New Item. Select Skin File and call it BlueBits.skin.

  5. Click Add. Take a look at the resulting file and you’ll see some default comments that overview some of the basics of skin files.

  6. Repeat this step to add a skin file for the Red theme, called RedBits.skin.

  7. Create a new web page by right-clicking the Solution Explorer and selecting Add New Item, selecting a Web Form, calling it SkinSource.aspx, and clicking OK.

  8. Drag two Calendar controls onto the page. These controls need some styling, and the first step is to manually add some styles to each of these controls so that the first one can be used in a blue theme, and the second can be used in a red theme. In just a moment, you’ll see the styles
    to use for these controls.

  9. Now drag a Label control onto the page and style it with a bit of color and font styling.

  10. Open the BlueBits.skin file in VWD and copy and paste the HTML for your blue Calendar and Label controls in the SkinSource.aspx page into the skin file. Remove the ID tags for each of them.

  11. Remove the Text attribute and add a SkinID attribute to the Label control to give it a unique style reference.

  12. Repeat steps 8 and 9 for the red controls, placing them in the RedBits.skin definition file.



Applying Themes to Pages



  1. Start by creating a Master page for the site. This is going to be a very small and simple site, but having a Master page will help you to navigate consistently around the site. Call the Masterpage ThemedMaster.master. Into the Master page, add a TreeView control on the left-hand side of the page, and place the ContentPlaceholder to the right by using the following HTML.

  2. You’ll need to create a simple web.sitemap for this example to act as the data source for the TreeView control. Right-click the solution explorer and select Add New Item

  3. Add a SitemapDataSource to the Master page and set the DataSource for the TreeView control.

  4. Time to build some content pages. In this example, you create three very simple pages. The first one is called ThemeDefault.aspx. Start by right-clicking the Solution explorer and select Add New Item.

  5. In the Content placeholder on this new page, type in some plain text: “Default page!”, and then drag two Label controls onto the page. Set the first Label control’s text property to “Styled label”and the second Label control’s text property to “Unstyled label”. Finally,set the first Label control’s SkinID property to textLabel. This will link up the Label control
    to use the skinned label’s styling.

  6. Specify which theme to use for this page. Let’s use the blue theme. If you are in Design View,click the gray area and view the properties for the Document. In this properties list, you should set the Theme property to Blue. Save the page and that’s the first one out of the way.

  7. Add two more pages in the same way. Call them ThemePage1.aspx and ThemePage2.aspx. Make sure that you specify the same Master page for these content pages.

  8. In ThemePage1.aspx, enter the text Page 1 and add a Calendar control onto the Content area of the page. Set the page’s Theme property to Blue

  9. In ThemePage2.aspx, enter the text Page 2 and add an ImageButton control to the page. Set its SkinID property to homeImage and the PostBackUrl property to ThemeDefault.aspx. This means that if a user clicks the image, they will be taken back to the ThemeDefault.aspx page.Finally, set the page’s Theme property to Red

  10. You’ve finished the groundwork, so it’s time to see the results of your hard work. Click the ThemeDefault.aspx in the Solution Explorer and press Ctrl+F5 to run the page.



Attachments

  • Creating Styling with Themes (561-29537-WebSite1.rar)

  • Project Feedbacks

    Author: Member Level: SilverRevenue Score: 1 out of 5
    nice one,
    thanks for support.


    Author: Member Level: GoldRevenue Score: 2 out of 52 out of 5
    Hi,
    Its really nice. I would like learn such type of things.

    It will be greatful for me to send the files.

    Thanks
    Siva Sreenath


    Post Feedback
    You must Sign In to post a feedback.
    Next Project: Object finder
    Previous Project: Library Management

    Return to Project Index

    Post New Project


    Related Projects


    Top Contributors
    TodayLast 7 Daysmore...

    Awards & Gifts

    Online Members

    ramana
    More...
     
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India