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; }