Modifie ton thème avec SiteOrigin CSS

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

Cet article prend environ 4 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

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

• Installer l’extension SiteOrigin CSS et l’activer

• Apparence > CSS personnalisé

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

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

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

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

• 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

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

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

• 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)

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

Les CSS sont générés automatiquement

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

• Bouton 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

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é.

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

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

• Bouton Enregistrer CSS

Le texte avant

Le texte après

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.

• Modifier la valeur

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

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

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.

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

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.

[tweetshare tweet= »Découvre l’outil idéal pour modifier simplement les CSS de ton thème WordPress. » username= »pourpasunrond »]

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 :

• Personnaliser le thème Twenty Seventeen
• Assurer la sécurité de ton site
• Structurer le contenu de ton site

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean