Personalize DBMMS SuiteMenu Custom Brand & Colors
How Do I Personalize DBMMS SuiteMenu With My Custom Brand and Colors Using CSS?
Work The Way You Want To Work. 24/7 Workforce Collaboration and the Magic of Google G Suite, organized. Customize with your logo and make the menu your own!
Copy and paste the following CSS code into DBMMS SuiteMenu Styles to configure the color of menu items on the left sidebar menu background and top bar. Then customize a little more to how you want it and voila! A good looking menu structure.
CSS Sample (Dark colours, light menu items)
.content{–main-color: #7A0B0A;} .main-header{–main-color: #7A0B0A;} .sidebar-menu .m-item a.lev1{color: #ffffff; font-size: 200%; margin-top: 15px;}.sidebar-menu .m-item a.lev1:hover{color: #ffffff; font-size: 200%; margin-top: 15px; border-left: 5px solid #7A0B0A;}.sidebar-menu .m-item a.lev2{color: #909090; font-size: 110%; margin-top: -2px; }.sidebar-menu .m-item a.lev2:hover{color: #ffffff; font-size: 110%; border-left: 5px solid #7A0B0A;}.sidebar-menu .m-item a.lev3{color: #707070; font-size: 90%}.sidebar-menu .m-item a.lev3:hover{color: #ffffff; font-size: 90%; border-left: 5px solid #7A0B0A;}.sidebar-menu .m-item a.activeLink{background-color: rgba(100, 10, 19, 0.7); color: #ffffff;}
CSS Sample (Light colours, dark menu items)
.content{–main-color: #2aaa9d;} .main-header{–main-color: #9dd8d2;} .sidebar-menu .m-item a.lev1{color: #000000; font-size: 200%; margin-top: 15px;} .sidebar-menu .m-item a.lev1:hover{color: #ffffff; font-size: 200%; margin-top: 15px; border-left: 5px solid #2aaa9d;} .sidebar-menu .m-item a.lev2{color: #707070; font-size: 110%; margin-top: -2px; } .sidebar-menu .m-item a.lev2:hover{color: #ffffff; font-size: 110%; border-left: 5px solid #2aaa9d;} .sidebar-menu .m-item a.lev3{color: #909090; font-size: 90%} .sidebar-menu .m-item a.lev3:hover{color: #ffffff; font-size: 90%; border-left: 5px solid #2aaa9d;} .sidebar-menu .m-item a.activeLink{background-color: rgba(216, 229, 0, 0.7); color: #111111;}