Overview

Drastically reduce the space used by the DNN Page Edit Control Bar at the bottom of the page when activated. This is only css and only cosmetic. This effectively gets the DNN Page Edit Control Bar out of your way but keeps it available just as before. This is especially helpful for PlantAnApp users since parts of the PAA interface often slip under this bar and become inaccessible. 

Leave Comments Here

BEFORE

AFTER

Add this to the bottom of your main.css file located here:

/DesktopModules/admin/Dnn.EditBar/css/main.css

Then CTRL+Refresh the page. That is all there is to it.

* Note: this will probably need to be reapplied after a DNN upgrade

/*the following will minimize the space used by the DNN page edit footer bar*/

.editbar {

    height: 41px;

    padding: 3px 22px 0;

    max-width: 234px;

}

.editbar .left-section {

    margin-left: -27px;

}

.editbar .left-section ul li button {

    text-indent: -1000px;

}

.editbar .right-section {

    padding-right: 0px;

}

.editbar .right-section ul li {

     margin-left: 0px;

}

.editbar .right-section ul li button {

    width: 62px;

    margin-right: -18px;

}

The following was added later. The following CSS is needed to reduce the size of the underlying iFrame that still exists where the edit bar used to be, which is all the way across the screen at the bottom. Leaving the iframe there and invisible effectively makes it impossible to click on things at the bottom of the screen. You can add the following to any CSS container that applies to the page or the site, like the portal.css file and it will reduce the transparent iframe and make the reclaimed space at the bottom of the screen clickable.

iframe#editBar-iframe {
   max-height: 45px !important;
    max-width: 713px !important;
    vertical-align: top;
    border: dotted 1px white;
}
.editBarFrameContainer.personabar-shown {
    max-height: 45px !important;
    max-width: 713px !important;
    border: dotted 1px rgb(245, 248, 34);
}