How to Unsplit the Toggle Controls and Dockbar

As you can observe the add and edit toggle controls are parked at top left side of the page and Administration dock bar at top right side of page.
But if we give the same design to the client or any non technical person(Administration of CMS),it is really bit confused to the user.So that here i am going to tell how to unsplit those two controls i.e both the controls will rendered under one dock bar as following image shows

Unspliting the Toogle controls and Administration controls

---

1. Copy init_custom.vm from docroot/templates to docroot/_diffs/templates
2. Open the init_custom.vm from docroot/_diffs/templates
3. It contains only one line which splits the dockbar
4. Just comment the line and save it(Add # start of the line to comment in velocity)

##set ($css_class = "${css_class} dockbar-split")

5. Run the ant-deploy
6. Refresh the screen then you will get the screen which is shown earlier.

Now lets move on to how to set the styles for this Dockbar

Setting the Styles to the Dockbar

---

1. Open common_custom.css under docroot/_diffs/css/common_custom.css
2. Search for .navbar-inner which is under .dockbar class definition
3. Change the value of background attribute as you need

.dockbar {
  .navbar-inner {
   background: #F9901A;

   .container .btn-navbar {
    color: #FFF;
   }
  }
............
............
}

Sample Image: