Confusion on themes

JohnInPomeroy · January 5th, 2013, 05:40 PM

Hi Imar and thanks for your updated book. I've mostly enjoyed working through it and when I haven't, it's been when I typed what I thought you wrote not what you did write. (grin)

I'm with you on themes in Chapter 6 and a bit confused. I added the following line to Web.config as per the try It Out exercise:

Code:

    <pages theme="DarkGrey" styleSheetTheme="DarkGrey"/>

so that I can see how my changes look while I'm in VS.

Except if I have the theme specified as I do above, when I change the them in the browser (both Firefox 17 and IE 9) then the CSS in the Monochrome.css file isn't totally getting read and the page displays strangely and the <nav> element is lowered and offset.

If I change web.config to read

Code:

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

and save everything, close my browser and reload then the Monochrome.css DOES get read correctly, but when I change the theme to the DarkGrey It doesn't read all the CSS apparently. The <body> is the same width as the Monochrome and the background color for the area outside the <cpMainContent> is blue NOT grey.

I have copied the two .css files from the downloaded Zip and also and using the downloaded Default.aspx and the downloaded FrontEnd.Master with no changes by me so I don't think it's my typing. (Also I have checked all capitalization in VS and it's consistent and right. I may have some words capitalized wrong in this message, but they're right in the code.) Since I am using downloaded files, I'm not uploading any code but would if you want me to.

Any ideas? Thanks a lot again for your books.

John Gordon

OK, I took the

Code:

    <pages theme="xxx" styleSheetTheme="xxx"/>

out of Web.config and now it reads the css files and displays both correctly. . Is it me?

Imar · January 5th, 2013, 06:26 PM

Hi John,

Quote:

out of Web.config and now it reads the css files and displays both correctly. . Is it me?

Nope; it's by design ;-)

When you set both themes in web.config to Monochrome and then one to DarkGrey in the browser, both themes are applied at the same time. To confirm, check the final HTML in the browser. The same is true if you set DarkKrey in web.config and choose Monochrome in the browser.

Since both themes overlap with regards to the elements they target, the result is a big mess.

The solution: remove styleSheetTheme from the web.config. Leave theme in so it serves as a default and can then be overridden by the client. You lose some of the design time capabilities in VS but if you need them back, you can always switch styleSheetTheme back on temporarily.

Hope this helps,

Imar

JohnInPomeroy · January 6th, 2013, 12:19 PM

Imar,

Yes, it helped. And looking at it after your explanation, you had warned (potentially) of such a problem. You covered when the theme and the styleSheetTheme 'took control' and I read right through it

Seeing the overlap of CSS when the DarkGray theme was ending up centered on the page like the Monochrome but your examples had it the full width. or a different background in Monochrome should have tipped me off. There's a reason they're called Cascading SS, right?

In my "defense", i had just spent 25 minutes reading though the CSS files to fix an "error" that was actually caused by starting a duplicate '<nav>' tag halfway through section and ending it about 5 lines down. That made for some strange layout.

Thanks for your quick response.

John

Imar · January 8th, 2013, 04:08 AM

Quote:

There's a reason they're called Cascading SS, right?

Indeed. Both files target have an overlap in the elements they target with their selectors. This means that if you load both CSS files, the first file is processed first. The selectors in the second file that overlap with those in the first then overwrite the changes made by the first file. This causes a mix of the two themes in the browser.

Cheers,

Imar

hsc · January 30th, 2013, 04:49 PM

Dear Imar,
First - A big Thank You for a very well written book.
Hope you many more such books!

I have run into a bit of a problem in chapter 6.
everything was working fine till i incorporated images in the CSS DarkGrey.
I copied the source as instructed in the chapter from the source code provided with the book. well the header image etc. were not displayed and the existing css layout also went haywire.

The code is standard as per the code in the downloaded source file.
I did not change anything in the code/css/web.config except as mentioned in the book.
kindly advice.
h

Imar · January 30th, 2013, 05:30 PM

Hi hsc,

You're welcome....

Can you post the code for the Master Page and the web.config? Either your IDs don't match, or you have multiple themes configured.

Cheers,

Imar

hsc · January 31st, 2013, 03:47 PM

Hi Imar,
Thanks for the quick reply.
I know how busy you must be, yet you take time out for this. I really appreciate your effort.
The code for Master page is:

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">&nbsp;&nbsp;&nbsp; Menu Goes Here</div>
            <div id="MainContent">
                <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" 
                    style="width: 128px">
                    <asp:ListItem>MonoChrome</asp:ListItem>
                    <asp:ListItem>DarkGrey</asp:ListItem>
                </asp:DropDownList>  </div>
            <div id="Footer">Footer Goes Here</div>
        </div>
    </form>
</body>
</html>

frontend.master.cs:

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class MasterPages_Frontend : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string selectedTheme = Page.Theme;
            HttpCookie preferredTheme = Request.Cookies.Get("PreferredTheme");
            if (preferredTheme != null)
            {
                selectedTheme = preferredTheme.Value;
            }
            if (!string.IsNullOrEmpty(selectedTheme) &&
            ThemeList.Items.FindByValue(selectedTheme) != null)
            {
                ThemeList.Items.FindByValue(selectedTheme).Selected = true;
            }
        }
    }
    protected void ThemeList_SelectedIndexChanged(object sender, EventArgs e)
    {
        HttpCookie preferredTheme = new HttpCookie("PreferredTheme");
        preferredTheme.Expires = DateTime.Now.AddMonths(3);
        preferredTheme.Value = ThemeList.SelectedValue;
        Response.Cookies.Add(preferredTheme);
        Response.Redirect(Request.Url.ToString());
    }
}

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>
        <compilation debug="false" targetFramework="4.0" />
        <pages theme="DarkGrey"></pages>
    </system.web>

</configuration>

Thanks once again for looking at this.
have a good day.
h

Imar · February 1st, 2013, 01:18 PM

Hi there,

Which version of the book are you using? You posted in the ASP.NET 4.5 / Visual Studio 2012 version, but the code you're showing is from the 4.0 (VS 2010) or 3.5 (VS 2008) book.

Did you download and use the correct files?

Cheers,

Imar

hsc · February 8th, 2013, 01:20 PM

Thanks Imar!.
I downloaded the code for asp net 4 and copied it onto the project and everything works like a charm. Dumbledore would be proud :-)

JohnInPomeroy · February 8th, 2013, 02:32 PM

I get frustrated sometimes.... Type the code in. proofread it. open the page and get some kind of an error or other problem. proofread again looking for case, spaces, right kind of brackets/braces, etc.; load the page. Still have problems. Compare my page with the page that I downloaded. They APPEAR identical. My page still is wacky.

Copy and Paste Imar's code from the download. Success.

I'm not blaming anyone but myself and my apparently lousy typing skills. But still frustrating.