changing UI Colors

Hey Anton and everybody,

I want to change the colors of the toolbars.
If I go to app.css and change .toolbar-header-style color, only Devices, State and Map topic color are changed, but 'Reports' is still blue, so as all the add / edit menus (such as Add device, groups and so on).

how can I change all the bars colors?
thank you very much!
Alon

You can either find CSS classes in browser inspector, or you can create a completely new ExtJS there to apply your styles. Second option is better if you change a lot of things.

What you are looking for is this:
app.css

.toolbar-header-style {
    background-color: #FF8918 !important;
}
.x-panel-header-default {
    background-image: none;
    background-color: #FF8918 !important;
    border: 1px solid #FF8918 !important;
}

You have to force .x-panel-header-default properties with !important

hello I view to explain how to insert a background image to the traccar login page.
But I did not understand I can explain it better?
Which file do I edit or app.css or release.html?
and 'you can have a example the code used?
but most of that resolution must have the image files? what extent? png, jpg?
thx

@netluca1, can you please stop spamming everywhere. This thread has nothing to do with background image.

hi . how I can change login page UI color ? and how i can change . loading . blue circle from login page ?

Hey,
You can change the spinner color in app.css file:

#spinner {
    position: absolute;
    top: 50%;
...
    border-right: 6px solid rgba(56, 146, 212, .15);
    border-bottom: 6px solid rgba(56, 146, 212, .15);
    border-top: 6px solid rgba(142, 3, 3, 1);
    border-radius: 100%;
}

I changed the rgba color of border-top and it worked great.

Hello i follow the instructions to edit app.css but i can´t find where to change the "Reports" bar color. Can you Help Me? Thank you

I would recommend to do styling properly and implement a custom ExtJS theme.

hello,

i changed the color using this : app.css

.toolbar-header-style {
    background-color: #2E4053 !important;
}
.x-panel-header-default {
    background-image: none;
    background-color: #2E4053 !important;
    border: 1px solid #2E4053 !important;
}

but i figured out that color style has been chenged only for MAP, DEVICE, STATE and i keep seeing bleue color on all setings header interface ( account, groups, users, etc...)
can someone tell how can i change color for all header interfaces ?? thank you so much

Hello, did you solved your problem with colors?
Maybe you'll boast about the solution