Themes & Master Pages - Are they enough ?

by JoeStagner 9/17/2007 3:20:59 PM

I’m not a graphics designer, not even close.

In fact, I’m what you might refer to as esthetically challenged.

So lately I’ve been toying with the idea of building an ASP.NET based CMS, mostly due to my frustration about the lack of .NET based options when compared to PHP.

So I’ve been working on application architecture and ASP.NET offers lots of great synergies, but one place I’m stuck is in the area of UI abstraction for the purpose of themeing.

I understand how themes and Master Pages work technically, but my lack of design acumen leaves me struggling when evaluating them for complex UI design.

So, to get me started I picked up a copy of Jacob Sanford’s new book….

ASP.NET 2.0 Design – CSS, Themes and master Pages

JacobSanfordBook

I’ll blog a review and probably do some videos from what I learn, but in the mean time…..

What are YOUR thoughts about Themes and Master pages ?

What are the issues, tips, tricks, gotchas ?

Are Themes & master Pages flexible enough to serve as a templating engine for an application like Joomla or am I better off building an HTML/CSS skinning system from scratch ?

Thanks!

Currently rated 3.0 by 2 people

  • Currently 3/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Related posts

Comments

9/17/2007 6:25:41 PM

Honestly I fell just like you did. PHP has all the good free stuff and I have been so tempted to go out and learn PHP so that i could work with a drupal, wordpress or Joomla. So i looked at all the options from ASP and they are all too complicated and no user support to find themes. My buddy and i just chocked it up to .net developers are just out for profit and aren't willing to give anything away. But two days ago i saw the My Web Pages Starter Kit and tested it out. I can definietly build of of this. They are a couple of things i didnt like but what i loved was the fact that there was some documentation and you can simply upload a new theme folder with the skin and css files and it will find it and allow you to switch to that theme through the interface. Preety sweet. I think its flexible enough to start building a few plugins and make nice and robust. Better than writing and designing that infrastructure myself

Rob

9/17/2007 6:38:17 PM

I want to share something regarding master page. I didn't find enough flexibility to it. Because I don't want to load master page with every page I called. Master page I think would be fine if it will load for the first time and every time other pages will load to the master container but master page will not be loaded again. I have a menu tree on master page. So any page tagged with master page is called i need to bind the menu again from the DB or from the Session as master page itself with the called page loads again. This is the problem that I faced

Thanks
Bari
Analyst Programmer

Aminul Bari

9/17/2007 7:28:15 PM

Master Pages Problem: when use master page , and you put some controls in the content page, if you use Page.FindControl() method, you offen get object is null exception.

key

9/17/2007 9:13:33 PM

I definitely like the reusability concepts in master pages, but I haven't quite figured themes out quite yet. Skins are some facet of themes... I think? Anyhow, back in the ASP classic days, I was a big fan of server side includes, and master pages seems like a much better way to accomplish the same goal

Scott Bateman

9/17/2007 9:42:07 PM

In general i like concept of Themes, but...

In few projects I tried to use themes, but sooner or later I reverted to manual css. Main reason is that Theme will load all css files for EVERY page it is used in, and more important if
I have IEhacks.css I cannot "tell" to theme "please load this file last"!

For skin files I found one practical application: to convert complex controls (like login) from tables to divs.

Maybe my objections come from misunderstanding themes, but those are my experiences.

Milan

9/17/2007 10:38:23 PM

Try the Umbraco CMS which is reletavely easy to set up and configure. Doing anything in it requires XSLT which is a pain because it's very verbose(and it's nto strongly typed). I miss a decent XHTML editor and a XSLT one in it. If you can create a .NET solution than does not require XSLT that will be supurb.

Not had a change to try nested master pages that are new in VS2008 but surely them, TinyMCE or FreeTextBox should be able to knock a pretty decent CMS up. Add your Ajax knowledge and you'll be miles ahead of the pack. Will your CMS project be open source?

Vesuvius

9/17/2007 10:54:34 PM

I have looked at several ASP.NET content management systems, such as Umbraco and AxCMS. They do not serve our needs, as we can not imagine our clients using such a system. The problem being that these systems expose way to much technical details or have a convoluted work flow. Umbraco has you editing XML and using custom tags. AxCMS will fill your screen with pop up windows when your editing your content.

I think there are two distinct ways of designing a CMS architecture. Either you define content types up front (such as article, page, product page, product overview, blog, blog post etc.) or you break all content up into small pieces (such as text, rich text, image, author, etc).

The first architecture would allow you to define a 'template' for showing the content. This could be a regular .aspx page, so if you add a news article, the fields are defined in the database (publish date, archive date, title, and body). It will always use NewsArticle.aspx to show the content, so there you can define the master page and theme. I think theme can be made variable, master page not (since an .aspx page and a master page are closely related, content place holders must be matched).

The second architecture is very abstract. I think the system must be able to assemble all pieces of content and dynamically create and add controls for displaying them to an essentially empty page (how could there be an .aspx page if you don't even know the number and type of fields to display). In this architecture you can give users complete freedom to build up a page, but it comes at a cost. The CMS becomes difficult to use, and I think also difficult to develop. Themes and master pages would probably completely break, because your building pages 100% dynamically.

Umbraco and AxCMS use the second architecture (Umbraco builds pages using XSLT). I tried to look at Community Server, but I can't even find the source code to download. I have a feeling it uses the first architecture, because it seems to have predefined content types, such as blogs, forums, etc.

This comment doesn't even touch the topics of site maps and localization, which are also huge topics. I firmly believe the first option will allow you to use most of the ASP.NET built in functionality.

Let me know what you think!

Math Random

9/18/2007 12:46:01 AM

In my experience Themes and Master Pages are not enough, and not by a long way.

I have found Themes to be of little practical use. They introduce as many problems as they solve and, as a result, they add no net value. Most of what you can do with Themes you can do with CSS, and the latter is an industry-standard approach to separating presentation from content.

I have found Master Pages to be good value.

To create a Content Management System with a flexible templating engine, there is one piece missing from the ASP.NET toolbox: a Skin system. By a Skin I mean an abstraction of the HTML.

Let me give you an example of how things should work, in my opinion. On the ASP.NET page or user control, we should be able to place a control that defines an item of content, and I'll use an Article as an example:

<cms:Article ID="12" runat="server" />

For each type of server control, there can be a matching skin. Here is an example:

<skin appliesTo="Article">
<div class="article">
<h1><article:Title /></h1>
<p><article:Summary /></p>
<article:Content />
</div>
</skin>

In this way we have completely separated content, markup, and styling. The content is defined by the server control. The markup is defined by the skin. The styling is defined by the CSS file.

The site-wide skins would go in a Skins.xml file, where the appliesTo attribute shown above specifies the type of server control to which the skin would apply. But in addition to a site-wide skins in the separate Skins.xml file, the page designer can also specify a control-specific skin, like this:

<cms:Article ID="12" runat="server">
<skin>
<div id="hero">
<script type="text/javascript">
CreateSilverlightArticle('<article:Title />', '<article:Content />');
</script>
</div>
</skin>
</cms:Article>

In this way, the page designer can decide that on the home page, an article is presented using some cool Silverlight control, whereas on all other pages the skin defined in the site-wide Skins.xml file would apply to an article.

ASP.NET already provides the roots of such a Skin system, by way of its Control Adapters. But in their raw form, the Control Adapters require too much coding and too deep an understanding of the ASP.NET Control system. From a developer's point of view (or better yet, a designer's point of view), the Skin system should be fully declarative, as shown in the above examples.

Clearly my examples are dirt-simple, but I would argue that a complex system that works can evolve only from a simple system that works. And I believe that such a simple Skin system would be of great value to a flexible content management system.

Anyway, that's a gut reaction from someone who spends his life crafting HTML and CSS to present online content.

Alister Jones

9/18/2007 2:08:58 AM

I'm working on a system for my website that uses Themes for Templating my website. The way I do this was inspired by the template system of phpBB.
In the theme folders I have css, javascript, xml pages (used to configure which javascript will be used by which page) and template pages (tpl files).

The template files contain plain HTML along with comment tags <!-- BEGIN Category --><!-- END Category --> and "value" tags {CATEGORY.NAME}.

