Making and applying a theme for your ASP.NET 2.0 site

You start out with your existing site – it has the controls you want, but not the “look and feel” (layout, colors, etc.)

You decide you want to have all the pages adopt a theme.  Ok, so no one really thinks like that.  You decide all the pages should have some common look-and-feel to them (text coloring, formatting, whatever).

The 2 things you’re most likely (IMHO) to use in the themes support are:

  1. Skins
  2. CSS stylesheets

(Yeah, I know, “CSS stylesheets” goes right after “ATM machine” and “Sahara Desert”)

First, we decide we want some CSS so we can do some formatting, set the background color, whatever.

Right-clicking on our solution node (The C:\…\WebSite1\ node) you can add a theme folder by selecting that type of ASP.NET folder to add:

 

Once doing so, you get to pick the name of this gorgeous new theme:

Since I have all the creativity of an uncooked S’more, I’m going with Foo

So, we have a theme, but nothing actually in it.  Since our goal is CSS, let’s add a new item

In the resulting dialog, the default is already StyleSheet, and I lazily accept the default for StyleSheet.css to be the name:

Our new CSS file opens up with an empty body tag waiting for our muse to strike:

Since I actually happen to indeed want these changes to be scoped to the body, I place my cursor after the opening bracket and hit enter.

A few things happen:

  1. The autoformatter apparently prefers MSFT-style (opening brace on its own line) over the template’s K&R style (opening brace at end of existing line) and as such, it moves the opening brace even though my intent was just to open an empty line between the 2 braces.
  2. Very nicely, the cursor is indented 4 spaces for me already.  I had spent enough time in Perl to get used to 3 spaces, but I’ve had enough 4-spaces-and-tabs-are-fully-evil Kool-Aid to be cool with this now.
  3. Since VS’s web support is all spiffy and CSS-aware (hey, it’s a CSS file, it should be), I get an Intellisense list of options for what to define here.

Since my goals are 1) centering and 2) change coloring I first go for the text-align.  After typing “te” it’s the one selected:

 

Since it’s already selected to what I want, I now just hit “:” to get over to the value I want to assign:

Now I can just arrow-down once (to select “center”) and hit enter:

 

I’m a little surprised it doesn’t enter a ; for me, but no biggie, I put one in and hit enter to get to my next setting:

This time I want background-color which is already in the viewable portion of the list, so I just arrow down a few times to get to it:

Hitting : (since what I want is selected) shows the list of options:

 

Since it catches my eye, I go with Fuchsia (hey, it’s fun to say, like guacamole).  This time I arrow down to it, and rather than hitting Enter (which I now know won’t put the ; in for me), I go ahead and type “;” instead to finish the line.

You get the point by now, so I finish it up with a RGB color for the text (yes, just color, not font-color, text-color or foreground-color) so our final likely-to-be-ugly CSS:

Mostly to prove a point, at this stage I go ahead and hit F5 to save, build the site, and run it under the debugger.  The first effect is that since the web.config doesn’t currently have it enabled, I get the prompt asking me if I want to enable it in the web.config

Since this post is getting kind of long already, I go ahead without debugging (“Run without debugging”).  Of course, the resulting page doesn’t look any different:

As many of you have no doubt already surmised, adding a theme to a solution doesn’t actually mean it automatically applies to anything.

While we could edit the individual pages and tell them to each use this Foo theme, that wouldn’t be overly useful for me, so I want to go ahead and set it solution-(site-)wide.  To do so, you edit your app’s web.config and specify <pages theme=”Foo” /> as part of the system.web section.

You may have noticed no web.config file listed in solution explorer – that’s just reflecting that we haven’t changed it yet – it’s still present on disk.  To get it to show up as part of the solution, we just need to “add existing item”:

 

Now it shows up in our solution:

Now we double-click on it to open it:

Not a lot to look at there, but we know what we want to add, so I first create an opening system.web tag (unfortunately here, the Intellisense is busted, but I know from example what I need to put in):

Now I hit enter and put in the pages tag:

Now I can hit Control-F5 (since I just want to run, not debug) to get the site to run again:

 

So, now the CSS is being applied, so we’re half-way home.  Now we just want to have a “skin” for the label control.  A “skin” is a (IMHO, silly) name for a default set of properties for controls.  Since the controls (in this case, labels) that I’ve already added to the site don’t specify anything besides text, they don’t have a “look and feel” about them just yet.

As others have noted, the easy way of creating a skin is to just create (in a throw-away page, or an existing page, or whatever) a control with the look-and-feel that you want, then copy it over to the .skin file and remove the id attribute (yes, that last part is very important) and any other attributes you don’t want overridden (in our case, the text attribute, since we want each label’s text to be what it is, not specified by the skin).

So I ma
ke a throw-away page and put a label in it:

So far, so good.  I hit F4 to pull up the Properties dialog so I can decide what I want to set:

Changing a random bunch of things:

Now my label still says “Label” but in a very odd way:

Well, whatever, I have the “skin” that I want for my labels.  I switch over to the “Source” view of the page to check out my asp:Label tag:

I copy the part of the source I care about (the asp:Label) for creating the skin file:

Now to create my new skin file:

This creates a skin file with the default contents:

Now we just add in the selected text of the asp:Label control from our throwaway page and remove the ID and text attributes (see above for explanation).  Obviously, now that we have our skin file created, we can delete the throwaway page as well.

Now we hit Control-F5 to run the site again and we see that both our CSS and the skins are both in effect:

Whoops – the border on the label was so ridiculously big that it covered up the normal text that was already there.  Just for a quick sanity check, I remove the BorderWidth attribute from the skin (since it’s so ridiculously large) and re-run to show the original text is still there.

There – I hope this (very simple) intro into creating a theme for your ASP.NET 2.0 app has been helpful.  It’s likely full of far too many screen shots, but you can blame OneNote and Windows Live Writer for making it far too easy for me to do this šŸ™‚

Advertisements