DotNetNuke Powered!
          
John Mitchell's (mostly DotNetNuke) Blog - DotNetNuke Skin Background images based on TabName
 Thursday, March 23, 2006

Here's a little trick that spawned out of a question on the DotNetNuke Forums.

The question was:

I am trying to get a background image in a table in my skin to change with each page. i.e. Home has a faint background image saying "home", News has a faint background image saying "news"

And it got me thinking that it would be cool to be able to use the TabName dynamically.

After a little digging, it turns out that the TabName property is easily accessible from a DotNetNuke Skin:

<%= PortalSettings.ActiveTab.TabName %>

Then just make a background image that includes the tabname in it's name and reference it something like this:

<td  style="background:url(<%= SkinPath & PortalSettings.ActiveTab.TabName %>BG.gif)" >

In the above example, if you have an image named HomeBG.gif in your skin folder, then it will be used for the background of that table cell when you are on the home page.

Create another one called NewsBG.gif and it will show when you are on the News page.

The PortalSettings collection has a ton of information in it.  I wonder what other cool things could be done with it? ;)

3/23/2006 4:01:25 PM (Central Standard Time, UTC-06:00)  #    Comments [8]
3/25/2006 5:58:50 AM (Central Standard Time, UTC-06:00)
very very cool John! That tip will come in very handy for a project I'm currently working on, thanks!
7/20/2006 1:34:20 PM (Central Standard Time, UTC-06:00)
You are on to something really powerfull here...

I used the idea to add a class to wrapper div to allow easy CSS changes per tab. Example:

div id="wrapper" class="<%= PortalSettings.ActiveTab.TabName %>"

The problem is the tab names use spaces so "About Us" added the class "about" and "us" to the wrapper div. Is there a way to get the TabName command to URL or otherwise encode?
7/20/2006 1:42:10 PM (Central Standard Time, UTC-06:00)

Glad you like it.
For the space thing you could use the TabID instead

div id="wrapper" class="<%= PortalSettings.ActiveTab.TabId %>"

Or you can remove the spaces like this:

div id="wrapper" class='<%= PortalSettings.ActiveTab.TabName.ToString().Replace(" ","") %>'

7/20/2006 4:01:13 PM (Central Standard Time, UTC-06:00)
Works perfectly!

Sample: http://hometeamrealestate.ca/default.aspx (site still under construction)

The masthead and body images are now control by a single, easy to modify line in the skin.css file. Defaults mean the client can make new standard tabs without knowing the CSS.



9/5/2006 5:51:37 AM (Central Standard Time, UTC-06:00)
I am using the same method to show page title in my skin just above my navigation menu. It works fine for everyone except for Admin/Host Users.
I get the Server Error with following description in the URL:

"The+Controls+collection+cannot+be+modified+because+the+control+contains+code+blocks+(i.e.+%3c%25+...+%25%3e).&content=0"

The error disappears as soon as i remove the dynamic page title.

Any help would be greatly appreciated.
9/5/2006 5:54:21 AM (Central Standard Time, UTC-06:00)
I forgot to mention that i am using DNN 3.3.4
9/5/2006 7:00:42 AM (Central Standard Time, UTC-06:00)
http://blogs.snapsis.com/PermaLink,guid,381f9036-432e-468c-bc2e-b52ab86f12ea.aspx
4/26/2008 1:02:05 PM (Central Standard Time, UTC-06:00)
Cheap Low Cost Cialis
Name
E-mail
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):