With the latest major update to DotNetNuke, there have been some questions as to what has changed in skinning for DotNetNuke 6.0. One big change has been the introduction to the new Manage button automatically into the containers. Some love it, some hate it, and others seem to still be undecided.
I actually like it. Although, the lack of placement control has been a little annoying. It was said the reason to purposefully take this out of the skinner’s hands was to help provide consistency. While I can understand that, as I am a huge proponent of consistency, there are several scenarios where having control would be helpful. Just one example would be when the module and container have a very small amount of content. The manage buttons and text seem to get a little lost.
Simplified Container Coding
The introduction of the Manage button introduces a couple of other changes to skinning a container. There is now no need to have a DNNActions menu, as this is directly replaced by the Manage button. There is also no need for the Action buttons, as these are now also located within the Manage button menu. This leaves skinning for the new DNN6 container, extremely simple, which I love! Here is my code for a normal container:
<%@ Control language="vb" CodeBehind="~/admin/Containers/container.vb"
AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.
Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/
Title.ascx" %>
<div class="NormalContainer">
<h2><dnn:title runat="server" id="dnnTitle"></dnn:title></h2>
<div id="ContentPane" class="ContentBody" runat="server">
</div></div>
That’s it! Nothing else is needed. That is the kind of improvements I can embrace!
Overcoming the DNN 6 Manage Button Alignment
Now, back to my issue with the positioning of the aforementioned Manage button. I am sure the guys at DotNetNuke had a reason for placing the Manage button where they did, however, I personally feel that it would be best placed on the top right of the container. Module titles and text don’t always extend to the right edge of the container making it easier to spot. Just add this CSS to your stylesheet.
.dnnActionMenu { right:10px; left:auto; width:95px;}Explanation of the CSS
The “right:10px” moves the button to the right side with a margin of 10px from the edge. The “left:auto” overrides the default CSS for the manage button. And, the “width:95px;” is the width of the button and is necessary to keep the manage button from growing with the right side of the button planted to the right edge of the container as you drag the Manage button around.