Comments (1)
Insert this CSS text in: Home / Administration / Entities / Principal Entity / UI customization:
* {
/* internal logo part */
--bar-logo-glpi: url(https://your-site.com/pics/logos/image.svg) no-repeat;
/* internal logo part with menu collapsed */
--bar-logo-glpi-collapsed: url(https://your-site.com/pics/logos/image.svg) no-repeat;
/* primary color */
--main-primary-color: #000;
--main-primary-color-hover: #92D508;
--main-primary-color-text: #fff;
/* secondary color */
--main-secondary-color: #176da0;
--main-secondary-color-hover: #92D508;
--main-secondary-color-text: #fff;
/* highlight color */
--main-detach-color: #176da0;
--main-counter-color: #d8d8d8;
/* workspace background color */
--tblr-card-bg: #d8d8d8;
}
::-moz-selection {
color: #fff;
background-color: #176da0;
}
:root {
--tblr-body-font-size: 13px;
--tblr-font-sans-serif: segoe ui, inter, -apple-system, blinkmacsystemfont, san francisco, roboto, helvetica neue, sans-serif;
--logo: https://your-site.com/pics/logos/image.svg.svg;
}
::selection {
color: #fff;
background-color: #176da0;
}
.select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted {
background-color: #176da0;
}
.select2-container .select2-dropdown {
font-size: 12px;
}
.select2-container .select2-selection.select2-selection--single {
font-size: 12px;
}
.form-control {
font-size: 12px;
}
.form-select {
font-size: 12px;
}
.form-text {
font-size: 12px;
}
.form-check-input:checked {
background-color: #176da0;
}
.btn {
font-size: 13px;
}
.btn-primary, .btn-outline-primary, .btn-ghost-primary {
--tblr-btn-color: #176da0;
--tblr-btn-color-interactive: var(--main-secondary-color-hover);
}
.btn-primary,
.btn-outline-primary,
.btn-ghost-primary {
/* primary buttons */
--tblr-btn-color: var(--main-secondary-color);
--tblr-btn-color-interactive: var(--main-primary-color-hover);
--tblr-btn-color-text: var(--main-primary-color-text);
border: none;
}
.btn-secondary,
.btn-outline-secondary,
.btn-ghost-secondary {
/* secondary buttons */
--tblr-btn-color: var(--main-secondary-color);
--tblr-btn-color-interactive: var(--main-secondary-color-hover);
--tblr-btn-color-text: var(--main-secondary-color-text);
}
.card-tabs #tabspanel.nav-tabs .nav-link .badge {
/* counters */
margin-left: 5px;
background-color: var(--main-counter-color);
color: var(--main-detach-color);
}
.card-tabs #tabspanel.nav-tabs .nav-link {
/* tab card color */
background: #fff4;
color: #fff;
border-color: rgba(150, 186, 56, 0.16);
}
.card-tabs #tabspanel.nav-tabs .nav-link.active {
/* active tab card color */
background: #fff;
color: #000;
border-color: rgba(150, 186, 56);
font-weight: bold;
}
.dropdown-menu {
font-size: 12px;
background: #fff;
color: #000;
}
.dropdown-item:hover, .dropdown-item:focus {
color: #000;
background-color: #fff;
font-weight: bold;
}
.navbar-light {
background-color: #d4d4d4;
}
.card-footer {
background-color: #d4d4d4;
}
.sidebar, .topbar {
/* sidebar or topbar color */
background-color: #37404F;
color: #fff;
z-index: 1030;
}
.sidebar #navbar-menu .nav-item .nav-link {
/* sidebar or topbar marker thickness */
border-left: 6px solid transparent;
}
.sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu .dropdown-item, .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu .dropdown-item {
/* sidebar or topbar marker thickness */
border-left: 6px solid rgba(0, 0, 0, 0.5);
}
.sidebar #navbar-menu .nav-item .nav-link.show, .sidebar #navbar-menu .nav-item .nav-link.active {
/* primary navbar activated */
border-left-color: var(--main-secondary-color-hover);
color: var(--main-secondary-color-hover);
font-weight: bold;
}
.sidebar #navbar-menu .nav-item .nav-link:hover {
/* primary navbar hover */
border-left-color: var(--main-secondary-color-hover);
color: var(--main-secondary-color-hover);
font-weight: bold;
background-color: #fff4;
}
.sidebar #navbar-menu .nav-item .nav-link.active+.dropdown-menu .dropdown-item:hover, .sidebar #navbar-menu .nav-item .nav-link.show+.dropdown-menu .dropdown-item:hover {
/* secondary navbar activated */
border-left-color: var(--main-secondary-color-hover);
color: var(--main-secondary-color-hover);
background-color: #fff4;
}
.sidebar #navbar-menu .nav-item .nav-link.active+.dropdown-menu .dropdown-item:hover, .sidebar #navbar-menu .nav-item .nav-link.show+.dropdown-menu .dropdown-item.active {
/* secondary navbar activated */
border-left-color: var(--main-secondary-color);
color: var(--main-secondary-color-hover);
background-color: #fff4;
}
@media (min-width: 992px) {
body.navbar-collapsed .sidebar #navbar-menu .nav-item.active {
background-color: #fff4;
}
body.navbar-collapsed .navbar-brand .glpi-logo {
background: url(https://your-site.com/pics/logos/image.svg) no-repeat;
width: 50px;
height: 40px;
background-size: contain;
}
body.navbar-collapsed .sidebar #navbar-menu .nav-item .nav-link.show, body.navbar-collapsed .sidebar #navbar-menu .nav-item .nav-link.active {
color: inherit;
}
body.navbar-collapsed .sidebar #navbar-menu .nav-item .nav-link + .dropdown-menu .dropdown-item {
border-left: 6px solid transparent;
}
body.navbar-collapsed .sidebar #navbar-menu .nav-item .nav-link + .dropdown-menu {
background-color: #d8d8d8;
color: #2b2b2b;
}
body.navbar-collapsed .sidebar #navbar-menu .nav-item .nav-link + .dropdown-menu .dropdown-item.active {
background-color: #fff;
border-left-color: #176da0;
}
}
.page-wrapper{
background: #949494;
}
.page .glpi-logo {
background: url(https://your-site.com/pics/logos/image.svg) no-repeat;
width: 100px;
height: 100px;
background-size: contain;
}
.page-anonymous .glpi-logo {
--logo: url(https://your-site.com/pics/logos/image.svg);
content: var(--logo);
width: 300px;
height: 250px;
}
.status {
--tblr-status-color: #fff;
--tblr-status-color-hex: #176da0;
color: var(--tblr-status-color);
background: var(--tblr-status-color-hex);
}
from glpi.
Related Issues (20)
- Ticket statics timeline broken
- Js console: Uncaught TypeError: ajax_request.profile.sql is undefined HOT 1
- .card-title broken display
- form helper for system name in asset definition displays raw html
- GLPI 11 : 404 error with ...-vue.js HOT 5
- Autoloading custom asset classes broken HOT 1
- Error on displaying network ports HOT 1
- Slow dashboard loading HOT 4
- ticket.knowbaseitems gets knowbaseitems by id not knowbaseitems_id from knowbaseitem_item HOT 1
- codespace build seems to install dependencies twice HOT 1
- "missing configuration" view miss tabler css HOT 2
- FAQ not visible for anonymous
- mail collector: content inside blockquote is ignored
- Error export PDF HOT 3
- Undefined constant "Glpi\RichText\GLPI_TEXT_MAXSIZE (I lost all personal tickets and I no longer have computers) HOT 5
- 2FA Login Broken HOT 3
- Favorite in Saved searches not working
- Duplicated entries in "Computer - Antiviruses"
- only 10 lens with expand_dropdowns=True
- Wrong alternate username with glpi agent
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from glpi.