Modifier le thème CSS

Le thème de POD s'appuie sur Bootstrap 4 ainsi qu'une feuille de style spécifique à POD. Bootstrap est un toolkit pour développer rapidement en HTML, CSS et JS. Pour en savoir plus, consulter le site GetBootstrap.

Vous pouvez aussi ajouter votre propre feuille de style. Les modifications se font principalement à deux endroits :

• vous pouvez surcharger les styles existants dans votre propre feuille de style

• vous pouvez fournir un css bootstrap personnalisé pour remplacer celui par défaut

Voyons comment faire ...

Choisir un thème de départ

Vous disposez de 3 thèmes, configurables dans votre fichier settings_local.py. Choisissez le plus proche de ce que vous voulez faire. Pour cela modifiez la variable USE_THEME :

###
# Choose a theme for your pod website
# 'default' is the simpliest, bootstrap $enable_rounded is true
# 'green' is with a dark green for primary color, $enable_rounded is false
# 'dark' is black and red, without grey background, $enable_rounded is false
USE_THEME = 'default'

default est le thème le plus simple, aux tons clairs, proche des versions précédentes de POD, avec des coins arrondis.

green ajoute une couleur de fond dans la barre de navigation en entête de page et la couleur primaire est un vert sombre. La couleur primaire est mise sur ce fond, les boutons et les liens. Les coins sont droits.

dark ressemble à green, mais en noir. La couleur de fond est blanche (pas de background sur la class jumbotron). Il y a deux couleurs primaires pour différencier boutons et liens.

Modifier juste les couleurs

POD s'appuie sur Boostrap. Les styles CSS utilisés sont donc ceux de bootstrap.min.css. Ce fichier contient en entête des variables pour les couleurs. En particulier, POD utilise surtout deux couleurs primaires (primary et primary2) et une couleur secondaire. Et ponctuellement d'autres couleurs (info, danger, ...). Il suffit donc de modifier la variable de la couleur primaire pour que tous les boutons et zones basées sur cette couleur soient modifiés !

Procédure :

Dupliquer le theme de votre choix (default, green ou dark) dans votre dossier custom :

cp pod/main/static/bootstrap-4/css/bootstrap-4/css/bootstrap-default.min.css pod/main/static/custom

Editer le ficher et changer les valeurs des variables qui vous intéressent.

Modifier la variable BOOTSTRAP_CUSTOM dans le fichier settings_local.py.
'BOOTSTRAP_CUSTOM': 'custom/bootstrap-default.min.css',

Voilà, c'est tout, votre site a déjà une nouvelle allure

Vous voulez aller plus loin ? Ajouter une feuille de style !

Bon, en général, cela ne suffit pas de changer les couleurs, on veut aussi aménager son appartement

Pour ajouter votre propre feuille de style, modifier le fichier settings_local.py :
'CSS_OVERRIDE': 'custom/custom.css',

Votre feuille de styles doit être dans le dossier pod/main/static/custom

Voir cette page de configuration pour plus d'infos.

Vous voulez aller encore plus loin ? Customiser Bootstrap !

Il est intéressant de customiser Bootstrap et c'est très simple pour les modifications de base. En entête du fichier bootstrap.css, vous verrez une petite trentaine de variables CSS. Si vous changez par exemple la couleur "primary" dans ces variables, tous les éléments de bootstrap (et de POD) basés sur cette couleur changeront. En une seule ligne vous changez ainsi la couleur de nombreux éléments.
Ces variables étant en début de fichier, elles sont faciles à changer, même dans la version minifiée de bootstrap (bootstrap.min.css).

Pour aller plus loin dans la customisation, vous aurez besoin de vous intéresser à SASS. Bootstrap contient de très nombreuses variables à customiser dans des fichiers scss. Ces fichiers doivent être compilés avant de pouvoir être utilisés et nécessitent donc d'installer un environnement de développement. Vous trouverez de nombreux tutoriels qui expliquent cela, mais attention, de nombreux sont périmés. Attention d'utiliser ceux qui parlent de bootstrap 4 et gulp 4.

Voici une tentative de tuto ... mais après de nombreux essais / erreurs, je ne suis plus sur de ce qui marche ou pas ! J'ai fait l'installation sous Ubuntu, mais cela devrait être similaire sous d'autres OS, y compris Windows. En gros, télécharger les sources de bootstrap, installer les dépendances avec npm et utiliser gulpjs pour compiler les fichiers scss en css. Donc n'hésitez pas à modifier selon votre expérience :

Installation :

Télécharger et installer node.js
Télécharger les fichiers sources de bootstrap, les décompresser.
Aller dans le dossier "bootstrap"
Télécharger les dépendances : npm install

 Vous devriez avoir la structure de fichiers :

|-Votre-projet-css-pour-pod
|--bootstrap-4
|--dist
|--scss
|----custom.scss (qu'on renommera bootstrap.min.scss plus tard)

Le dossier dist est vide, il contiendra le fichier css compilé. Le dossier scss contient votre fichier custom.scss. Vous pouvez l'appeler comme vous voulez

Installer gulpjs 4 : (inspiré de https://www.goede.site/setting-up-gulp-4-for-automatic-sass-compilation-and-css-injection)
npm install -g gulp-cli
npm install --save-dev gulp-sass
npm install --save-dev gulpjs/gulp

Créer le fichier gulpjs à la racine de votre projet et adaptez le à votre structure de dossier :

// gulpfile.js    
var gulp = require("gulp"),
    sass = require("gulp-sass"),
    postcss = require("gulp-postcss"),
    autoprefixer = require("autoprefixer"),
    cssnano = require("cssnano"),
    sourcemaps = require("gulp-sourcemaps");

var paths = {    
    styles: {
        // By using styles/**/*.sass we're telling gulp to check all folders for any sass file
        src: "scss/**/*.scss",
        // Compiled files will end up in whichever folder it's found in (partials are not compiled)
        dest: "dist"
    }
};

// Define tasks after requiring dependencies
    
function style() {    
    return (
        gulp
            .src(paths.styles.src)
            .pipe(sourcemaps.init())
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(postcss([autoprefixer(), cssnano()]))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(paths.styles.dest))
    );
}    
exports.style = style;

function watch(){
    // gulp.watch takes in the location of the files to watch for changes
    // and the name of the function we want to run on change
    gulp.watch(paths.styles.src, style)
}
exports.watch = watch;

Générer un fichier css :

Lancer la commande : gulp watch dans le dossier qui contient gulpjs. Ce script surveille vos modifications et compile à la volée, donc ne l'arrêtez pas.

Modifier votre fichier custom.scss comme expliqué sur la page Theming de bootstrap.

Votre fichier custom.css est automatiquement compilé dans le dossier dist à chaque enregistrement de custom.scss.

Vous pouvez bien sur donner tout de suite le bon nom à votre fichier source, par exemple : bootstrap-custom.min.scss. Vous obtiendrez ainsi le fichier bootstrap-custom.min.css