Modifier son thème WordPress avec du CSS

Du CSS pour customiser son thème

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.
 Modifier son thème WordPress avec du CSS css files 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;
 }

 

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.

 

Librement traduit & adaptéSources & ressources: loneplaceboblog.leegustin, djavupixel, instantshiftcss-trickswphub.

Pour ne plus rien manquer... Abonnez-vous à nos Newsletters!

Le meilleur de WP Formation dans votre boîte email...

Vous cherchez une formation pour créer votre site web, blog ou Ecommerce?

Toutes nos Formations WordPress sont éligibles au CIF, DIF, AIF, OPCA...

 Modifier son thème WordPress avec du CSS formation WordPress 3 jours 134

9 commentaires

  1. Merci pour ces codes très utiles !
    :)

  2. Bonjour,

    C’est vraiment intéressant ces astuces, mais que se passe-t-il lors des mises à jour de thèmes: les modifications sont-elles conservées ou faudra-t-il les refaire?

    Merci d’avance,

    Bruno

  3. Bonjour Bruno,

    Afin de ne pas perdre ces modifications, il faut soit utiliser un thème enfant ou pourquoi pas installer le plugin Jetpack qui propose une surcouche CSS à votre thème !

  4. Bonjour,

    Avec le css3 il est maintenant pas trop compliqué de modifier son thème wordpress et on peut faire vraiment des choses sympa. En plus il existe maintenant des générateurs de css3 (attention à la compatibilité sur ie par contre).

    Bon article

  5. Claude de Misterblog.fr

    Code très utiles , merci pour cet article . Je conseille ce générateur de Css pour débuter , http://csstypeset.com/

    Au niveau de « Ajouter un effet de chargement aux images » le fichier .gif(loader.gif) doit être uploadé . ( ça paraît évident pour certains..mais bon)

  6. Merci Claude pour ce petit générateur;)

  7. Merci Fabrice pour ces super astuces !

  8. Salut Fabrice !
    Déjà un grand merci pour toutes ces petites astuces bien pratiques !!

    j’ai utilisé le wrapper pour centrer le site web que j’ai placé dans en haut dans mon css, et il fonctionne très bien en local.

    En revanche, une fois le site en ligne, le code ne fonctionne plus !
    J’ai beau essayer de le mettre dans mon css ou même dans page.php et même single.php mais sans succès…

    Donc plus rien n’est centré.

    Avez vous déjà rencontré le même problème?

  9. Bonjour @Sébastien,

    Il ne devrait pas y avoir de différence entre la version locale et en ligne… Un plugin en plus? Une feuille de style?

    Il est aussi possible d’attribuer à vos lignes l’attribut !important pour prendre le dessus en CSS. Ce qui donnerait par exemple: header{ margin-bottom : 0 !important ;}