Where can i find css file for web app

Skesis4 years ago

Hello, i have to modify the traccar web interface (color and add a logo). But i can't find the local file to do it. i installed the server version.

Thank for your awnsers

I was able to modify the color of the dashboard. But I can't find where to replace the logo in the login form.

Skesis4 years ago

Hello, thanks for your awnser. How did you manage to modify the dashboard's color ?

I edit on app.css inside web folder. Here is my code

.view-color-green {
    background-color: rgba(77, 250, 144, 0.3);
}
.view-color-yellow {
    background-color: rgba(250, 190, 77, 0.3);
}
.view-color-red {
    background-color: rgba(255, 84, 104, 0.3);
}

.view-item-disabled {
    opacity: 0.5;
}

body.x-border-layout-ct, div.x-border-layout-ct {
    background-color: #8e8ee6 !important;
}

.x-fieldset {
    overflow: visible !important; /* workaround for Safari issue */
}

.x-menu-item-default.x-menu-item-focus, .x-menu-item-default.x-menu-item-active {
    background-image: none;
    background-color: #4343a8!important;
}

.x-boundlist-item-over, .x-boundlist-list-item-over, .x-boundlist-selected {
    background-image: none;
    background-color: #4343a8!important;
}

/*==============================================*/

.toolbar-header-style {
    background-color: #3f51b5 !important;
}

.x-panel-header-default-vertical {
    background-color: #3f51b5 !important;
}

.x-panel-header-default {
    border: 1px solid #3f51b5 !important;
    background-color: #3f51b5 !important;
}

.x-panel-header-default .x-tool-tool-el {
    background-color: #3f51b5 !important;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.x-btn-inner-default-toolbar-small {
    color: #ffffff !important;
}

.x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after {
    color: #ffffff !important;
}


.x-toolbar .x-btn {
    border: none !important;
    border-radius: 15px !important;
    text-decoration: none !important;
}

.x-btn-icon-el-default-toolbar-small {
    color: #ffffff !important;
}

.x-btn-default-toolbar-small {
    background: none !important;
    border: none !important;
}

.x-btn-focus.x-btn-over.x-btn-default-toolbar-small {
    box-shadow: none !important;
}

.x-btn-focus.x-btn-default-toolbar-small {
    box-shadow: none !important;
}

.x-btn.x-btn-pressed.x-btn-default-toolbar-small {
    background: #349a93 !important;
}

.x-toolbar-default {
    background: #3f51b5 !important;
}

.x-toolbar-text-default {
    color: #ffffff !important;
}

/*---Main Window---*/
.x-window-default {
    border-color: #3f51b5 !important;
}

.x-window-header-default-top {
    background-color: #3f51b5 !important;
}

.x-window-header-default {
    border-color: #3f51b5 !important;
}

.x-window-header-default .x-tool-img {
    background-color: #3f51b5 !important;
}

.x-btn-default-small {
    background-color: #3f51b5 !important;
}

#update {
    position: absolute;
    width: 100%;
    top: 20px;
    font-weight: bold;
    text-align: center;
}

#attribution {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: x-small;
}

#spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    border-top: 6px solid #5fa2dd;
    border-right: 6px solid transparent;
    animation: spinner .6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

html {
    background: url(bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Please comment down if you have other suggestion to the color combination.

Gustavo4 years ago

Its great! excellent your design! marko.lapulapu.919
Do yo have any other custom made in the web for share?
thanks!