My aspx pages only contain PlaceHolders which are replaced at run time threw my Template classes. This will allow me to let visitors create their own templates. I am not good with UI design so letting visitors contribute is a major plus. I have a base template class which every other template classes inherit containing the basic functions such as template loading, template fetching, template replacement, path correction (so the paths points to the correct template directory), add javascript files to the page header, etc.

I also use the Resources for special label tags {LABEL:SECTIONS} making the website available for more than one language. What I do might not be the best but it suits me well right now: I open the right resource file using a DataSet, scroll through every value and replace them in the current buffer.

Eventually, I will also create a system for caching that will depend on theme and language.


The website is still under construction but the project is to make some kind of Web-Based Duelling game.

Zach Bora

9/18/2007 2:17:12 AM

I'm in the same boat with design. I rely on other people for that and I generally stick to developing the solution architecture and programming. I use Master Pages regularly but I have not worked with the themes feature built into ASP.NET. I would hope that the ASP.NET themes would be useful enough that you would not need to create your own from scratch. I will follow your blog to find out what you discover.

Jeff Suddeth

9/18/2007 4:35:03 AM

When I begin laying out a new site, I usually use Expressions Web to grab the CSS templates as a starting point. Then, I take the CSS "table" and place it in my master page and use the CSS in my theme. It works, but to me, it's too many steps.

Jason

9/18/2007 4:43:31 AM

My only complaint is that master pages aren't allowed in the theme folders. This really limits your choices when you want to create wildly different layouts for the same master page (unless you're one of those csszengarden.com people).

In some cases, I want to have additional elements available on the master page for some themes. This isn't possible to do, even if you're a genius with CSS layouting.

This is probably why excellent blogging tools like BlogEngine.NET are not using ASP.NET themes! I hope MS will allow this in the next version of ASP.NET.

JJ

9/18/2007 4:58:53 AM

Well, to be honest, they are and they aren't all they've cracked up to be. As a seasoned XHTML veteran who writes web pages by hand and who is just getting started with ASP.NEt, I've used them a time or two myself and although while not as aesthetically challenged as your profess to be, I find they leave me wanting a bit. To be honest, there are aspects of both that I can do just fine with plain old semantic markup and a little JS and CSS as needed without all the falderal and baggage of Master Pages and themes.

But then again, part of this also has to do with how some controls are natively rendered in ASP.NET and some things that you just don’t seem to be able to do that you can when you control the markup yourself.. But I could write an entire article on that one, so I digress; back to your question.

They (Themes) basically do what CSS already natively does only their primary focus is to affect server side control appearance via a combination of the skin file and a css file. They also provide an easy way to switch between site looks and feels so you can have multiple skins, but so does the pre-existing JavaScript based style switcher developed by Paul Snowden (I think that's his name) the Invasion of the Body Switchers guy.

In the JS method, All you do is set a few stylesheets up as type="alternate stylesheet" in the head of your documents, define one as the “default”, include the switch-able JS needed and some method (drop list or hyperlink) for switching between the styles and bingo bango bongo you've just duplicated what themes and skins do. I’m not certain, but I think it might even be that total file size JS, XHTML, CSS vs. Themes and Skins is either a little smaller in favor of the JS method or else it’s a wash. Either way though, I didn’t have to reinvent the wheel to do what I wanted to do, its supported across all browser platforms.

After all, when you use a theme the skin and css file along with any images related to that theme are automatically applied and inserted on page load. Same thing basically with the JavaScript way except the JavaScript way relies on setting a cookie on the visitor hard drive to ensure you get theme of choice upon return. If there is no cookie, you get the default look no worries. I am not sure if this is how ASP.NET does it, but I don’t think so.

I do however know there is a setting in the Membership and Roles management piece where this information can be stored and retrieved as needed in the user settings for when the user visits your site. So, in some cases themes seem like an awful lot of work for minimal returns.

I mean minimal in that with the JS way you still have to have an alternate stylesheet and alternate images just like you do with Themes. The only difference being the Skin File and controls associated with it are added by the server in the pages load process. JS same same, except when don’t call it a page load process, but when the page is rendered in the browser the JS executes, checks for the existence of a cookie calls up the appropriate files and your there, only all this work happened on the client.

continued.........

StumpTheGeek 1 of 2

9/18/2007 4:59:13 AM


Here again, given how some ASP.NET Server controls are natively rendered, if they were rendered appropriately, in such a way as you could apply classes and subclasses as you see fit to ASP.NET controls like you ought to be able to, then you wouldn't need Skin files either as you could do all your presentation with CSS which after all is what it is designed for.

Case and point, take the ASP.NET menu control. If you do nothing the control natively renders as a table. That to me is just way overkill. It however would make sense that it natively rendered as an ordered list, with some sort of an option setting to allow me to switch this to an unordered list as well if I wanted to, but it would render as a list. It should also allow me to add a class to any lit item in the list as well as the result parent ol / ul as the case may be. Lastly, it would allow me to easily add access keys.

Now the minute you hook that menu up to a sitemap the whole ballgame changes somewhat and you loose a lot of functional ability because the things like CssClass and Access key are viable elements in a sitemap file. The menu still renders out as a table, but if you could apply a class to the menu item prior to hooking it up to a sitemap file hooking it to said sitemap file makes this option disappear.

So, here come control adapters rescue, sort of. These force the native table based markup of a menu control to render as an unordered list, but here again, in a menu the order in which something appears can have some measure of importance so it makes sense to make it an ordered list. So what does all this have to do with Master Pages. Well, the goal of a Master is to give you an easy way to control the physical layout of a page, right?

Master Pages by themselves pose their own unique problems as well though because for instance, if you want to have a Google Search form available on every page in your site you just can't put it where you logically think it will go in code because you can only have one form runat server tag. So, to do this you either have to make it so that all of the elements prior to the search form are located “outside” the form runat server tag. Add to this that some controls like the menu do not render as would logically be appropriate and controlling the placement and appearance of page elements just got a bit harrier.

Don’t get me wrong here, of the two, Master Pages and Themes, Master Pages are my favorite even though they annoy me sometimes. For instance, I just love the ContentPlaceholder feature. It’s nice in that I can set up a div in the master page, put a contentplaceholder there and know that every page is going to have that right where I left it so it makes giving folks only certain areas where they can edit a whole lot easier.

Probably more than you wanted to know, but I do like to be thorough, and if I thought the ASP.NET Development team would listen ( I know I can’t have been the only developer to suggest some of these changes to control rendering) I’d welcome the opportunity to sit down with them and go over some things like this. Anyway, thanks for the great question, and allowing me to answer!

StumpTheGeek 2 of 2

9/18/2007 6:03:55 AM

Hi, currently I (student) am developing a project management solution in asp.net and I use the YAML Framework. Therefore I changed and modified it by hand to suit the layout I developed for the application. Although http://www.yaml.de">YAML is kind of complex at the first time, it is a well-structured template and i recommend to look for it. Unfortunatly in asp.net you have to do everything by hand, but maybe someone likes to build a template for that. Bye!

Jan H

9/18/2007 7:01:56 AM

I think Master Pages are a great addition. Many developers had multiple include files (header/footer) on each page, this removed that and makes only one. I use them on every asp.net website I build.

Themes on the other hand have a few flaws which make them unusable. They are not meant to replace css, but instead organize it into groupings, which is good, but in doing so they take away control of which css files to import and how. I always have a print.css file added to my websites so users don't need to waste ink. If this file is included in the theme directory it is added to every page with no media type. This happens for all specific style sheets (print, handheld, ie6 only, etc.). It also means if you have page specific style sheets for complex pages like a gallery it will be sent for any page request.

I ended up rewriting the functionality of themes with more control over the stylesheets. I'm just hoping the next version of asp.net will make some revisions.

James

9/18/2007 7:09:38 AM

Hey Now Joe!

It seems like Master Pages & CSS are area's where you can spend a lot of itme. I wonder how big of an impact Expression Blend will have. That is a tool that I'd like to learn how to use bettter. Nice Post.
Thx,
Catto

Catto

9/18/2007 8:02:36 AM

Why not use DotNetNuke? Skins are easy to create and individual content piece have their own "container" skins.

Brian

9/18/2007 8:15:32 AM

Perhaps DotNetuke will work.

Michael Washington

9/18/2007 9:37:21 AM

personally i prefer PHP and MySQL but im looking into ASP.NET.

I suppose building an HTML/CSS themeing engine from scratch is probably a good idea.

Jonathan Wagener

9/18/2007 11:28:46 AM

I am too very frustrated at the lack of open source asp.net cms solutions compared with PHP and Ruby.

Every web 2.0 site you see out there or even in css showcase sites like www.cssmania.com or appsmania.com all use php or ruby.

I have been using DotNetNuke for some time and have even created a css skin (www.snowcovered.com/.../Default.aspx).

Dotnetnuke is almost there, but even though i am a c# developer, i find it taunting trying to write a module.

Looking forward for something xhtml compliant. ASP.NET has all the tools!

sam

9/18/2007 11:38:09 AM

I've fallen in love with N2 over at Codeplex, www.codeplex.com/n2.
It's EPiServerish, but imho load better Wink

Morten

9/18/2007 12:11:10 PM

A while back, I took a comprehensive look at the themes issue in ASP.NET and was not impressed. I am fairly good at design, and I use the MasterPage all the time. The more I used it, the more I learned how best to use it. Today, I love it!

However, it took me a while to figure out a few things (like ResolveUrl) which make it easier to place my masterpage in almost any folder I want to, and categorize other pages according to content area.

For example, to reach CSS files from a meta tag control that I drop into my masterPage, I use:

<style type="text/css" media="screen">@import '<%=ResolveUrl("~/_global/style/screen.css")%>';</style>

For Javascript files:

<script type="text/javascript" src='<%=ResolveUrl("~/_global/js/prototype.js")%>'></script>

After overcoming this, the rest was easy.

Themes are really unnecessary since all of this can be handled through a regular implementation of sound semantics and CSS. I am liking the direction BlogEngine is going (although I wish there was an implementation for VB).

It will be interesting to see what you decide to do. I agree though that there is an over-abundance of open CMSs available outside of .NET and I keep thinking that I need to break down and learn PHP.

Karls

9/18/2007 1:32:12 PM

If you are looking for a .Net CMS, I highly recommend that you check out Sitecore. I'm currently evaluating CMS's and it and Tridion are the two I have been the most impressed with.

Personally I like master pages and themes. If your css is done well, it really isn't an issue that all the css is included in each page, although when repurposing existing css files it is handy to know that the css files are loaded in alphabetical order. I wish that people would concentrate on using skin files in addition to css though and not in place of it. It is great to not have to set the css classes for your grid every time or to have defaults like whether the columns are sortable or not, but it is a real pain if colors are set in the skin file as this is the same as setting the property on the control (it generates an inline style). Most people don't seem to know when to put something in a skin file and when to use css.

I have converted numerous photoshop files to master pages, and have never had an issue with layout. If I had a wish list it would be that when you have one master page tha inherits from another, it would be nice if the editors would give you graphical support for it.

John Bailey

9/18/2007 6:08:45 PM

I always saw .NET and ASP.NET as a very flexible framework, targeted at developers. My limited exposure and use of Master Pages and Themes has resulted in successful implementations, but that was always targeted at intranets with IE 6 or 7. One thing I always liked was the ability to inject anything I want into the HTML before its delivered from the server to the client. Here I can substitute CSS files based on server decisions/logic like browser versions etc. But, my experiece is pretty limited and based on the other comments here I need to get myself a bit more educated.
Great topic to discuss!

Red5

9/18/2007 10:02:53 PM

Well, we have been developing an ASP.NET CMS called Kentico CMS for more than 3 years. You can find the latest version at http://www.kentico.com.

It gives you full control over HTML, CSS, design and navigation. It also supports the concept of nested master pages and it can be used without XML/XSLT knowledge (you can use ASPX-like code to define the templates and even include your custom .NET functions in the templates). And yes, it uses content types, such as "article", "news", etc. so it's logical and easy to use.

Petr Palas

9/18/2007 11:15:25 PM

2 Alister Jones

I think your wishes can be completely solved by using user controls (.ascx files). Themes were never meant to change markup.

I think it breaks down like this:

Themes can change the looks (colors, background images, margins), and all CSS based layout.
User controls can completely change the markup and interaction (one uses a gridview, the other uses a detailsview)
Http handlers can change the content type completely, instead of HTML you can get RSS, or pure XML that is parsed by Flash or Silverlight

How does that sound?

Math Random

9/18/2007 11:48:49 PM

When we started building BlogEngine.NET it was important to have a powerfull way of skinning the application since most blog users want to create or modify their design. We started using .skin and .css files in the App_Themes folder to avoid inventing our own skinning mechanism. However, it very quickly became clear that it was way too limited. It doesn't let you rearrange HTML and controls and you cannot have master pages in the App_Theme folder.

Instead we decided to do our own skinning mechanism that uses master pages, user controls javascript files, stylesheets and everything else you can use to build a website with. Because of that, people could use the code-behind in their own theme to do things not remotely possible otherwise. We spent a lot of time designing it for extreme flexibility, so I would suggest you took a look at how BlogEngine.NET does theming for your ASP.NET project. App_Themes is not usable for theming a website.

Mads Kristensen

9/19/2007 3:33:43 AM

I think the key problem with offering theming as a feature is you need to decide what can be modified. You can go hippie free love and end up like MySpace and have a fully customizable one page with several sub departments (pictures, music, etc) But thats probably not an option. (free love increases security concerns)

Heres the questions I saw come up while I considered the same thing:
1)How much control/access do content provider users (CPUs) have?
-Can they just edit general settings? (Font, Colors)
-Import CSS for pages?
Answer: Requirements go up as you give more power to CPUs to keep them from compromising the site.

2) How will you make the settings make sense to the user?

3)How will you manage the content physically?
-File Server with web service front end? (Amazon S3, Home brewed etc) If so how will you intergrate with your WYSIWYG the users use to add static page content, so the markup is right and the files end up in the right place.
or
-Will it live with the Web App? How will you isolate users files for web app infrastructure files?

4)How will you talk to other Enterprise apps, so they can reuse your content?

Josh

9/19/2007 2:16:55 PM

I just wanted to comment on what JJ said about how BlogEngine.NET handles its "Themes". I recommend that people download it and see how they coded it. I actually used this method for a site I just did and it worked great! At this point I think Themes in ASP.NET are useless because you can't add a master page to the App_Theme directory. You can accomplish almost everything you need with styling with different CSS sheets and some javascript, or use the method BlogEngine.NET uses.

John M

9/20/2007 8:58:55 AM

Joe,

I;m busy with getting my MCTS Web apps, so after finishing that I'm ready for your demos Smile

Michel

9/20/2007 9:30:46 AM

Joe,

One thing you need to think about is to make sure your CMS has an easy to use installation mechanism that’ll enable an entry-level IT individual to install. In the open-source (LAMP) community, everything is programmed to be easy to use. You can download a CMS like Joomla and you can install it in minutes. The addons or plug ins are well prepared and are easy to install and configure. When you have a product that’s made things easy for you to use, then you will have people contributing to it by creating themes, modules and etc.

The problem with the .Net community is, as one of the commenter above mentioned, that they don’t share ideas and knowledge as much as the LAMP community does. Let’s say I went ahead and installed PHPNuke or Joomla and I had a questions regarding one of the module and I posted a thread on their forums, I’d get an answer almost instantly. This is something the .Net community needs to think about is supporting the little guys. It’s the littler guys that can empower your product throughout the World Wide Web.

I hope my comment is helpful.

Best,

Lawk Salih
www.saantech.com

Lawk Salih

5/3/2008 4:33:44 PM

CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html

:-:s€zær -->> us

5/14/2008 1:53:29 AM

css web template page (example) -- www.css-lessons.ucoz.com/css-template-page.htm

sezer us

Powered by BlogEngine.NET 1.3.0.0
Theme by Mads Kristensen

About your host.

Name of author Joe Stagner
?????

E-mail me Send mail

Calendar

<<  July 2008  >>
MoTuWeThFrSaSu
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

View posts in large calendar

Pages

Recent comments

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008

Sign in