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. 

This improved version adds a module picker to the edit bar and then minimizes the space used by the resulting longer edit bar. The module picker is great to have.

Leave Comments Here

BEFORE

AFTER 

This image is intended to show you that the edit bar is much smaller than it was. It does not go full width and is shorter so that it covers up less of your page and content.

Zoomed In

Notice that a module picker and a pane picker have been added to the Page Edit Bar.

First add the module picker to the Page Edit Toolbar. DNN 9.8.1 or later.

1. Settings (Persona Bar)
2. Site Settings
3. Behavior
4. More
5. Turn on the "Show Quick Module Add Menu"
6. Save

Next, re-classify the category of the modules you want to exist in the bar.

1. Settings
2. Extensions
3. Edit pencil on the module desired
4. Extension Settings tab
5. Module Category
6. Change to "Common"
7. Save & Close

Finally, add this css to the bottom of your main.css file located here:

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

(This will not work in the portal.css because the Edit Bar is inside an iframe)

Then CTRL+Refresh the page. 

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

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

#editBarContainer {
    width: auto;
}
.editbar {
    height: 41px;
    padding: 3px 22px 0;
    max-width: 793px;
}
.editbar .left-section {
    margin-left: -27px;
}
.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);
}