Repeindre un appartement meublé
On ne reconstruit pas les murs : on change la peinture, les rideaux et les coussins. Adapter un template, c'est garder la structure HTML et changer les couleurs, les polices, les images et les textes.
M04 · C. Mettre en forme une page web avec les feuilles de style CSS
Adapter un template à une charte graphique
Lire la structure d'un template HTML/CSS existant, repérer ce qu'il faut modifier, et l'adapter à la charte graphique d'un client grâce aux variables CSS.
1Situer
Une association sportive de Safi a trouvé un template gratuit de site vitrine. Il est beau, mais il est vert et blanc alors que le club est rouge et noir, il utilise une autre police et le logo est celui de l'auteur du template. Plutôt que de tout recommencer, le développeur adapte le template à la charte graphique du club.
2Comprendre
Le template est vert, avec un logo GreenTeam. Sa structure (en-tête, bannière, bouton) convient très bien au club.
1 / 5
Un template (gabarit) est un site déjà construit : HTML, CSS, images, parfois un peu de JavaScript. On l’adapte au lieu de partir de zéro.
1. Lire la structure du template
template/
├── index.html, about.html, contact.html
├── css/style.css ← la présentation
├── js/main.js
├── images/ ← à remplacer
└── LICENSE ← à lire avant tout
Ouvrez index.html et repérez les grandes zones (header, nav, section, footer) et les classes qu’elles utilisent. Avec F12, cliquez sur un élément de la page : l’inspecteur montre la règle CSS qui le met en forme et le fichier où elle se trouve.
2. La charte graphique
La charte du client fixe : le logo, les couleurs (codes exacts), les polices, parfois les marges et le style des photos. On la note avant de commencer.
3. Les variables CSS
:root {
--primaire: #c0392b;
--sombre: #1b1b1b;
--police: Arial, sans-serif;
}
.bouton { background: var(--primaire); }
h1 { color: var(--primaire); font-family: var(--police); }
Si le template n’en utilise pas, c’est souvent la première chose à faire : remplacer chaque couleur répétée par une variable (dans VS Code, Ctrl + H).
4. La méthode
- Lire la licence (usage commercial, attribution).
- Remplacer les couleurs et les polices (variables).
- Remplacer le logo, les images et les textes (plus de « Lorem ipsum »).
- Supprimer les pages et sections inutiles.
- Vérifier sur téléphone, tablette et ordinateur.
Les variables, une seule télécommande
Si la couleur principale est écrite 40 fois dans le CSS, il faut 40 corrections. Avec une variable, on change une seule ligne et tout le site suit.
:root { --primaire: #c0392b; /* rouge du club */ --sombre: #1b1b1b; } .bouton { background: var(--primaire); }
Publicité
3Manipuler
Ce template utilise des variables CSS. Adaptez-le à la charte du club (rouge #c0392b et noir #1b1b1b) en ne modifiant que le bloc :root, puis remplacez les textes.
- Couleur principale : rouge #c0392b (variable --primaire)
- Fond de l'en-tête : noir #1b1b1b (variable --sombre)
- Police du club : Arial, sans-serif (variable --police)
- Remplacez GreenTeam par le nom du club : Olympique de Safi
- Remplacez le faux texte Lorem ipsum par une vraie phrase
4Pratiquer
Exercice 1 · Lire la charte
La charte graphique d'un client donne : couleur principale #0b5394, couleur d'accent #f1c232, fond #f7f7f7, police des titres Montserrat, police du texte Open Sans. Écrivez le bloc :root correspondant.
Voir le corrigé
:root { --primaire: #0b5394; --accent: #f1c232; --fond: #f7f7f7; --police-titre: "Montserrat", sans-serif; --police-texte: "Open Sans", sans-serif; }
Exercice 2 · Ajouter une police Google
Comment utiliser la police Montserrat de Google Fonts pour les titres ?
Voir le corrigé
<!-- dans le <head>, avant style.css --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap"> /* dans style.css */ h1, h2, h3 { font-family: "Montserrat", sans-serif; }
Exercice 3 · La licence du template
Avant d'utiliser un template gratuit pour un client, que faut-il vérifier ?
Voir le corrigé
- la licence : usage commercial autorisé ? (MIT, CC BY...) - l'obligation de laisser un lien vers l'auteur (attribution) - les images et polices fournies : ont-elles leur propre licence ? - que le code est récent, responsive et sans fichiers inutiles
Publicité