Difference between revisions of "Updating to design version 5"

From TempusServa wiki
Jump to navigation Jump to search
old>Admin
m (19 revisions imported)
 
(16 intermediate revisions by one other user not shown)
Line 1: Line 1:
=== Step by step guide ===
Thefollowing steps are rquired to update your design


# Activate version 5 layout + bootstrap 4
## Set configuration > layoutNewestVersion = true
# Update stylesheet
# Update stylesheet
## Copy new stylesheet
## Copy new stylesheet (see below)
## Change color codes in new sheet
## Set configuration > defaultStylesheet = <ID>
## Set configuration > defaultStylesheet = <ID>
## Set configuration > layoutNewestVersion = true
# Update wrapper
# Update wrapper
## Copy new wrapper
## Copy new wrapper (see below)
## Set configuration > defaultWrapper = <ID>
## 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: left;
      background-position-y: center;
      background-size: contain !important;
      opacity:0.6;
      width: 300px;
      margin-top: 8px;
      height: 44px;
  }
=== Sample wrapper ===
  <html>
  <head>
  <link rel="icon" type="image/png" href="https://www.tempusserva.dk/favicon.ico" />
  <meta name="application-name" content="Tempus Serva" />
  <meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0'>
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  </head>
  <body>
  </body>
  </html>

Latest revision as of 11:55, 10 December 2021

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; 
   --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: left;
     background-position-y: center;
     background-size: contain !important;
     opacity:0.6;
     width: 300px;
     margin-top: 8px;
     height: 44px;
 }

Sample wrapper

 <html>
 <head>
 <link rel="icon" type="image/png" href="https://www.tempusserva.dk/favicon.ico" />
 <meta name="application-name" content="Tempus Serva" />
 <meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0'>
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 </head>
 <body>

 </body>
 </html>
Retrieved from "https://wiki.tempusserva.dk/index.php?title=Updating_to_design_version_5&oldid=4828"