À quoi ça sert
Websource Page Styles a deux rôles.
- Alléger les pages. Le thème Websource fournit un petit fichier CSS par type de page (accueil, catégorie, fiche produit, panier…). Le module veille à ce que chaque page ne charge que le sien, y compris sur les pages ajoutées par d'autres modules.
- Ajouter vos propres styles. Vous écrivez du SCSS (du CSS amélioré) pour une page précise ou pour toutes les pages. Le module le compile, le compresse et ne l'envoie aux visiteurs que sur les pages concernées.
Un SCSS mal écrit ne casse jamais la boutique : l'erreur s'affiche dans le back-office et rien n'est publié tant qu'elle n'est pas corrigée.
Ce module s'adresse à une personne qui sait écrire quelques lignes de CSS. Pour changer les couleurs, les arrondis ou les polices sans code, utilisez Websource Theme Config.
Installation
- Le module est installé et activé avec le thème Websource. Sinon, ouvrez Modules > Gestionnaire de modules, cliquez sur Installer un module et envoyez
websourcepagestyles.zip. - Vérifiez dans le gestionnaire de modules que Websource Page Styles est activé.
- Cliquez sur Configurer.
Aucune commande n'est à lancer : le compilateur SCSS est fourni avec le module.
Prise en main en 5 minutes
Exemple suivi sur la boutique de test : colorer le titre des pages de catégorie.
- Ouvrez Modules > Gestionnaire de modules > Websource Page Styles > Configurer.
- Dans le tableau Pages et taille du CSS chargé, repérez la ligne Catégorie de produits et cliquez sur Éditer le SCSS.
- Dans Code SCSS, saisissez vos règles. Vous pouvez partir d'un modèle avec la liste Exemples (« Insérer un exemple… »).
- Laissez la case Publier ce SCSS sur le site cochée.
- Cliquez sur Enregistrer et compiler.
- De retour sur la liste, la ligne affiche l'état Compilé, la date et le poids ajouté (ici 0,2 Ko).
- Ouvrez une catégorie de votre boutique : le style est en ligne.
Réglages
Tout se trouve sur l'écran Configurer du module. Il comprend la liste des pages, un éditeur par page et un panneau Réglages.
Pages et taille du CSS chargé
| Réglage | Rôle |
|---|---|
| Recompiler tous les SCSS | Recompile d'un coup tous les SCSS enregistrés. Le module confirme par « 1 SCSS recompilé(s). » (le nombre varie). |
| Page | Type de page et son identifiant technique (par exemple Fiche produit, product). La première ligne, Toutes les pages, s'applique à tout le site. |
| CSS du thème | Poids du fichier CSS que le thème charge sur cette page. absent signifie que le thème n'a pas de fichier pour cette page. |
| SCSS compilé | Poids de votre SCSS une fois compilé et compressé. |
| Total chargé | Somme des deux, hors base.css (la feuille commune à toutes les pages). |
| État | Aucun SCSS, Compilé, Désactivé (SCSS enregistré mais non publié) ou Erreur (avec le message du compilateur). La date de la dernière compilation est affichée dessous. |
| Éditer le SCSS | Ouvre l'éditeur de la page. |
| Recompiler | Recompile le SCSS de cette seule page. Le bouton apparaît dès qu'un SCSS existe. |
Pages proposées : Toutes les pages, Accueil, Catégorie de produits, Fiche produit, Panier, Commande (tunnel), Confirmation de commande, Connexion, Création de compte, Mot de passe oublié, Mon compte, Historique des commandes, Détail d'une commande, Retours produits, Avoirs, Retour d'une commande, Bons de réduction, Suivi de commande invité, Mes adresses, Formulaire d'adresse, Mes informations, Pages CMS, Contact, Recherche, Meilleures ventes, Nouveaux produits, Promotions, Marques, Fournisseurs, Plan du site, Magasins, Page introuvable (404), Pages de modules (module-*).
Éditeur SCSS d'une page
| Réglage | Rôle |
|---|---|
| Exemples | Insère un modèle dans la zone de code : Bouton aux couleurs de la boutique, Bandeau d'accroche, Mixin responsive et couleurs calculées, Espacements compatibles langues RTL (propriétés logiques), Cartes avec bordure et arrondi du thème. |
| Code SCSS | Vos règles. La touche Tab insère une indentation. |
| Actif — Publier ce SCSS sur le site | Décochée : le SCSS est conservé mais n'est plus envoyé aux visiteurs (état Désactivé). |
| Retour à la liste | Quitte l'éditeur sans enregistrer. |
| Supprimer | Efface le SCSS de la page, après confirmation (« Supprimer ce SCSS ? »). |
| Enregistrer et compiler | Enregistre et compile immédiatement. |
| Variables du thème disponibles | Aide-mémoire des variables utilisables dans votre code (voir ci-dessous). |
Variables utilisables dans le code :
| Variable | Signification |
|---|---|
$brand | Couleur principale. Elle suit en direct le réglage de Websource Theme Config. |
$brand-50, $brand-500, $brand-600, $brand-700 | Échelle de la couleur principale. |
$ink, $line | Couleur du texte, couleur des bordures. |
$page, $surface, $footer, $accent | Fond de page, cartes, pied de page, couleur d'accent. |
$radius, $radius-2xl, $card-shadow | Arrondis du thème, ombre des cartes. |
$brand-hex, $ink-hex, $line-hex, $accent-hex | Mêmes couleurs en valeur fixe, pour les fonctions rgba(), darken()… |
$bp-sm, $bp-md, $bp-lg, $bp-xl | Points de rupture : 640, 768, 1024 et 1280 px. |
@include rtl { … }, @include ltr { … } | Règles réservées aux langues écrites de droite à gauche, ou de gauche à droite. |
Réglages
| Réglage | Rôle |
|---|---|
| Inliner le CSS critique — Placer dans le code de la page le CSS de la page quand il pèse moins de 6 Ko | Les petits fichiers CSS de page (thème et SCSS) sont écrits directement dans la page au lieu d'être téléchargés à part. Cela évite une requête réseau. Les fichiers plus lourds restent séparés et mis en cache par le navigateur. Décoché par défaut. |
| Enregistrer | Valide ce réglage. |
En multiboutique
Le SCSS et le réglage « Inliner » sont propres à chaque boutique. D'après le code du module (non essayé sur la boutique de test, qui n'a qu'une boutique) :
- en contexte « toutes les boutiques » ou « groupe », l'écran affiche Choisissez une boutique et ne modifie rien ;
- un panneau Copier le SCSS d'une autre boutique (liste Boutique source, bouton Copier ici) reprend le SCSS d'une autre boutique. Il est recompilé avec les couleurs de la boutique en cours.
Cas d'usage
Mettre en valeur le titre des catégories. Sur la boutique de test, ces quelques lignes sur la page Catégorie de produits suffisent :
#main h1 {
color: $brand;
&::after { content: ''; display: block; width: 3rem; height: .25rem; margin-top: .5rem; border-radius: 999px; background: $accent; }
}
Une règle pour tout le site. Choisissez la ligne Toutes les pages. Le fichier compilé est alors chargé partout : gardez-le court.
Tester sans publier. Décochez Publier ce SCSS sur le site, enregistrez, puis recochez la case quand vous êtes prêt.
Styler la page d'un module (page de marque, formulaire d'un module tiers…). Utilisez la ligne Pages de modules (module-*).
Changer de couleur principale plus tard. Les variables comme $brand suivent le réglage du thème : inutile de recompiler. Les variables en -hex sont figées ; le module recompile seul à la visite suivante.
Questions fréquentes
Faut-il connaître le SCSS ? Non. Du CSS classique fonctionne tel quel. Le SCSS ajoute les variables, l'imbrication et les mixins.
Mon SCSS ralentit-il le site ? Il est compilé une seule fois, compressé, puis servi comme un fichier statique mis en cache. Il n'est chargé que sur les pages concernées.
Puis-je utiliser @import ? Non. Par sécurité, le compilateur ne lit aucun fichier du serveur.
Mes styles sont-ils repris dans l'export du thème ? Oui. L'écran Importer / Exporter le thème de Websource Theme Config inclut la section « CSS / SCSS par page » (le code source et l'état actif, pas le fichier compilé).
Que devient le CSS du thème ? Il n'est pas modifié. Votre SCSS est chargé après lui, ce qui lui permet de le compléter ou de le surcharger.
Dépannage
Message rouge « Le SCSS est enregistré mais n'a pas pu être compilé. Aucun CSS n'est publié pour cette page. » Le code contient une erreur. Le détail (en anglais, fourni par le compilateur) indique la ligne, par exemple unclosed block … on line 3 pour une accolade oubliée. La ligne de la page passe à l'état Erreur. Cliquez sur Éditer le SCSS, corrigez, puis Enregistrer et compiler. Si une version valide existait déjà, elle reste en ligne et la mention ancienne version en ligne s'affiche.
L'état est « Compilé » mais rien ne change sur la boutique. Videz le cache de votre navigateur, puis vérifiez que votre sélecteur est assez précis pour passer devant celui du thème. Vérifiez aussi que vous avez choisi la bonne ligne : la page de commande s'appelle Commande (tunnel).
L'état est « Désactivé ». La case Publier ce SCSS sur le site est décochée dans l'éditeur.
La colonne « CSS du thème » affiche « absent ». Le thème actif ne fournit pas de fichier pour cette page. Votre SCSS reste chargé normalement.
Après un changement de serveur, les styles ont disparu. Cliquez sur Recompiler tous les SCSS : les fichiers compilés sont recréés dans le dossier du module.
Désinstallation
- Ouvrez Modules > Gestionnaire de modules.
- Sur Websource Page Styles, ouvrez le menu de la flèche et cliquez sur Désinstaller.
La désinstallation supprime vos SCSS, les fichiers compilés et le réglage. Copiez votre code auparavant si vous souhaitez le conserver (ou exportez le thème depuis Websource Theme Config). Pour une coupure temporaire, préférez Désactiver.