DotNetNuke Skins and Resources by ThinkofDesign

Posted by Vasilis on Saturday, May 30, 2009

CSS Selectable Pages 

Consider the following scenario. We have a portal with decades or hundreds of pages. Some of those pages include content that needs special styles to look good. Inline CSS is not an option as we talk about a good amount of CSS code. What we need is CSS selectors that will target on those specific pages. How can we do that?

Introducing CSS Selectable Pages

I always wrap my skin code in a DIV. It helps me in several ways, like avoiding CSS conflicts or writing styles for a page skin without having to create an additional CSS file.

That usually goes like this:

<div id="skinname" class="pageskinname">
 
 skin code
 
 </div> 

Here comes the cool part. Wouldn't be nice if we could add a dynamic CSS class to this DIV? A CSS class that will be generated by DNN and will be unique for every single page of our site. Oh yes, that's what we need. And know what?  It is possible and it's also dead simple.

 <div id="skinname" class="pageskinname page<%=PortalSettings.ActiveTab.TabID %>">
 
 skin code
 
 </div> 

Isn't nice? Isn't great? How come I hadn't thought of this before? That's what came into my mind the first time I thought of this trick!

<%=PortalSettings.ActiveTab.TabID %> will generate the current page ID. So when we browse a page with ID=75, our code on the client will look like this:

 <div id="skinname" class="pageskinname page75">
 
 skin code
 
 </div> 

Now we can go in the stylesheet editor and write some styles for this particular page.

 .page75 p { font:normal 1.1em/1.5 Tahoma,Sans-serif; color:#555; } 

That's it. Simple and powerful. A technique that obviously adds efficiency to our skin code.

Comments

Name (required)

Email (required)

Website

Enter the code shown above:

Notify me of followup comments via e-mail