Difference between revisions of "Updating to design version 5"
Jump to navigation
Jump to search
old>Admin |
old>Admin |
||
| Line 21: | Line 21: | ||
:root { | :root { | ||
--themePrimary: #007bff; | --themePrimary: #007bff; | ||
--themePrimaryLight: #cbe4ff; | --themePrimaryLight: #cbe4ff; | ||
--themePrimaryDark: #312783; | --themePrimaryDark: #312783; | ||
--themePrimarySpecial: #648bb7; | --themePrimarySpecial: #648bb7; | ||
--themeSecondary:#8c2db3; | --themeSecondary:#8c2db3; | ||
--themeTeritary: #8e9aa7; | --themeTeritary: #8e9aa7; | ||
--themeDark: #333333; | --themeDark: #333333; | ||
--themeGreyDark: #5a626b; | --themeGreyDark: #5a626b; | ||
Revision as of 13:32, 4 February 2020
Step by step guide
Thefollowing steps are rquired to update your design
- Activate version 5 layout + bootstrap 4
- Set configuration > layoutNewestVersion = true
- Update stylesheet
- Copy new stylesheet (see below)
- Change color codes in new sheet
- Set configuration > defaultStylesheet = <ID>
- Update wrapper
- Copy new wrapper (see below)
- Set configuration > defaultWrapper = <ID>
Additionally you might want to update how Dashboards work too
- Set configuration > dashboardMain = true
- Change widget layouts (for each)
- Set width to 1/12 parts (6 = half, 12 = full)
Sample stylesheet
:root {
--themePrimary: #007bff;
--themePrimaryLight: #cbe4ff;
--themePrimaryDark: #312783;
--themePrimarySpecial: #648bb7;
--themeSecondary:#8c2db3;
--themeTeritary: #8e9aa7;
--themeDark: #333333;
--themeGreyDark: #5a626b;
--themeGrey: #ced4da;
--themeLightGrey: #f8f9fc;
--themeLight: #ffffff;
}
.logo {
background: url(https://alpha.tempusserva.dk/TempusServa/media/korsbaek-white.13.svg) no-repeat !important;
background-position-x: 0px;
background-position-y: 0px;
opacity:0.6;
zoom: 0.8;
margin-top: 8px;
margin-left: 70px;
}