[EXAMPLE] Changing Menu colour

Discussion in 'C-Bus Automation Controllers' started by lcrowhurst, Sep 30, 2017.

  1. lcrowhurst

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    271
    Likes Received:
    97
    Location:
    Sydney, NSW, Australia
    I haven't been able to get on the SHAC course, so not sure if this is covered on there.

    I don't like the Purple colour on the Menus and buttons when switched on, found if I use the following code in Vis. Graphics --> Edit Custom CSS
    I was able to alter the colours in the interface. I change them to a Blue (#46638C)




    body,
    input,
    button,
    select,
    textarea {
    font-family: Arial, Helvetica, sans-serif;
    }
    .a {
    color: #46638C;
    }
    .a:hover {
    color: #ffffff;
    }
    .input-append .add-on,
    .input-prepend .add-on,
    .control-list,
    .touch .nav {
    border: 1px solid #ffffff;
    }
    .nav .a:hover,
    .dark .nav .a:hover {
    box-shadow: inset 0 0 1px 1px #ffffff;
    }
    .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: #46638C;
    background-image: -webkit-linear-gradient(#46638C, #46638C);
    background-image: linear-gradient(#46638C, #46638C);
    border-color: #46638C;
    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: #46638C;
    }
    .well,
    .modal,
    .popover {
    border: 1px solid #46638C;
    box-shadow: none;
    }
    .navbar-inner,
    .subtitle .current,
    .subtitle .previous,
    .dark .subtitle .current,
    .dark .subtitle .previous {
    color: #fff;
    }
    .subtitle .separator,
    .dark .subtitle .separator {
    color: #ddd;
    }


    This code works in both standard and dark mode.
     

    Attached Files:

    lcrowhurst, Sep 30, 2017
    #1
    cbus-ed and Mr Mark like this.
  2. lcrowhurst

    philthy

    Joined:
    Feb 8, 2006
    Messages:
    9
    Likes Received:
    0
    Location:
    outa east melbs
    Thanks for that, very helpful, the purple was terrible
     
    philthy, Dec 12, 2017
    #2
  3. lcrowhurst

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    271
    Likes Received:
    97
    Location:
    Sydney, NSW, Australia
    I know the purple and green are the Corp colours, but they look bad with both Light and dark themes. Glad the css was of help
     
    lcrowhurst, Dec 13, 2017
    #3
Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.