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.
Mode d'emploi à venir prochainement.