This post is about a fairly well-known skinning annoyance on DNN 4.x (apparently it has been eliminated on DNN 5). There have been several posts about it and several workarounds suggested, however none seem to work completely. I am starting this thread in case someone can share a reliable workaround without side effects.

Problem:

Regardless of the the Alignment setting of a module, if the admin skin is loaded (e.g. when module showing an "edit" control") the module always gets center alignment. This is because DNN inject the class "DNNAligncenter" class to the container when Admin skin loaded. I have found it very hard to override and retain functionality.

The frequently quoted solution is to override the DNNAligncenter class in the skin.css file, e.g.

.DNNAlignCenter{
text-align:left
}

or go to the main container that wraps around the site and specify left-align:

#mainConatiner td {text-align: left;}

... however these prevents you from setting centered alignment on any module when you do want centering.

Does anyone have a solution that overrides the centering when the admin skin is loaded, but does allow module alignment to be set to centered for selected modules (and that does not involve recompiling the DNN core)?

Here's my Gemini ticket about the issue:

DNNP-10566

Skinning

Stop adding "DNNAligncenter" class when Admin skin loaded

Hello,

Have you tried setting the DNNAlignCenter class to left, and then when you need to center the content in a container, create a container just for this, ie:

[ DROPDOWNACTIONS ]< h3 >[TITLE]< / h3 >
< div class="dnnC_content_transparent" align="center" id="contentpane" runat="server" >< / div >
[ ACTIONBUTTON:1 ]


Your other option would be to use Snapsis page blaster, it can be used to strip out HTML code from a page that you do not require, so you may be able to use it to strip out the DNNAlignCenter class.

That is a very good idea! I tried it out and it did solve the annoyance of centered content under the admin skin. I turned your idea around a bit actually - I removed the setting of DNNAlignCenter class to left in my skin.css and created a special container in which the main "contentpane" DIV was set to left-align, then in Site Settings set this as the Admin Container. Same effect as your idea I think.

But now I have a new problem - can you advise on this?

When I want to center a module on the page (under regular skin, not admin skin), under the above setup I should just need to set the alignment to Center in the module settings. And sure enough, when I do this I see the DNNAligncenter class has been injected into the content pane DIV of the module's container. However the module is not centered on the page! At least it isn't in IE8 and FF3.5. However if I turn on IE8's "Compatibility View" the module is centered. What is going on? Below is the complete HTML of the module I am trying to center:

< div id="dnn_ContentPane" class="ContentPane">
< a name="490"/>
< div>
< h1>
< span id="dnn_ctr490_dnnTITLE_lblTitle" class="Head">Account Login< /span>
< /h1>
< /div>
< div id="dnn_ctr490_contentpane" class="containerpane DNNAligncenter">
< div id="dnn_ctr490_ModuleContent">
< div id="dnn_ctr490_Login_pnlLogin">
< table cellspacing="0" cellpadding="3" border="0" width="160" summary="SignIn Design Table">
< tbody>
< tr>
< td class="SubHead" align="center" colspan="2">
< div id="dnn_ctr490_Login_tsLogin" trm="0" tabs="dnn_ctr490_Login_ActiveDirectory,dnn_ctr490_Login_DNN" csshover="LoginTabHover" csssel="LoginTabSelected" css="LoginTab">
< div id="dnn_ctr490_Login_tsLogin_lc" class="LoginTabGroup">
< /div>
< div id="dnn_ctr490_Login_tsLogin_c" class="LoginContainerGroup">
< div id="dnn_ctr490_Login_ActiveDirectory" class="LoginContainer" tid="ActiveDirectory" label="dnn_ctr490_Login_ActiveDirectory_l">
< table cellspacing="0" cellpadding="3" border="0" width="160" summary="SignIn Design Table">
< tbody>
< tr>
< td class="SubHead" align="center" colspan="2">
< label id="dnn_ctr490_Login_ActiveDirectory_Login_ActiveDirectory_plUsername_label" for="dnn_ctr490_Login_ActiveDirectory_Login_ActiveDirectory_txtUsername">
< /label>
< br/>
< div id="dnn_ctr490_Login_ActiveDirectory_Login_ActiveDirectory_plUsername_pnlHelp" class="Help" style="display: none;">
< /div>
< /td>
< /tr>
< tr>
< /tr>
< tr>
< /tr>
< tr>
< /tr>
< tr>
< /tr>
< /tbody>
< /table>
< /div>
< div id="dnn_ctr490_Login_DNN" class="LoginContainer" style="display: none;" tid="DNN" label="dnn_ctr490_Login_DNN_l" onkeydown="return __dnn_KeyDown('13', 'javascript:__doPostBack(%27dnn$ctr490$Login$DNN$Login_DNN$cmdLogin%27,%27%27)', event);">
< /div>
< /div>
< /div>
< /td>
< /tr>
< tr>
< /tr>
< tr height="5">
< /tr>
< tr/>
< tr>
< /tr>
< tr>
< /tr>
< /tbody>
< /table>
< /div>
< br/>
< /div>
< /div>
< div/>
< /div>

yes I've come across this problem as well, the problem with the DNNAlignCenter class is that it just doesn't work.

I have found it messes up the content for areas that you do not wish to be centered, but also fails to center content that should be centered.

For this, create a container as I suggested for centering the content and just don't bother using the alignment options when adding a container to the page - see if that works?