2 19 CSS et thèmes additionnels
Eragon edited this page 2024-03-14 14:35:26 +01:00
This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

LessCSS

La v5 se base sur LessCSS pour construire le style. Le langage apporte beaucoup d'améliorations par rapport à du CSS pur, en particulier l'utilisation de règles imbriquées.

Les fichiers CSS restent la référence, et sont directement appelés par le HTML. Lorsque vous modifiez le thème Less, compilez le code puis dans votre commit ajoutez à la fois la source Less et le rendu CSS. Ce fonctionnement permet d'éviter à celles et ceux qui ne touchent pas au CSS d'installer Less sur leur machine.

Un Makefile est à votre disposition pour faciliter cette étape manuelle : make css compile les fichiers qui ont été modifiés.

Thèmes additionnels

La v5 possède un système de style interchangeable. Le plus simple est d'utiliser l'option disponible dans les paramètre du compte, et de choisir l'un des thèmes officiels proposés.

Toutefois, vous pouvez facilement créer un thème personnalisé, et pourquoi pas le proposer aux autres. Cette page explique comment faire. 😉

1. Installer Stylus

La première étape consiste à installer une extension de navigateur permettant d'ajouter des feuilles de style sur un site.

Il est recommandé d'utiliser Stylus, sur Firefox ou Chrome et ses dérivés.

(On peut aussi utiliser les outils développeur, mais c'est plus difficile pour sauvegarder si on n'a pas une copie du dépôt en local.)

2. Créer un style pour la v5

Commencez par vous rendre sur la v5. Ensuite cliquez sur l'icône de Stylus, puis sur « Écrire un style pour v5.planet-casio.com/ ».

Dans la fenêtre qui s'ouvre, copiez-collez un style déjà existant, le thème par défaut par exemple.

Vous pouvez sauvegarder en faisant Ctrl+S, ou en cliquant sur le bouton qui va bien.

3. Modifier les couleurs

Une fois que c'est fait, vous pouvez modifier les couleurs. N'importe quelle valeur CSS valide fait l'affaire :

  • un nom de couleur : blue
  • une valeur #rrggbb : #beef42
  • une valeur rgb : rgb(3, 11, 96)
  • une valeur rgba (avec transparence) : rgba(24, 25, 26, 0.23

Certaines variables correspondent à des propriétés CSS plus complexes, avec par exemple des marges en pixels ou autres. N'hésitez pas à faire des tests pour voir quelles variables correspondent à quoi.

Il se peut que vous deviez recharger la page de la v5 pour que ce soit appliqué.

4. Modifier le thème du code (nécessite un clône du dépôt)

Les blocs de code sont générés par la bibliothèque Pygments, et le thème des blocs de code (y compris la couleur de fond) est directement pris dans les thèmes de Pygments.

Vous pouvez tester les thèmes Pygments en utilisant la démo en ligne ou en local.

Une fois un thème choisi, le fichier CSS associé se génère en ligne de commande (packet python-pygments sous Arch) :

% THEME=material
% pygmentize -S $THEME -f html -a .codehilite > pygments-$THEME.css

Le fichier peut ensuite être ajouté au dépôt, et le thème pygments associé à un thème v5 dans app/utils/render.py (← ce lien pointe vers un commit spécifique ; pensez à comparer avec dev).

Si vous n'avez pas de clône du dépôt, vous pouvez demander à changer le thème Pygments dans une PR ou en soumettant le thème.

5. Proposer un thème

Une fois que vous estimez que votre thème vaut le coup d'être intégré, n'hésitez pas à le partager! Contactez un développeur ou un admin pour savoir quel est le moyen le plus adapté en fonction de vos compétences techniques. 😉

Happy painting!