Blogger Dynamic View Templates: Fix slow animations, add HTML-code CSS, Changing the background, color theme and the menu

In order to avoid sacrificing too much of the old look and feel, the following Template and Design fixes were applied.

These custom css additions can be directly applied through the Blogger back-end options under Template, clicking the Customize button, next to Edit Html, and then Advanced, selecting Add CSS as follows:

Herein I also adjusted the template view width to 1080px

Re-adding the custom CSS for the HTML code-element

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    /*preformatting*/
    font-family: monospace;
    white-space: pre;
}

» Removing the loading gear, was just a google search away  - kudos to Yogaratnam N.:

.ss,.blogger-gear{
  display: none;

}

» For the page-content's background I added the following:

#main {
        margin: 0px 0px !important;
        background-color:black !important;
        background-image:url(http://lsauer.com/OFSpffCI-sQ/s1600/bg_tw.gif) !important;
}

» For the header-background, lighter font-colors and box-shadows adapted to the darker-background:

#header .header-bar { 
        background-image: url(http://lsauer.com/w615-h308-no/mozilla_aurora-aurora-nighly.png);
        background-position: 0px -20px;
        background-repeat: no-repeat;
        background-color: #000;
        color: #ccc !important;
}
#header .header-bar .title h1, #header .header-bar .title h3 {
        display: inline;
        height: 65px;
        text-shadow: 2px 2px 2px rgba(50, 50, 50, 0.7);
        white-space: nowrap;
}
#header .header-bar .title h1 {
        color: rgba(200, 215, 215, 1);
}
#header .header-bar .title h3 {
        color: rgba(185, 185, 185, 1);
}
#header .tabs li .menu-item {
        margin-left: 25px;
}

Hiding some of the Dynamic View Layout Options was useful as for instance Sidebar would require further css adaptations for the darker background:

.menu li.Timeslide,
.menu li.Sidebar,
.menu li.Snapshot,
.menu li.Mosaic {
        display: none !important;
}

» Finally to get rid of the the slow animations due to CSS transitions being set for all actions:

.overview-panel.start .overview-header, .lightbox-panel.start .lightbox-header {
        min-width: 980px;
}
.overview-panel.start .overview-header,
.lightbox-panel.start .lightbox-header,
.overview-panel, .lightbox-panel,
.overview-panel .overview-wrap,
.lightbox-panel .lightbox-wrap {
        -webkit-transition: none !important;
        transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
}

» To add the menu entries, go to Pages: 

then

and add your custom links: