Posted by Vasilis on Friday, May 21, 2010

Hook your DotNetNuke Skins

In this article I want to share some ideas with you about making a DotNetNuke skin more CSS friendly. We will actually get the "CSS Selectable Pages" idea and extend it... quite a lot. What we are going to discuss here is a part of the Reactor DNN skin implementation.

Let's again consider some scenarios but this time let's be brave and make them more involved. We have a portal with many pages and with many different modules on some of those pages. We made a custom skin which includes several page skins and many containers so our portal looks really nice. Then our picky partner comes in and starts complaining about... well, you know, the details. A different background here, a larger font there... And the worst is that he is right. But what should we do? More page skins just to fix that border color? More containers just to reduce the margin? And what about the new pages we are going to add next week? Oh man, this will never end!

OK, I think you got the idea. Time to get to the real stuff. A DotNetNuke page consists of several elements. Some of them are common web design elements like header, footer, layout columns and inline stuff. Other are DNN specific, like panes and containers which are the ones I want to focus on in combination with the main page wrapper.

The following simplified markup can describe the above page skeleton.

<div class="skin-page">
     <div class="pane1">
         <div class="container1"></div>
         <div class="container2"></div>
     </div>
     <div class="pane2">
         <div class="container3"></div>
         <div class="container4"></div>
     </div>
 </div>

Although the above looks fine, it is not really enough CSS friendly. Let's write it again but this time we will make the effort to add some more CSS hooks.

<div id="page<%=PortalSettings.ActiveTab.TabID %>" class="skin-page skin-modern">
     <div class="skin-panes skin-pane1">
         <div id="<%= ID %>" class="containers reactor-containers con-green"></div>
         <div id="<%= ID %>" class="containers reactor-containers con-green"></div>
     </div>
     <div class="skin-panes skin-pane2">
         <div id="<%= ID %>" class="containers reactor-containers con-yellow"></div>
         <div id="<%= ID %>" class="containers reactor-containers con-orange"></div>
     </div>
 </div>

The same with self explaining IDs and CSS class names.

<div id="page[tabID]" class="skin-page skin-[pageSkinName]">
     <div class="skin-panes skin-[paneName]">
         <div id="[containerID]" class="containers [skinName]-containers [containerName]"></div>
         <div id="[containerID]" class="containers [skinName]-containers [containerName]"></div>
     </div>
     <div class="skin-panes pane2">
         <div id="[containerID]" class="containers [skinName]-containers [containerName]"></div>
         <div id="[containerID]" class="containers [skinName]-containers [containerName]"></div>
     </div>
 </div>

If you are enough savvy with CSS, you already got the idea. Let me explain the additional hooks we just added one by one.

In the page wrapper we added:

page[tabID]
so we can select specific pages on our portal
example: #page32{}

skin-[pageSkinName]
so we can select pages with a specific page skin applied to them
example: .skin-modern{}

In the panes we added:

skin-panes
so we can select all panes
example: .skin-panes{}

In the containers we added:

[containerID]
so we can select a specific container
example: #ctr354{}

containers
so can select all containers
example: .containers{}

[skinName]-containers
so we can select all containers that belong to this skin
(useful only if we are using containers from multiple skins)
example: .reactor-containers{}

[containerName]
so we can select modules using the same containers
example: .con-green{}

What we just did? We made our own small CSS framework! What can we do with it? We can select pretty much anything on any page of our site. Here are some examples:

All containers on a specific page:
#page32 .containers{}

The green containers on a specific page:
#page75 .con-green{}

The containers in a specific pane on a specific page:
#page75 .skin-pane2 .containers{}

The panes on every page with a specific page skin applied to it:
.skin-modern .skin-panes{}

I could really keep writing examples for hours.

Adding CSS hooks to your layout, gives you more control over the appearance of your web pages. Adding CSS hooks to your DotNetNuke skins, helps you reduce the page skins and containers you have to make to accommodate every design need and therefore it helps you become more productive.