Hi Imar,
I've just started working through the Try It Out in Chapter 6 p247 called "Creating a skin for the Button Control", and I've hit a problem.
As per step 1 I created Button.skin in the Monochrome theme folder.
In step 3 it tells me to add .MyButton (etc) to Monochrome.css (again in the Monochrome folder) but I found this code was already there - because when we had been instructed to copy monochrome.css from the downloaded C:\BegASPNET\Resources\Chapter 06 I think I may have accidentally copied it from C:\BegASPNET\Source\Chapter 06. "No matter" I thought - at least the .MyButton is there and it should all work still.
Anyway, having completed steps 1-4, when it came to step 5 and requesting SkinsDemo.aspx in the browser I saw a run time error which said
"
There is no build provider registered for the extension '.skin'. You can register one in the <compilation><buildProviders> section in machine.config or web.config. Make sure is has a BuildProviderAppliesToAttribute attribute which includes the value 'Web' or 'All'."
See the following pics:
http://www.the-chain-gang.co.uk/pics...r6-skins-a.jpg
http://www.the-chain-gang.co.uk/pics...r6-skins-b.jpg
Can you offer any advice?
Thanks
Richard
PS Code follows:
Web.config
<code>
<?xml version="1.0"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.web>
<pages theme="Monochrome"/>
<compilation debug="true" strict="false" explicit="true" targetFramework="4.5"/>
<httpRuntime targetFramework="4.5"/>
</system.web>
</configuration>
</code>
Demos > SkinsDemo.aspx
<code>
<%@ Page Title="Skins Demo" Language="
VB" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="false" CodeFile="SkinsDemo.aspx.
vb" Inherits="Demos_SkinsDemo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Content>
</code>
Demos > SkinsDemo.aspx.vb
<code>
Partial Class Demos_SkinsDemo
Inherits BasePage
End Class
</code>
App_Themes > Monochrome > Button.skin
<code>
<asp:Button CssClass="MyButton" BackColor="509EE7" runat="server" />
</code>
App_Themes > Monochrome > Monochrome.css
<code>
*
{
/*
Defines the main font used throughout the entire site.
*/
font-family: Arial, Sans-Serif;
}
body
{
/*
Clears white space around the body and gives it a grey background color.
*/
margin: 0;
background-color: #cccccc;
}
a
{
/*
Clears the underline on normal links, and gives them a different text color.
*/
text-decoration: none;
color: #0760B2;
}
a:hover
{
/*
Underlines links when the user hovers the mouse over them.
*/
text-decoration: underline;
}
h1
{
/*
Makes h1 elements smaller than their browser default.
*/
font-size: 20px;
}
h2
{
/*
Gives h2 elements a different background color and size,
and adds a bit of margin at the top to create room between the heading and the preceding element.
*/
font-size: 14px;
color: #7773A1;
margin-top: 10px;
}
#PageWrapper
{
/*
Sets the total width for the entire page. Also sets the background color
which is used to fill the background of the Sidebar in case the MainContent section is taller than the Sidebar.
Uses margin: auto to center the entire page in the middle of the browser's window.
*/
width: 844px;
background-color: #5487c0;
margin: auto;
}
header
{
/*
Gives the header the same width as the PageWrapper. The height creates some room for the logo
that is set with the background-image.
*/
background-image: url(Images/Header.jpg);
width: 844px;
height: 86px;
}
header a
{
/*
The header a is a link nested in header. It provides a link back to the homepage.
The size of the link is the same as the header, so the entire header is clickable.
*/
width: 844px;
height: 86px;
display: block;
}
nav
{
/*
The menu spans the page width, right below the header.
At the top and left a few pixels padding is applied to create some room.
*/
background-image: url(Images/MenuBackground.jpg);
width: 827px;
height: 36px;
padding-top: 7px;
padding-left: 17px;
}
nav a
{
/*
Links in the Menu are white. This gets overriden by styles in chapter 7.
*/
color: #fff;
}
.MainMenu
{
/*
The Menu gets a white border on all four sides.
*/
border: 1px solid #999999;
width: 814px;
height: 19px;
background-color: #555555;
}
.MainMenu ul li
{
/*
Gives the four menu items in the main menu a width of 200px each.
*/
width: 200px;
}
section#MainContent
{
/*
Defines the main content area. The #MainContent element has a minimum height of 500 pixels, but can grow if necessary.
The font-size is 80% of its parent element, which in this case comes down to 80% of the font
the user has specified as the default font in the browser.
*/
font-size: 0.8em;
width: 659px;
border-left: 1px solid white;
border-right: 2px solid white;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}
aside#Sidebar
{
/*
The Sidebar is positioned to the right of the MainContent section. It gets the same font-size as the
#MainContent section and gets a background image called Sidebar.jpg.
To ensure the image is visible in (most) browsers on a small page, the element gets a minimum
height of 500px. This is ignored by IE 6.
*/
font-size: 0.8em;
color: White;
background-image: url(Images/Sidebar.jpg);
background-repeat: no-repeat;
background-color: #7773A1;
width: 142px;
min-height: 500px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
}
footer
{
/*
The footer is positioned below all other content (yet still within PageWrapper).
clear: both is used to clear the impact of the float properties used for #MainContent and #Sidebar.
*/
width: 844px;
clear: both;
height: 37px;
background-color: #A8D5FE;
color: White;
text-align: center;
font-size: 0.7em;
font-weight: bold;
line-height: 37px;
}
.Introduction
{
font-style: italic;
color: #3e3e3e;
}
.MyButton
{
color: White;
}
</code>
Chapter 6: p247 Creating a Skin for the Button Control
button below this post to show your appreciation!
