Een aangepast Bootstrap thema maken

Klaarzetten van een map voor de (verschillende) aangepaste thema's

Maak een map aan op de computer (bijvoorbeeld met de naam "custom_styling") en maak hier een bestand aan met de naam "package.json".
In dit bestandje plaats je de volgende inhoud:

{
  "scripts":{
    "generate-css": "sass ./$FOLDER/scss/custom.scss ./$FOLDER/css/custom.css --style compressed --no-source-map"
  },
  "dependencies": {
    "bootstrap": "5.3.2",
    "sass": "^1.70.0"
  }
}

Ga in de command line naar deze map toe en voer vanuit deze map het commando npm install uit. Dit zorgt er voor dat zowel Bootstrap als Sass in een mapje "node_modules" worden geïnstalleerd.

De versie van Bootstrap die gebruikt wordt voor de Wisecat+ vanaf versie 7.0.7 is 5.3.2.

Maak per Instantie (of per thema) een aparte map aan

Maak een map aan per instantie of per aangepast thema met daarbinnen een extra map genaamd "scss".

De mappen structuur zou er nu als volgt uit moeten zien:

|_ your_styling_folder
   |_ node_modules
   |
   |_ I001
   |  |_ scss
   |
   |_ I002
      |_ scss

Klaarzetten van de  scss bestanden

In de map "scss" maak je een bestand aan genaamd "custom.scss" en hierin plak je de volgende inhoud:

// Place custom Bootstrap variables here
// This is an example that changes the primary color and the secondary color and doubles the border-radius of the available sizes
// This will probably enough for most custom themes (A list of all variables to override can be found here: https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss)

$primary:   #008800; // a dark green
$secondary: #505050; // a medium grey

$border-radius:     .75rem;
$border-radius-sm:  .5rem;
$border-radius-lg:  1rem;
$border-radius-xl:  2rem;
$border-radius-xxl: 4rem;

// Import Bootstrap after defining your own variable overrides
@import "../../node_modules/bootstrap/scss/bootstrap";

Pas de variabelen aan zodat deze overeenkomen met de gewenste styling

In het bestand "custom.scss" kunnen nu de variabelen aangepast, verwijderd of toegevoegd worden zodat deze overeenkomen met de gewenste styling.
Een volledige lijst van de variabelen kun je hier vinden: https://github.com/twbs/bootstrap/bl...variables.scss

Genereer de stylesheets 

Wanneer de variabelen goed staan, of wanneer je wilt zien hoe de styling uitpakt in de Wisecat+, kun je een css bestand aanmaken.

Hiervoor kun je binnen de stylingsmap op de command line het commando  FOLDER=I001 npm run generate-css  uitvoeren. Hierbij komt de gebruikte I001 in het voorbeeld overeen met de map van de styling die je wilt genereren.

Dit commando zorgt er voor dat er naast de map "scss" ook een map "css" wordt aangemaakt met daarin de aangepaste styling in het bestand "custom.css"
Dit is de stylesheet die gebruikt kan worden voor het aangepaste thema in de Manager.

Testen van de Styling (Acceptatie of Test)

Ga op de acceptatie of test omgeving naar Manager > systeemWise > Wisecat+ configuratie > Wisecat+ styling en kies bij 'Wisecat+ thema' voor "CUSTOM_THEME". Hierdoor zal het veld 'Aangepaste thema' actief worden. Hier kun je de gegenereerde css in plakken. Klik op de link 'Demopagina' om een speciale pagina op de Wisecat+ te openen waarin je kunt zien hoe de aangepaste styling eruitziet voor de meest voorkomende onderdelen van de website. 

Op de productie omgeving de styling activeren

Op het moment dat je tevreden bent met hoe de Wisecat+ er op acceptatie uit ziet kan je bovenstaande stappen in de Manager herhalen in de productie omgeving. Vanaf dat moment zal de Wisecat+ voor de betreffende instantie met de aangepaste styling getoond worden