Comment modifier le CSS dans WordPress ?

Lorsque vous souhaitez modifier la feuille de style dans votre CMS WordPress, vous ne savez pas forcément par où commencer. Et pourtant, les feuilles de style sont absolument essentielles pour l’apparence de votre site Internet. Qu’il s’agisse de l’utiliser dans sa globalité ou pour certaines pages spécifiques, vous pouvez modifier la mise en page, rajouter ou supprimer des éléments, modifier la couleur pour personnaliser votre thème à votre convenance.

Si vous souhaitez développer vos connaissances et maîtriser parfaitement la modification des feuilles de style, il suffira simplement de suivre le guide.

Définition CSS

CSS signifie littéralement en anglais Cascading Style Sheets qui se traduit par feuille de style en cascade. Complémentaires avec le langage HTML, les feuilles de style sont absolument indispensables pour mettre en forme rapidement des éléments textuels et graphiques d’un site. L’objectif, améliorer l’aspect visuel pour enrichir l’expérience utilisateur.

Sans feuille de style, il serait véritablement difficile de rendre WordPress responsive pour être compatible avec les téléphones mobiles et les Smartphones. Mais l’aspect visuel serait en général beaucoup plus triste, aussi bien dans la partie client que dans la zone d’administration. Lorsque vous plongez à l’intérieur de WordPress, vous vous rendez compte que plusieurs langages de programmation ont été utilisés pour arriver à un tel résultat. Au cœur du noyau, les feuilles de style occupent une place prépondérante et même si vous n’êtes pas un développeur Web aguerri, il est possible d’y apporter des modifications esthétiques très pratiques en fonction du thème que vous avez sélectionné.

Lorsque vous utilisez WordPress, les feuilles de style sont généralement gérées par les thèmes. Il s’agit de fichiers modèles qui vont permettre de définir une mise en forme générale mais rassurez-vous, vous pouvez parfaitement les modifier. Généralement toutes les informations sont présentes dans un fichier appelé « style.css » présente à la racine de votre thème. Quand vous modifiez ce fichier, vous modifiez l’apparence générale de votre site Internet. Libre à vous de modifier certaines lignes de code, d’en supprimer ou d’en rajouter. Mais si vous n’êtes pas un expert, il est toujours préférable d’effectuer une première sauvegarde pour éviter les déboires et d’envisager l’utilisation d’un thème enfant.

 

La personnalisation de votre thème avec la feuille de style CSS

Dès que vous souhaitez obtenir une apparence différente de votre site, la feuille de style est un incontournable pour la personnalisation du thème. Vous allez pouvoir modifier le code présent mais si vous appliquez directement ces changements dans le fichier source, vous perdrez toutes vos modifications lorsque le thème est mis à jour. C’est pourquoi il est conseillé de ne jamais faire directement ces modifications dans le fichier « style.css » mais plutôt de passer par un éditeur spécifique en utilisant un thème enfant.

Pour y accéder, vous pouvez utiliser un client FTP ou directement le tableau de bord. La dernière solution permet directement d’accéder à la feuille de style sans installer un éditeur de code ou un quelconque module supplémentaire. Encore une fois avant de faire une quelconque modification, il est nécessaire de sauvegarder l’intégralité de votre site qui peut très vite rencontrer une erreur à cause d’une mauvaise manipulation de votre part. Une fois la sauvegarde effectuée et la création d’un thème enfant, il ne vous reste plus qu’à vous connecter à votre administration en cliquant sur le menu « apparence » puis ensuite dans « éditeur de thème ». Une fenêtre va s’ouvrir vous indiquant les risques liés à la modification et il vous suffit de cliquer sur « je comprends » pour ignorer l’avertissement.

Une fois à l’intérieur, vous allez pouvoir modifier la feuille de style comme bon vous semble. Ce ne sera pas le seul fichier présent, d’autres éléments sont également à l’intérieur, notamment des fichiers PHP car ils permettent de faire fonctionner correctement votre thème.

Pour le moment, vous n’avez pas besoin de comprendre le fonctionnement du PHP qui s’avère totalement différents du code compris dans les feuilles de style. À partir du moment où vous modifiez la feuille de style, les différents changements seront appliqués de manière globale et non sur une seule page de votre site Internet. Il est donc important de veiller à ce que la cohérence se fasse de manière totale.

L’autre possibilité évoquée précédemment consiste à manipuler la feuille de style depuis votre serveur. Il suffit pour cela d’y accéder directement en utilisant un logiciel spécifique comme Filezilla. Entièrement gratuit, vous devez vous munir de vos identifiants FTP pour pouvoir accéder à votre site Internet. Ces différentes informations vous ont été transmises au moment du choix de votre hébergeur. Une fois que vous avez pu réussir la connexion, repérer le dossier « WP-content » pour y accéder.

À l’intérieur vous avez le dossier « themes » qui doit apparaître et il faudra sélectionner le thème que vous utilisez actuellement dans votre CMS. Repérez le fichier “style” pour pouvoir modifier l’apparence de votre site Internet. Petites astuces une fois de plus, n’oubliez pas d’effectuer une sauvegarde de votre site Internet et de ne pas oublier que les changements que vous appliquez sur ce fichier se feront sur l’ensemble du site.

 

Modifier la feuille de style pour personnaliser WordPress

Si vous n’avez pas envie de toucher à proprement parler au code existant mais plutôt d’ajouter certains éléments, différentes méthodes sont à privilégier. Vous pouvez utiliser une extension dédiée ou au contraire vous tourner vers la personnalisation pour ajouter le code plus facilement, sans craindre de perdre votre travail lorsque le thème sera mis à jour. De plus, lorsque vous utilisez cette méthode, vous n’avez pas besoin de créer un thème enfant.

La personnalisation de WordPress pour modifier le CSS

Dans un premier temps, il faudra vous connecter à l’administration avec votre identifiant et votre mot de passe. Parcourez ensuite le menu « apparence » pour vous rendre dans la section  « personnaliser ». Cela vous permettra d’accéder à l’écran de personnalisation de votre thème avec un aperçu en direct du site.

En bas du menu, se trouve une boîte indispensable pour la personnalisation, le CSS additionnel. En cliquant dessus, vous allez être dirigé vers une nouvelle fenêtre qui se comporte véritablement comme un éditeur. La validation s’avère également très pratique car il se peut que vous ayez commis une erreur dans le code empêchant son fonctionnement. Une fois les modifications apportées, il suffit de publier l’ensemble ou bien de l’enregistrer pour  apporter des modifications ultérieurement.

L’avantage avec cette méthode, c’est qu’un lien de prévisualisation est également disponible pour vérifier le rendu, sans l’appliquer de manière définitive sur le site. De base, l’ajout de code comme la modification, ont été une nativement pensés avec une très grande simplicité.

L’inconvénient majeur de cette méthode repose sur l’inefficacité de la feuille de style lorsque vous allez changer de thème. Si vous envisagez d’utiliser plusieurs thèmes ou si vous souhaitez cibler des pages spécifiques, le recours à une extension est absolument indispensable.

 

Des plugins pour personnaliser la feuille de style CSS

L’utilité des plugins permet d’ajouter du code additionnel sans craindre les mises à jour du thème. Les modifications sont également plus faciles pour éviter que vous ayez à écrire du code par vous-même. L’utilisation avec des menus déroulant via une interface utilisateur plus fonctionnelle vous fera gagner énormément de temps, surtout si vous n’êtes pas un développeur Web.

1. L’extension Simple CustomCSS

C’est certainement le plug-in le plus populaire lorsqu’il s’agit de modifier la feuille de style. Très facile d’utilisation, il propose certes une interface minimaliste mais ô combien efficace.

Son administration légère vous permet une prise en main intuitive ce qui explique forcément son succès à travers le monde. Via l’interface d’administration, rendez-vous dans la rubrique « ajouter une extension » et taper le nom de celle-ci. Quelques secondes suffiront pour la mise en place et l’avantage c’est qu’elle s’avère entièrement compatible, peu importe thème que vous utilisez.

La mise en évidence des erreurs ou une syntaxe incorrecte vous seront directement signalées pour éviter certaines mésaventures.

2. L ’extension Simple Custom CSS and JS

Autre alternative à considérer, Simple CustomCSS and JS vous permettra de modifier et d’éditer votre feuille de style comme bon vous semble. L’avantage c’est que vous allez pouvoir facilement cibler les éléments concernés, s’ils se situent dans le pied de page, en en-tête, dans la zone d’administration ou au contraire dans l’interface publique. Également dans un style très épuré, les nombreuses options apparaîtront sur votre écran via des menus déroulant, ce qui vous permet de modifier l’apparence de votre site Internet, sans connaître la moindre ligne de code.

De plus, l’extension sera entièrement compatible avec l’ensemble des thèmes c’est pourquoi c’est une alternative très solide qu’il vous faut absolument. Cerise sur le gâteau, l’extension est gratuite.

3. L’extension SiteOriginCSS

Si les deux premières extensions ne vous ont pas convaincu, essayez SiteOriginCSS. Il s’agit en réalité d’un éditeur visuel et plus traditionnel ce qui vous laisse l’opportunité d’effectuer les modifications de la feuille de style en éditant le code ou au contraire en vous basant sur ces différentes fonctionnalités intuitives.

Dans la même lignée, vous pouvez également utiliser les extensions CSSHero ou WP Add CustomCSS.

 

Comment apprendre le CSS pour WordPress ?

Si vous n’avez pas envie de vous tourner vers des extensions intuitives, il est tout à fait possible d’apprendre le code en vous tournant vers des tutoriels spécialement conçus pour les débutants. Même si dans un premier temps la programmation peut être déroutante, il s’agit d’un langage facile à apprendre qui vous permet d’obtenir des résultats très facilement, car les changements visuel peuvent être constatés de suite. Pour ce faire, vous pouvez dans un premier temps vous rendre sur YouTube car il existe de très nombreuses vidéos à ce sujet.

Pour aller plus loin, des formations gratuites sont également mises à votre disposition pour augmenter votre niveau. Bien évidemment, pour être un véritable professionnel de la programmation et des feuilles de style, rien n’empêche de vous tourner vers une formation payante qui vous garantira des leçons efficaces que vous apprendrez à votre rythme. Les différentes connaissances que vous avez acquises vous seront de toute manière utiles, même si par la suite vous n’utilisez plus WordPress.

Les feuilles de style sont absolument indispensables à un site Internet pour que la mise en forme soit la plus correcte possible.

Si malgré tous les conseils que nous vous avons donnés sur cette page, vous n’arrivez pas à tout maîtriser, nous vous conseillons vivement de suivre une formation CSS. Cela vous permettra d’apprendre, en fonction de vos possibilités, à créer des styles CSS. En suivant le lien, vous verrez que vous aurez notamment accès à :

• la création d’un loader circulaire
• la fonction Calc
• aux langages HTML5 et CCS3
• la création d’un portfolio en grid
• la création d’un switch on-off

Impossible de tous vous les lister, puisqu’il existe pas moins de 273 tutoriels. Sachez que ces formations se déroulent exclusivement en ligne, par l’intermédiaire de vidéos. Vous n’aurez donc pas besoin de vous déplacer et cela vous fera gagner un temps précieux. Vous pourrez donc choisir le moment le plus pratique pour vous. Autre avantage, vous pourrez revoir la vidéo comme bon vous semble, si vous avez oublié certaines étapes ou si vous n’êtes toujours pas à l’aise. Si vous avez des questions, vous pourrez les poser dans le salon d’entraide, prévu à cet effet.

Si après ces tutos gratuits, vous avez envie d’en faire votre métier, vous pourrez poursuivre votre formation en ligne. N’oubliez de voir pour une prise en charge par votre employeur (ou Pôle Emploi), ainsi qu’avec votre compte professionnel de formation.

 

