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.
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>&</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 : loneplacebo, blog.leegustin, djavupixel, instantshift, css-tricks, wphub.