Difference between revisions of "Updating to design version 5"

From TempusServa wiki
Jump to navigation Jump to search
old>Admin
old>Admin
Line 20: Line 20:
=== Sample stylesheet ===
=== Sample stylesheet ===


  :root {
  --themePrimary: #007bff;  /* vivid blue */
  --themePrimaryLight: #cbe4ff; /* light blue */
  --themePrimaryDark: #312783; /* dark blue*/
  --themePrimarySpecial: #648bb7; /* gray blue */
  --themeSecondary:#8c2db3; /* purple */
  --themeTeritary: #8e9aa7;  /* blue dark grey */
  --themeDark: #333333;
  --themeGreyDark: #5a626b;
  --themeGrey: #ced4da;
  --themeLightGrey: #f8f9fc;
  --themeLight: #ffffff;
  }
  .logo {
      background: url(https://www.kromannreumert.com/Static/resources/images/global/logo.png) no-repeat !important;
      background-position-x: 0px;
      background-position-y: 0px;
      opacity:0.6;
      zoom: 0.8;
      margin-top: 10px;
      margin-left: 75px;
      height: 55px;
      width: 300px;
  }


=== Sample wrapper ===
=== Sample wrapper ===

Revision as of 14:29, 4 February 2020

Step by step guide

Thefollowing steps are rquired to update your design

  1. Activate version 5 layout + bootstrap 4
    1. Set configuration > layoutNewestVersion = true
  2. Update stylesheet
    1. Copy new stylesheet (see below)
    2. Change color codes in new sheet
    3. Set configuration > defaultStylesheet = <ID>
  3. Update wrapper
    1. Copy new wrapper (see below)
    2. Set configuration > defaultWrapper = <ID>

Additionally you might want to update how Dashboards work too

  1. Set configuration > dashboardMain = true
  2. Change widget layouts (for each)
    1. Set width to 1/12 parts (6 = half, 12 = full)

Sample stylesheet

 :root {
 --themePrimary: #007bff;   /* vivid blue */
 --themePrimaryLight: #cbe4ff; /* light blue */
 --themePrimaryDark: #312783; /* dark blue*/
 --themePrimarySpecial: #648bb7; /* gray blue */
 --themeSecondary:#8c2db3; /* purple */
 --themeTeritary: #8e9aa7;  /* blue dark grey */
 --themeDark: #333333;
 --themeGreyDark: #5a626b;
 --themeGrey: #ced4da;
 --themeLightGrey: #f8f9fc;
 --themeLight: #ffffff;
  }
  .logo {
     background: url(https://www.kromannreumert.com/Static/resources/images/global/logo.png) no-repeat !important;
     background-position-x: 0px;
     background-position-y: 0px;
     opacity:0.6;
     zoom: 0.8;
     margin-top: 10px;
     margin-left: 75px;
     height: 55px;
     width: 300px;
  }

Sample wrapper