Snippets CSS pour WordPress

Voici quelques Snippets (bouts de code) que vous pourrez ajouter à votre fichier (style.css) pour améliorer ou modifier le design de votre blog WordPress.

Ajouter des bords arrondis aux images

Arrondissez les bords de vos images avec un peu de CSS3.

img { 
-webkit-border-radius: 25px; 
-moz-border-radius: 25px; 
border-radius: 25px; 
}

Liens email avec images

Ajoute une icône ou une image à tous les liens emails.

a[href^="mailto:"] {  
     background: url(images/email.png) no-repeat rightright top;  
     padding-right:10px;  
}

Pour de jolies citations

Donnez un nouveau look à vos Blockquotes.

blockquote { 
 background:#f9f9f9; 
 border-left:10px solid #ccc; 
 margin:1.5em 10px; 
 padding:.5em 10px; 
 quotes:"201C""201D""2018""2019"; 
} 
blockquote:before { 
 color:#ccc; 
 content:open-quote; 
 font-size:4em; 
 line-height:.1em; 
 margin-right:.25em; 
 vertical-align:-.4em; 
} 
blockquote p { 
 display:inline; 
}

Changer ses listes à puces

Marre des disques ou des cercles pour vos listes? Essayez ce snippet.

ul {list-style: none}
ul li {
 background-image: url("lien-vers-votre-image");
 background-repeat: none;
 background-position: 0 0.5em;
}

Changer la couleur du texte sélectionné

::selection {
 background: #93CE52; /* Safari */
 color: #ffffff;
 }
::-moz-selection {
 background: #93CE52; /* Firefox */
 color: #ffffff;
 }

Supprimer les bordures autour des smileys

Ajouter ce code si vous voyez des bordures disgracieuses autour de vos smileys.

img.wp-smiley{ border:none;}

Augmenter également l’espace entre le texte et le smileys à l’aide d’un simple margin.

img.wp-smiley{ 
border:none;
margin:0 3px;
}

Centrer votre site web

Ce wrapper centrera votre site web et alignera le texte à gauche par défaut.

#wrapper{ 
 width:960px; 
 margin:0 auto; 
 text-align:left; 
}

Ajouter des Drop Caps

2 façons de procéder pour styliser la 1ère lettre d’un paragraphe. La première nécessite que vous fassiez un span “firstcaracter” à la première lettre:

.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

La méthode suivante ne requiert aucune intervention de votre part mais ne fonctionne pas évidement sous IE 6, 7 et 8:

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Ajouter un effet de chargement aux images

Ajouter une petite image GIF animée à votre classe images afin qu’elle s’affiche pendant le chargement. Très utile pour les blogs qui contiennent beaucoup de photos dans leurs contenus.

img {
 background: url(loader.gif) no-repeat 50% 50%;
}

Ajouter un effet d’ombre aux titres

Mettez vos titres en valeur avec ce simple effet d’ombre.

.h2, .h3, .h4 {
 text-shadow: 2px 2px 4px #666;
}

Ajouter des sauts d’impression

Le saut d’impression sépare le contenu du reste lorsqu’un utilisateur imprime la page. Il peut être utilisé juste avant la zone des commentaires ainsi une nouvelle page est imprimée pour ces derniers.

.page-break{
 page-break-before:always;
}

Empêcher le retour à la ligne des liens

Utilisez ce code pour vous assurer que les liens ne seront pas affichés sur 2 lignes. Ce code s’assurera que vos liens démarreront sur une nouvelle ligne s’ils sont trop longs.

a { white-space: nowrap; }

Alterner la couleur des commentaires

WordPress assigne une classe à chaque commentaire posté, ce code vous permettra d’alterner la couleur de fond d’un commentaire à l’autre.

li.even {
 list-style: none;
 background: #FFFF;
}
li.odd {
 list-style: none;
 background: #F9F9F9;
}

Ajuster l’espace entre les lettres et les mots

