Logic Machine Forum
Change Menu Bar Colour - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Change Menu Bar Colour (/showthread.php?tid=1729)

Change Menu Bar Colour - manos@dynamitec - 19.11.2018

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,

RE: Change Menu Bar Colour - admin - 19.11.2018

Do you mean the admin interface?

RE: Change Menu Bar Colour - manos@dynamitec - 19.11.2018

(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,

RE: Change Menu Bar Colour - admin - 20.11.2018

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;
}


RE: Change Menu Bar Colour - manos@dynamitec - 20.11.2018

(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

RE: Change Menu Bar Colour - oyvindnordbo - 18.12.2018

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

RE: Change Menu Bar Colour - admin - 18.12.2018

Code:
.navbar .title {
  color: #fff;
}


RE: Change Menu Bar Colour - oyvindnordbo - 18.12.2018

Thank you admin

RE: Change Menu Bar Colour - Rookie - 03.01.2019

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?

RE: Change Menu Bar Colour - Daniel - 04.01.2019

(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

RE: Change Menu Bar Colour - manos@dynamitec - 16.06.2023

(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!

   

RE: Change Menu Bar Colour - admin - 16.06.2023

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;
  }
}