This is quite simple with a little bit of Javascript. Basically you take advantage of two things:
1. The DotNetNuke URL Rewriter includes the tab name in the URL, and
2. Most modern browsers allow you to inject a stylesheet on-the-fly with Javascript.
The solution is to name all the child pages with a common prefix and use that prefix to dynamically inject a stylesheet that customizes the appearance of the page. With this approach, you have one skin that works one way for all pages, but works a different way whenever the page displayed has a name that begins with the designated prefix. (Note: You can give the page any title you wish; it's just the page name that has to follow a convention.)
For testing my solution, I created the following:
1. A skin named "Dynamic" with a single template named "Portal.ascx" and a stylesheet named "skin.css". The solution does not care about either of these names...you can use any names you wish.
2. In the "Dynamic" skin folder, I created sub-folders named "01012006", "01152006" and "01262006". In each sub-folder, I created a stylesheet named "overlay.css" with some styles that override definitions in "style.css". You can put any images specific to these styles in the same folder (or a sub-folder) since stylesheet URLs are always relative to the stylesheet file.
3. I created a page named "Past Issues" and set its skin to "Dynamic - Portal". I created child pages "ISSUE01012006", "ISSUE01152006" and "ISSUE01262006". I set the skin on each to be the same, i.e. "Dynamic - Portal".
4. I put the following code in "Portal.ascx" just below the last <%@ Register... statement:
<script type="text/javascript" language="javascript">
// <![CDATA[
function injectStyleSheet(prefix)
{
var segments = location.href.split("/");
var issue = "";
for(var s=0;s<segments.length;s++)
{
if (segments[s].indexOf(prefix) == 0)
{
issue = segments[s].replace(prefix,"");
break;
}
}
if (issue != "")
{
styleSheet = "<%= SkinPath %>" + issue + "/overlay.css";
if (document.createStyleSheet)
document.createStyleSheet(styleSheet);
else
{
var head = document.getElementsByTagName("head")[0];
head.innerHTML += "<link rel=\"stylesheet\" href=\"" + styleSheet + "\"/>";
}
}
}
injectStyleSheet("ISSUE");
// ]]>
</script>
That's about it. The code kicks-in whenever a page name begins with "ISSUE" (you can change this) is encountered and customizes the appearance.
Nik