This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Change Menu Bar Colour
#1
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,
Reply
#2
Do you mean the admin interface?
Reply
#3
(19.11.2018, 19:28)admin Wrote: 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,
Reply
#4
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;
}
Reply
#5
(20.11.2018, 12:07)admin Wrote: 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;
}

Big Grin Big Grin Big Grin Big Grin

Always providing solutions

Thank you Admin
Reply
#6
Hi, enjoyed this very well, but it is possible to change the font color from black to white, on the name om the scheduels?
Reply
#7
Code:
.navbar .title {
  color: #fff;
}
Reply
#8
Thank you admin
Reply
#9
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?
Reply
#10
(03.01.2019, 20:05)Rookie Wrote: 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
------------------------------
Ctrl+F5
Reply
#11
(18.12.2018, 14:01)admin Wrote:
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!

   
Reply
#12
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;
  }
}
Reply


Forum Jump: