SkinsDemo.aspx doesnt show the color of the button

eurico · #1 (**permalink**) June 29th, 2010, 07:03 PM

i followed all the instruction the the chapter 6 Skins|235 to create a button which then on the browser meant to show the button with purple background and white text but it doesnt show... i looked on the html source and

has this line
<input type="submit" name="ctl00$cpMainContent$Button2" value="Button" id="cpMainContent_Button2" />

which should also have a class="Mybutton" style="background-color":#7a704;"

but it doenst what could be missing could be because the file is on the Demo folder instead of on the monochronome folder

this my codes

PHP Code:


			
<%@ Page Title="Skins Demo " Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="SkinsDemo.aspx.cs" 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>

PHP Code:


			
<asp:Button CssClass="MyButton" BackColor="#7a70a4" runat="server" />

Imar · #2 (**permalink**) June 30th, 2010, 01:44 AM

Hi there,

Can you be a bit more specific? How does your Content Page look? Where exatly did you save the Skin file? With what name and what code? How does the CSS class look and in which file did you save it?

Imar

eurico · #3 (**permalink**) June 30th, 2010, 11:50 AM

Hi the skin file i saved on the Demos folder so is like this the structure of the files

Site {Folder App_themes {folder Monochrome{ File<Button.skin>}

Site {Folder App_themes {folder Monochrome{ File<Monochrome .css>}

Site {Folder Demos {file<SkinsDemo>}

Button.skin code

PHP Code:


			
<asp:Button CssClass="MyButton" BackColor="#7a70a4" runat="server" />

SkinsDemo.aspx

PHP Code:


			
<%@ Page Title="Skins Demo " Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="SkinsDemo.aspx.cs" 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>

Monochrome .css

PHP Code:


			
.MyButton

{

  color: White;  

}

Web config

PHP 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>

   

        <compilation debug="false" targetFramework="4.0" />

    </system.web>



</configuration>

Imar · #4 (**permalink**) June 30th, 2010, 11:57 AM

Is that all the code in the web.config? Looks like you haven't set the theme?

For more details, check out page 222, step 5.

Cheers,

Imarr

eurico · #5 (**permalink**) June 30th, 2010, 12:06 PM

Looks like this line was missing

<pages theme="Monochrome"></pages>

thanks

jerry503 · #6 (**permalink**) February 13th, 2011, 11:09 PM

I'm having a similar-but-opposite problem to eurico's... I'm seeing a purple button with white lettering regardless of which theme I select at runtime, though the other page elements change correctly when I change themes. I have the theme set to Monochrome in my web.config. BUT if I change my web.config setting to DarkGrey and re-view SkinsDemo.aspx in my browser, the button changes color correctly. Any idea what I'm doing wrong?

Thanks,
Jerry

Imar · #7 (**permalink**) February 14th, 2011, 02:40 AM

Hi there,

Can you post your code for the following items:

1. The <pages /> element of web.config

2. The Code Behind of your Master Page

3. The code for your BasePage

4. Your Skin file

5. The code for the button?

Makes it easier which part of the puzzle is missing.

Cheers,

Imar

jerry503 · #8 (**permalink**) February 14th, 2011, 09:53 PM

Sorry, I was hoping the problem would be glaringly obvious from my brief description. Here ya go...

1. The <pages /> element of web.config

Code:

<pages theme="Monochrome"></pages>

2. The Code Behind of your Master Page

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="PageWrapper">
            <div id="Header"><a href="~/" runat="server"></a></div>
            <div id="MenuWrapper">
                <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" 
                    DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
                    StaticEnableDefaultPopOutImage="False">
                </asp:Menu>
                <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
                    ShowExpandCollapse="False">
                    <LevelStyles>
                        <asp:TreeNodeStyle CssClass="FirstLevelMenuItems" />
                    </LevelStyles>
                </asp:TreeView>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
                    ShowStartingNode="False" />
            </div>
            <div id="MainContent">
                <asp:SiteMapPath ID="SiteMapPath1" runat="server">
                </asp:SiteMapPath><br /><br />
                <asp:ContentPlaceHolder ID="cpMainContent" runat="server"></asp:ContentPlaceHolder>
            </div>
            <div id="Sidebar">
                Select a Theme<br />
                <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" 
                    onselectedindexchanged="ThemeList_SelectedIndexChanged">
                    <asp:ListItem>Monochrome</asp:ListItem>
                    <asp:ListItem>DarkGrey</asp:ListItem>
                </asp:DropDownList>
            </div>
            <div id="Footer">Footer Goes Here</div>
        </div>
    </form>
</body>
</html>

3. The code for your BasePage

Code:

using System;
using System.Web;

public class BasePage : System.Web.UI.Page
{
    private void Page_PreRender(object sender, EventArgs e)
    {
        if (this.Title == "Untitled Page" || string.IsNullOrEmpty(this.Title))
        {
            throw new Exception("Page title cannot be \"Untitled Page\" or an empty string.");
        }
    }

    private void Page_PreInit(object sender, EventArgs e)
    {
        HttpCookie preferredTheme = Request.Cookies.Get("PreferredTheme");
        if (preferredTheme != null)
        {
            Page.Theme = preferredTheme.Value;
        }
    }

    public BasePage()
    {
        this.PreRender += new EventHandler(Page_PreRender);
        this.PreInit += new EventHandler(Page_PreInit);
    }
}

4. Your Skin file

Code:

<asp:Button CssClass="MyButton" BackColor="#7a70a4" runat="server" />
<asp:Button BackColor="Red" ForeColor="Black" SkinID="RedButton" runat="server" />

5. The code for the button?

Code:

<%@ Page Title="Skins Demo" Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="SkinsDemo.aspx.cs" 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:Button ID="Button2" runat="server" Text="Button" SkinID="RedButton" />
</asp:Content>

Imar · #9 (**permalink**) February 15th, 2011, 05:12 AM

Hi Jerry,

Not sure what's going on. I tested your code in my sample site and it all seems to work fine. When I request SkinsDemo in the Monochrome theme, I have a purple and a Red button. When I switch to DarkGrey, both buttons are grey.

The only reason for a problem could be in:

1. The code *behind* of the master page. You posted the code before / markup, but in the code behind the cookie is set for the selected theme. However, you say that theme switching seems to work fine for the other elements so I doubt this is the case.

2. Your skin file's location / name.

Are you seeing the same behavior with the code from the book? If not, can you make available a zipped copy of your web site so I can take a look?

Imar

Need to download code?

Navigation