Rounded Corners Toolbar

1. How to create a nice layout with rounded corners Available since 4.4.0.
   

First:
In the layoutmanager select the layout of the application and paste the css code below in the textarea "Extra css-code":

/* Create top-left border-radius */
#wrapper > div {
    border-radius: 30px 0 0 0;
    border-color: transparent;
    box-shadow: 0 0 3px #111111;
}
/* Create square buttons */
.layout-left_menu .x-btn {
    border-radius: 0;
    border-width: 0;
}
/* Top and left border around the map */
.layout-content {
    border-left: 2px solid #ABB9B5;
    border-top: 2px solid #ABB9B5;
}
/* Rounded border around the tools area, some margin to cover border of map */
#content_top {
    position: absolute;
    width: auto;
    border-right: 2px solid #ABB9B5;
    border-bottom: 2px solid #ABB9B5;
    border-radius: 0 0 25px 0;
    margin-top: -2px;
    margin-left: -2px;
    padding-right: 15px;
    height: 45px !important;
}

Marge rondom 15px 14px,
Achtergrondkleur #a1a8bc
This makes the toolbar to resize automatically to the minimum size needed for the tools. Also, it makes the buttons in the leftbar less rounded to look nicer with this design.

Second:
In the layout of the top menu:
Top menu: Hoogte 0px (must be set, cannot be empty),
Achtergrondkleur #E3E4E4

Third:
Change all the colors above to the preferred ones. Layout setting: