DotNetNuke Tips for Skinning, CSS, and Design

Written by: Ralph Williams
Wednesday, June 10, 2009 8:22 AM 

How this widget helps.

One of the challenges that is often faced when optimizing a DotNetNuke 4.x site, is all of the extra code bloat making it harder for the search engines to find your content that is important. Using the new Relocation Widget that comes with DotNetNuke 5.0 + allows us to overcome some of these challenges. The Relocation Widget will allow you to place your important content at the beginning of your code while moving the less important content (to the search engines) at the end.

Because the replacement widget is achieved through JavaScript, and therefore client-side, your site will still look like you originally designed it, without having to use the trickery as needed with previous DNN versions. Personally, I have been placing the content area above the header in my code and using absolute positioning to place the header back to the top and the content back below the header.(For more information about this style for use with the previous version of DNN check out the tutorial over at DnnCreative Magazine – Issue #25.)

The major downfalls that I have noticed of using this technique are the large learning curve and the inability to use Sticky Footer (CSS technique used to force footer to stay at bottom of the page).

How it’s done.

One of the great things that I love about the Relocation Widget in 5.x, is that it allows me to skin the site as I normally would without having to be concerned about content placement in the code.

1. Skin your site as normal.
2. In place of your Content Panes, create an empty "target" div with a unique id making sure not to include runat="server". This is where your content will appear to be.
   
3. Create new "source" Content Panes as need at the top of your code. These panes are where your content will be entered.
   
4. Add code for replacement widget at bottom of code.
   
5. There are 2 parameters that are needed for the widget.
   1. sourceid – dnn_ + id of the Content pane that you place at the beginning of the code (DNN adds "dnn_" in front of your Content Pane’s ids)
      example: if your ContentPane id is MainContent then,
      
      
   2. targetid – id of the div to which you are relocating your content
      
      
6. The included DNN menu is not an SEO friendly menu, so we will place it at the bottom of the code above the relocation widget code and relocate it to the desired position for the design by using the Relocation Widget.
7. Create an empty "target" div with a unique id where the menu will be located.
   
8. Create another "source" div with a unique id at the end of your code and place your menu in here.
   
9. Add code for Relocation Widget.
   1. sourceid – id of the div where your Menu is in your code.
      example: if the name of your id holding your menu content is "menuholder",
      
      
   2. targetid – id of the div to which you are relocating your menu
      
      

For more information on the relocation widgets chech out Ryan Morgan's post here and Will Strohl's here. For other information about the DotNetNuke 5.x widgets and jQuery check it out on the DotNetNuke website here.

Hope this helps!

Trackback Print

Tags:

Categories: Skinning, SEO

Location: Blogs RalphWilliams.com

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel