Skins and CSS trouble

Rossco · February 25th, 2013, 02:24 PM

Hi Imar!

Thank you for writing a excellent book!

In Chapter 6 I'm having some trouble implementing the style for the button that uses a skin to give it a blue background and a .MyButton ID in the monochrome CSS to give it white text. The button seems to come out blue but the text does not get changed to white as specified in the CSS? Below are my code snippets

Button.skin

Code:

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

Web.config

Code:

<system.web>
    <compilation debug="true" targetFramework="4.5"/>
    <httpRuntime targetFramework="4.5"/>
    <pages styleSheetTheme="DarkGrey"></pages>
  </system.web>

Monochrome.css

Code:

.MyButton
{
    color: yellow;
}

SkinsDemo.aspx

Code:

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

Thanx in advance :)

Imar · February 25th, 2013, 04:38 PM

Notice how the web.config file sets the theme to DarkGrey. You need to get rid of that and then select the Monochrome theme for this exercise to work.

Cheers,

Imar

Rossco · February 26th, 2013, 08:29 AM

Thanx for the quick reply Imar!

I'm still having trouble with this even though I changed the theme in web.config to Monochrome. Additionally I have moved onto chapter 7 of implementing a menu on the website. I have made the changes to Monochrome.css file such as the action when the mouse hovers over the menu's and the different background colors etc. But none of these changes come into effect when I run the website in Firefox. I seem to think it is much the same problem as with the button skin. It is like the controls aren't inheriting the styles from the monochrome.css file?

I have opened your source files from chapter 6 and 7 and my code seems to be the same? I must be missing something? I'm using FireFox11 not the latest 12 do you think that could maybe be the problem?

Thanx for the assistance!

Rossco · February 26th, 2013, 08:33 AM

My Code:

Web.config:

Code:

 <system.web>
    <pages theme="Monochrome"></pages>
    <compilation debug="true" targetFramework="4.5"/>
    <httpRuntime targetFramework="4.5"/>
  </system.web>

Frontend.master:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <script src="../Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="PageWrapper">
            <header><a href="/"></a></header>
            <nav>
                <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"></asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
            </nav>
            <section id="MainContent">
                <asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath><br /><br />
                <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <aside id="Sidebar">Select a theme <br />
                <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ThemeList_SelectedIndexChanged">
                    <asp:ListItem>Monochrome</asp:ListItem>
                    <asp:ListItem>Dark Grey</asp:ListItem>
                </asp:DropDownList></aside>
            <footer>Footer Goes Here</footer>
        </div>
    </form>
</body>
</html>

Monochrome.css:

Code:

.MyButton
{
    color: white;
}
ul.level1
{
    /*Defines the appearence of the main menue items.*/
    font-size: 14px;
    font-weight: bold;
    height: 19px;
    line-height: 19px;
}
    ul.level1 .selected
    {
        /*Defines the appearance of active menu items.*/
        background-color: #509EE7;
    }
a.level1
{
    /*Adds some white space to the left of the main menu item text
          !important is used to overrule the in-line CSS that the menu generates*/
    padding-left: 5px !important;
}
a.level2
{
    /*Defiens the appearance of the sub menu items.*/
    background-color: #555555;
    padding-left: 8px;
}
    a.level1:hover, a.level2:hover
    {
        /*defines the hover style for the main and sub items.*/
        background-color: #509EE7;
    }

Imar · February 26th, 2013, 08:37 AM

Hi there,

Do other changes in the CSS show up? Or is nothing applied? Have you tried a hard refresh (Ctrl+R or Ctrl+F5) in the browser? And can you post the full code of the final page in the browser?

Cheers,

Imar

Rossco · February 26th, 2013, 08:56 AM

Haha I feel pretty stupid now. The (Ctrl-R) worked and displayed the updated styles.

Thank you very much for your assistance!