I was able to modify the color of the dashboard. But I can't find where to replace the logo in the login form.
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.
Its great! excellent your design! marko.lapulapu.919
Do yo have any other custom made in the web for share?
thanks!
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