Changez l’espace entre les lettres et les mots en ajoutant les propriétés “letter-spacing” et word-spacing” à votre classe “header”.

h3 {
color: #FF0000;
font-size: 24px;
letter-spacing: 0.3em;
word-spacing: 0.2em;
}

Utiliser les Pull Quotes pour améliorer l’expérience

Rendez vos articles plus faciles à lire et améliorez l’expérience utilisateur, en faisant “flotter” à droite ou à gauche de votre contenu, toutes les citations importantes.

.pullquote {
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }

Améliorer et styliser les “&”

Pour des “&” (ampersand) personnalisés et uniques.

.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

Après avoir ajouté la classe ci-dessus, stylisez vos & en plaçant le span suivant:

<span>&amp;</span>

Styliser le code dans les articles & pages

Les balises <pre> et <code> sont fréquemment utilisées pour afficher du code. Le code suivant vous permettra de le rendre plus facile à lire.

pre {
 padding: 0.1em 0.5em 0.3em 0.7em;
 border-left: 11px solid #ccc;
 margin: 1.7em 0 1.7em 0.3em;
 overflow: auto;
 width: 93%;
 line-height: 1.6em;
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
/* target IE7 and IE6 */
*:first-child+html pre {
 padding-bottom: 2em;
 overflow-y: hidden;
 overflow: visible;
 overflow-x: auto; 
 }
* html pre, { 
 padding-bottom: 2em;
 overflow: visible;
 overflow-x: auto;
 }

N’oubliez pas les balises DIV

Les balises DIV sont utilisées pour appliquer un style à un contenu, si les balises SPAN permettent également d’appliquer un style CSS , les DIV sont plutôt utilisées pour la mise en page. On a souvent tendance à les oublier pourtant elles permettent de mettre en avant du texte ou des éléments, d’ajouter une vraie touche de personnalisation.

Utilisation d’une balise Div simple : Voyons tout d’abord l’ajout d’une DIV simple de largeur 80%, centrée avec une couleur de fond et une bordure :

Je peux donc soit écrire directement cette dernière et ses attributs dans une page ou un article :

<div style="border: 1px #949494 solid; background-color: #d5d5d5; padding: 5px; width: 80%; margin-left: auto; margin-right: auto;">Voilà ma DIV</div>

soit déclarer ces derniers dans un fichier CSS et y faire appel en cas de besoin :

#ma_div {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 1px ##949494 solid;
    background-color: #d5d5d5;
    padding: 5px;
}

et y faire appel comme suit :

<div id="ma_div">
Voilà ma DIV
</div>

Pour des DIV plus complexes : Une utilisation plus poussée des balises DIV permet de personnaliser vos contenus. On peut bien sûr en utiliser plusieurs et les faire se superposer, les aligner à droite, à gauche, etc…

Voilà déjà de quoi faire ;) N’oubliez pas de sauvegarder avant toute modification, de plus, sachez que JetPack permet de modifier l’apparence de votre site en utilisant du CSS, mais sans modifier votre thème à l’aide d’un fichier CSS personnalisé. J’espère que vous trouverez ces bouts de code utiles, n’hésitez pas à faire part de vos trucs et de vos astuces CSS en laissant un commentaire.

 

Conclusion CSS WordPress

À partir du moment où vous utilisez un CMS de n’importe quel type, il est indispensable de respecter les différentes astuces de base pour gérer l’administration et la partie publique. Les feuilles de style bien que correctement conçues dès le départ avec votre thème WordPress, peuvent nécessiter certains ajustements et modifications. Grâce aux différentes méthodes évoquées précédemment, vous n’aurez aucune difficulté à appliquer vos propres styles mêmes avec des connaissances limitées.

Bien évidemment, plus votre niveau sera important dans la programmation, plus vous aurez de facilité. Néanmoins soyez toujours vigilant lorsque vous travaillez sur le fichier source, il est toujours préférable d’utiliser une extension ou un thème enfant pour éviter d’avoir un site défaillant.