Modifie ton thème avec SiteOrigin CSS

SiteOrigin CSS est une extension gratuite pour personnaliser ton site en effectuant facilement des modifications sur les CSS.

Tu visualises en direct l’impact des changements. Tu peux à tout moment supprimer les ajustements sans conséquence pour ton site.

picto articles avancés

Avancé

Rappel : surtout ne pas effectuer de personnalisation avant d’avoir installé un thème enfant.

  • Installer l’extension SiteOrigin CSS et l’activer

logo siteorigin css

  • Apparence > CSS personnalisé

siteorigin css menu

  • Cliquer sur l’œil pour arriver sur l’interface visuelle

siteorigin css point de départ

Modifier l’apparence du texte avec SiteOrigin CSS

  • Créer un article spécifique en intégrant tous les niveaux de titres,  les listes et les citations

Réservé aux abonnés de la newsletter :
Pour gagner du temps, tu peux utiliser directement le texte préformaté que je t’ai préparé.

  • Copier le contenu de la page dans l’onglet texte

siteorigin texte test

  • Cliquer sur l’onglet Visuel
  • Configurer l’article en privé dans visibilité
  • Bouton OK
  • Publier l’article

siteorigin publication privé

  • Copier l’adresse de l’article de test dans la barre de navigation de Siteorigin CSS

siteorigin css barre de navigation

  • Cliquer sur le titre H1 dans la partie droite
  • Définir tous les attributs souhaités dans la partie gauche

Détail des attributs du texte par onglets :

Onglet texte

  • Couleur texte : rentrer la valeur de la couleur avec # avant
  • Taille police : hauteur de la police en px
  • Hauteur ligne : hauteur de la ligne de texte en px
  • Épaisseur police : référence du style de la police
  • Style police : standard, maj, italique
  • Décoration : standard, maj, souligné, barré
  • Variante police : normale, petites majuscules
  • Transformation texte : capitale, majuscule, minuscule
  • Famille de police : référence Google font du type ‘Roboto’, sans-serif;
  • Alignement : aucun, gauche, droite, centré, justifié
  • Retrait texte : décale le texte vers la droite
  • Interlettrage : espace entre les lettres
  • Espacement mots : espace entre les mots

siteorigin modif texte

Onglet Animation

  • Bordures
    • emplacement de la bordure sur les 4 cotés ou celui choisi
    • épaisseur de la bordure en px
    • style de la bordure (faire des tests si tu veux sortir du trait classique)
    • couleur

siteorigin bordure

Onglet mise en page

  • Marge : espace autour de la bordure en px
  • Marge interne : espace entre le texte et la bordure en px
  • Largeur : pour diminuer la largeur de la ligne
  • Visibilité : tu peux masquer la ligne de texte ce qui est un très mauvais point au yeux de Google

siteorigin css modifications de la mise en page

 

  • Recommencer pour tous les titres, le corps du texte, les citations et les listes (pour éviter de recommencer si les réglages sont identiques, tu mets les éléments à la suite séparés par une virgule dans les CSS)

siteorigin répétition des attributs sur plusieurs éléments css

  • Cliquer sur la petite flèche pour valider les modifications

siteorigin coche de validation

Les CSS sont générés automatiquement

siteorigin css génération des css

  • Ajouter systématiquement  !important directement à la fin de chaque ligne sans espace avant le ;

siteorigin css important

  • Bouton Enregistrer les CSS

siteorigin css enregistrer les CSS

Modifier d’autres éléments

Le principe

  • Cliquer sur une ligne de texte de ton site à droite

L’interface est divisée en plusieurs panneaux.

  • A droite (1) : la visualisation en direct du site et des modifications apportées
  • A gauche (2) : les réglages que tu peux effectuer : texte, animation et mise en page
  • En bas à gauche (3) : l’emplacement de l’élément
  • En bas à droite (4)  : les caractéristiques de l’élément

siteorigin css les 4 panneaux de l'interface

Rentrons dans le vif du sujet, cela sera plus concret.

Tu veux changer la couleur des titres H2 de ton site en rouge.

  • Cliquer sur le titre

Tu vois en bas qu’il s’agit d’un titre H2 et que la couleur définie est le bleu foncé.

siteorigin css interface bas

  • Entrer #ff0000 dans Couleur texte
  • Cliquer sur la coche

siteorigin css changer la couleur du H2

L’extension a généré automatiquement le code CSS qui permettra de modifier la couleur du texte.

siteorigin css génération des css

  • Bouton Enregistrer CSS

siteorigin css enregistrer les CSS

Le texte avant

siteorigin css titre avant modifications

Le texte après

siteorigin css titre après modifications

Nous pouvons également modifier des éléments.

Par exemple, si tu souhaites apporter des modifications à la couleur de fond de ta barre latérale, tu cliques dessus en vérifiant bien que toute la zone soit sélectionnée.

siteorigin css sélection d'un élément

  • Modifier la valeur

siteorigin css couleur de fond

La couleur de fond de ma barre latérale est passée en rouge.

Les principales fonctionnalités qui peuvent t’intéresser

Onglet Animation

  • Couleur arrière-plan : applique une couleur de fond à l’élément
  • Image arrière-plan : applique une image en fond
  • Répétition arrière-plan : répétition ou non de l’image comme un motif
  • Taille arrière-plan : ajustement de l’image
  • Opacité : donne une transparence plus ou moins élevée

siteorigin animation

Onglet mise en page

  • Marge : espace autour de la bordure en px
  • Marge interne : espace entre le texte et la bordure en px
  • Largeur : pour ajuster la largeur de l’élément
  • Visibilité : tu peux masquer l’élément ce qui est un très mauvais point au yeux de Google mais qui peut servir occasionnellement

siteorigin mise en page

Malheureusement, la pratique se révèle rapidement plus compliquée. Les CSS sont imbriquées dans de multiples parties du code. Il est difficile de retrouver ses petits.

Quand tu passes la souris au dessus de l’imbrication des éléments, la zone concernée se met en surbrillance.

siteorigin css sélection

Tu peux remonter d’un niveau en cliquant dessus pour voir si la sélection est plus pertinente.

siteorigin css element sélection du niveau supérieur

Tu devras souvent faire des essais pour arriver à modifier l’élément souhaité.

Enregistrer la personnalisation directement dans le thème

Je préfère intégrer les spécifications directement dans les CSS de mon thème. 2 intérêts :

  • Tu peux ainsi désactiver l’extension qui ralentit ton site à la fin et conserver ta mise en page.
  • Tu peux également sauvegarder proprement à chaque étape validée avec des annotations.

Retrouve le détail de l’opération dans personnaliser Twenty Seventeen.

Conclusion

L’outil est très pratique pour la modification du texte. Pour les autres éléments, il faut de la patience pour bien identifier celui qui nous intéresse.

Découvre l'outil idéal pour modifier simplement les CSS de ton thème WordPress.

 

J’ai listé de nombreux éléments pour personnaliser Twenty Seventeen. Cela devrait couvrir la majorité des besoins.

Ressources

La documentation de l’extension en anglais.

Les articles qui peuvent t’intéresser :

bannière de la newsletter de pour pas un rond version bleu-vert

siteorigin image pinterest

Résumé
Article
SiteOrigin CSS pour visualiser les modifications du thème
Description
Tu modifies ton thème et visualises en direct les changements apportés. Un tutoriel pratique pour découvrir toutes ses possibilités.
Auteur
Publié par
pour pas un rond
Logo

2 réponses sur “Modifie ton thème avec SiteOrigin CSS”

  1. Je ne connaissais pas ton outil. Merci pour ton article.
    Au quotidien, j’utilise l’inspecteur de Firefox pour tester de légères retouches graphiques.
    D’ailleurs, j’ai trouvé que ton corps d’article était difficile à lire, surtout pour un contenu aussi long.
    J’ai testé en local de modifier ton background avec une couleur du type #fbf7eb, et ça réchauffe clairement ton site, tout en apaisant la lecture. Je te laisse tester.

    1. Bonjour Damien,

      Je te remercie de ton retour constructif.

      L’inspecteur de Firefox est effectivement pratique pour situer un élément mais je trouve que pour rentrer une valeur c’est souvent une plaie. SiteOrigin offre globalement les mêmes fonctionnalités mais les sections pour modifier les polices et les bordures se révèlent un atout indéniable.

      J’ai effectué des tests avec mon gris clair #eeeeee qui est proche de la couleur que tu suggères mais je trouvais que cela rendait la lecture difficile sur mobile. Tu m’as intrigué. Je vais refaire un test.

      Si tu as d’autres suggestions, je suis à l’écoute.

      Cordialement,
      Jean

Laisser un commentaire

You have to agree to the comment policy.