Change Menu Bar Colour

[manos@dynamitec]

Hello everyone,

Is there any way that i can change the blue colour on the MENU BAR to a custom colour?

Thank you and best regards,

[admin]

Do you mean the admin interface?

[manos@dynamitec]

Do you mean the admin interface?

I mean the Navigation Menu Bar that can be docked on the left. When you select an item is highlighted in Blue. Can i change that colour to a custom one? 

Thank you for your answer.

Best regards,

[admin]

This Custom CSS changes main color to orange. Adjust as needed.

Code:

.a,
.a:hover {
  color: #FF9900;
}
.input-append .add-on,
.input-prepend .add-on,
.control-list,
.touch .nav {
  border: 1px solid #FF9900;
}
.nav .a:hover,
.dark .nav .a:hover {
  box-shadow: inset 0 0 1px 1px #FF9900;
}
.btn-info,
.btn-success,
.navbar-inner,
.datepicker .active,
.datepicker .active:hover,
.nav .active .a,
.nav .active .a:hover,
.nav .a.active,
.dark .btn-info,
.dark .btn-success,
.dark .datepicker .active,
.dark .datepicker .active:hover,
.dark .nav .active .a,
.dark .nav .active .a:hover,
.dark .nav .a.active {
  background-color: #FF9900;
  background-image: none;
  border-color: #FF9900;
  box-shadow: none;
}
.btn-info:hover,
.btn-success:hover,
.btn-info:active,
.btn-success:active,
.toggler .btn-success,
.dark .btn-info:hover,
.dark .btn-success:hover,
.dark .btn-info:active,
.dark .btn-success:active,
.dark .toggler .btn-success {
  background-color: #FF9900;
}
.well,
.modal,
.popover {
  border: 1px solid #FF9900;
  box-shadow: none;
}

[manos@dynamitec]

This Custom CSS changes main color to orange. Adjust as needed.

Code:

.a,
.a:hover {
 color: #FF9900;
}
.input-append .add-on,
.input-prepend .add-on,
.control-list,
.touch .nav {
 border: 1px solid #FF9900;
}
.nav .a:hover,
.dark .nav .a:hover {
 box-shadow: inset 0 0 1px 1px #FF9900;
}
.btn-info,
.btn-success,
.navbar-inner,
.datepicker .active,
.datepicker .active:hover,
.nav .active .a,
.nav .active .a:hover,
.nav .a.active,
.dark .btn-info,
.dark .btn-success,
.dark .datepicker .active,
.dark .datepicker .active:hover,
.dark .nav .active .a,
.dark .nav .active .a:hover,
.dark .nav .a.active {
 background-color: #FF9900;
 background-image: none;
 border-color: #FF9900;
 box-shadow: none;
}
.btn-info:hover,
.btn-success:hover,
.btn-info:active,
.btn-success:active,
.toggler .btn-success,
.dark .btn-info:hover,
.dark .btn-success:hover,
.dark .btn-info:active,
.dark .btn-success:active,
.dark .toggler .btn-success {
 background-color: #FF9900;
}
.well,
.modal,
.popover {
 border: 1px solid #FF9900;
 box-shadow: none;
}

Always providing solutions

Thank you Admin

[oyvindnordbo]

Hi, enjoyed this very well, but it is possible to change the font color from black to white, on the name om the scheduels?

[admin]

Code:

.navbar .title {
  color: #fff;
}

[oyvindnordbo]

Thank you admin

[Rookie]

Hi,
I have problems with custom CSS and graphics. When I update the .gz file, I'm unable to import it to mosaic. When I download some examples from forum they works fine, but after modifying files does not work. Is there different types of .gz files?

[Daniel]

Hi,
I have problems with custom CSS and graphics. When I update the .gz file, I'm unable to import it to mosaic. When I download some examples from forum they works fine, but after modifying files does not work. Is there different types of .gz files?

Hi
What did you try to import and where?
PS. Create separate thread for different topics like this.
BR

[manos@dynamitec]

Code:

.navbar .title {
  color: #fff;
}

Hello Admin,

Can you please add here which parameters should be changed to be able to set the Navigation Menu width? I would like to make larger to fit the complete description of the trends.

Thank you in advance!

   

[admin]

Use this. If you need to change the width then the left property should be width + 21.

Code:

.trends .sidebar-menu {
  width: 300px;
}
.trends .content {
  left: 321px;
}
@media (max-width: 1279px) {
  .trends .content {
    left: 0;
  }
}