Themes & Layout

[Sol]

Hi Guys,

I'm looking for some advice / guidelines on using Themes with an application
I am working on. The application needs to allow people to customize the
appearance utilizing what I would consider to be a Themeing and Skinning
mechanism. What is critical is that this should be as flexible as possible.

What I would like to do is use the built-in Themeing mechanism to allow the
customization, but as we know, the App_Theme folder cannot contain ASPX or
ASCX files. What I really want is for the Theme to dicatate the layout and
hence have Html code. For example if I have a User Control that looks like
the following:

<table>
<tr><td>#ModuleTitle</td></tr>
<tr><asp:datagrid runat="server" id="someGrid" /></td></tr>
</table>

Now I want a user to be able to customize this eg:

<table>
<tr>
<td><img src="leftCorner.jpg"></td>
<td>#ModuleTitle</td>
<td><img src="rightCorner.jpg"></td>
</tr>
<tr>
<td><img src="leftCorner.jpg"></td>
<td><asp:datagrid runat="server" id="someGrid" /></td>
<td><img src="rightCorner.jpg"></td>
</tr>
</table>

Of course, I can dynamically load a user control which is ideal in this
scenario, but it appears as though I will need to create a second Themes
folder to hold all my UserControls. This makes it confusing for someone to
create a new Theme since they would need to add folders and files to both
the App_Theme folder and my own custom Theme folder.

I do want the user to be able to modify / create '.skin' files which will
allow customization of any controls used.

So what recommendations do people have to work around this flaw?

 

[Luke Zhang [MSFT]]

Hello,

I don't think users can create skin file in ASP.NET since thie skins is one
kind of "server resources" and the user should not have write permission to
app_theme folder. If you want user be able to customized a web page, I
think there is two approach:

1. Have users selelct between pre-defined themes.
2. Create a User control with functions which can support change UI.

Luke

 

[Sol]

OK, I got misunderstood.

I don't mean a user creating skin files, but a client who purchases my
application. There will be some pre-defined skins they can select from, but
more critically they will serve as an example which they can customize.

A good example of what I am trying to acheive is the Theme / Skinning
supported by Telligent CommunityServer or DotNetNuke. Both use ASPX and ASCX
files to control layout and load them dynamically at runtime. Looking at
community server you can see that the ASPX & ASCX files really only have
HTML Layout code with the addition of ASP.Net server controls which could be
skinned seperately. This would be ideal since you would create a single
Theme (ASPX & ASCX files) and multiple skins (CSS & SKIN files) giving a
clean seperation between Themes and Skins when talking about an application.

Hopefully this explains things a bit better.

Sol.

 

[Luke Zhang [MSFT]]

Hello,

In ASP.NET, a server control can be with same Theme but multiple Skins:

ASP.NET Themes and Skins Overview
http://msdn2.microsoft.com/en-us/library/ykzx33wh.aspx

SkinID property:
http://msdn2.microsoft.com/en-us/library/system.web.ui.control.skinid.aspx

Luke

 

[Sol]

Thanks for the links, but I had already read those, along with almost every
other Theme / Skinning page I could find.

I understand what a .Skin file is and how to apply different skins to server
controls using SkinId.

What I don't understand is how to create use Skins to change the layout.

e.g. I want to be able to use a Theme to be able to output:

<table>
<tr><td>Title</td></tr>
<tr><asp:datagrid runat="server" id="someGrid" /></td></tr>
</table>

And another Theme to output

<table>
<tr>
<td><img src="leftCorner.jpg"></td>
<td>Title</td>
<td><img src="rightCorner.jpg"></td>
</tr>
<tr>
<td><img src="leftCorner.jpg"></td>
<td><asp:datagrid runat="server" id="someGrid" /></td>
<td><img src="rightCorner.jpg"></td>
</tr>
</table>


I hope I'm making more sense?

 

[Luke Zhang [MSFT]]

I think you may need a customized user control with different skin, which
can render different code acording its property, for example its has a
property named "TitleLeftImage", it can be null or a image file like
"leftCorner.jpg":

<table>
<tr>
<td><img src="leftCorner.jpg"></td>
<td>Title</td>
<td><img src="rightCorner.jpg"></td>
</tr>
<tr>
<td><img src="leftCorner.jpg"></td>
<td><asp:datagrid runat="server" id="someGrid" /></td>
<td><img src="rightCorner.jpg"></td>
</tr>
</table>

Luke