DNN websites, modules, skins and support

Menu: Blog

DNN Bootstrap Skin / Theme Admin interface alignment issues

By:
DNN Bootstrap Skin / Theme Admin interface alignment issues

When you base a DNN Skin (theme) on Bootstrap 3 you run into alignment issues in the Admin interface.
This is caused by the Bootstrap stylesheet that resets all elements to "box-sizing:border-box".
As the DNN admin Stylesheets expect the default "box-sizing:content-box", any padding used will cause issues.
You can fix this by adding an extra reset for the DNN admin interface to your skins style sheet.
This is what I use:

/* DNN Admin */
#dnnCPWrap, #dnnCPWrap *, #dnnCPWrap:before, #dnnCPWrap:after,
.dnnActionMenu, .dnnActionMenu:before, .dnnActionMenu:after, .dnnActionMenu *,
.ui-dialog, .ui-dialog:before, .ui-dialog:after, .ui-dialog *,
#RibbonBar_ControlPanel, #RibbonBar_ControlPanel:before, #RibbonBar_ControlPanel:after, #RibbonBar_ControlPanel *, #RibbonBar_ControlPanel *:before, #RibbonBar_ControlPanel *:after, /* DNN6 CP */
#ControlBar_ControlPanel, #ControlBar_ControlPanel:before, #ControlBar_ControlPanel:after, #ControlBar_ControlPanel *, #ControlBar_ControlPanel *:before, #ControlBar_ControlPanel *:after, /* DNN7 CP */
.actionMenu, .actionMenu:before, .actionMenu:after, .actionMenu *, .actionMenu *:before, .actionMenu *:after,
.dnnFormItem, .dnnFormItem:after, .dnnFormItem:before, .dnnFormItem *, .dnnFormItem *:after, .dnnFormItem *:before,
.ui-widget, .ui-widget *, .ui-widget *:before, .ui-widget *:after
{
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

(The browser specific lines could be removed)

But when you do that, there's one minor issue that remains.
The alignment of the close button in DNNs modal pop-ups.
I have seen this issue with my own skins and a lot of other third party BS3 based skins.
As the pop-ups are the first thing we switch off, I did not previously spend time of fixing this.

Today I did.
I found that the DNN Admin stylesheets set the box-sizing:border-box for one element, the close button.
Don't ask me why, but that was causing this issue.

You can fix this with an extra reset:
/* Pop-up close button */
.dnnFormPopup .dnnModalCtrl .ui-button, .dnnFormPopup .dnnModalCtrl .ui-dialog-titlebar-close{box-sizing:border-box !important;}

I hope that help others with the same issue.