Vous avez été nombreux à me demander des tutoriels. Je note tout sur ma liste de tutos à faire et essaye de les réaliser dans les plus brefs délais, sachant que je prépare mon projet à côté et que j'ai également un vie personnelle ;) . Mais ne vous inquiétez pas, je ne vous oublie pas !
Aujourd'hui je vais vous expliquer comment modifier l'apparence des titres des articles : changer la police, la taille, la couleur, ajouter une image en fond.
C'est parti pour les explications !
Sauvegarde du modèle
Tout d'abord commencez par sauvegarder le visuel de votre blog pour pouvoir revenir en arrière si besoin.Pour cela allez dans Modèle. Cliquez sur Sauvegarder/Restaurer en haut à droite de la page web :
Cliquez ensuite sur Télécharger le modèle complet et sauvegardez votre thème sur votre ordinateur :
Maintenant que vous avez fait une sauvegarde, on va pouvoir passer aux choses sérieuses :)
Trouver le code
Toujours dans Modèle, cliquez maintenant sur Modifier le code HTML :
Cliquez sur le triangle noir à gauche de <b:skin>...</b:skin> :
Si vous ne le trouvez pas, cette partie est déjà ouverte, passez à l'étape suivante.
Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code entrez :
h3.post-title, .comments h4 {h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-color: #ffffff;
}
.comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
On va maintenant s'intéresser au code suivant pour l'apparence des titres :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-color: #ffffff;
}Modifier l'apparence des titres des articles
Changer la police, la taille du texte, sa couleur, son alignement
Pour changer la police et la taille du texte on va s'intéresser aux lignes suivantes :h3.post-title {
font-family: Georgia; /* Police du texte */
font-size: 22px; /* Taille du texte */
text-align: left; /* Alignement du texte */
color: #5b5b5b; /* Couleur du texte */
background-color: #ffffff;
}- left pour un alignement à gauche
- center pour un texte centré
- right pour un alignement à droite
La couleur de fond des titres des articles
Pour changer le fond des titres, on s'intéresse à la ligne suivante :h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-color: #ffffff; /* Couleur de fond du texte */
}Une image en fond de titre des articles
Si vous voulez ajouter une image à la place d'une couleur en fond d'un texte, il suffit de remplacer cette ligne par :background-image: url('http://adresseurl.com/imagedefond.png');h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
}Visuellement on obtient :
Vous pouvez modifier la répétition de l'image et sa position en ajoutant les lignes suivantes :
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 50%;h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 50%;
}Pour background-position-x, 0% correspond au bord tout à gauche du titre et 100% au bord tout à droite
Pour background-position-y, 0% correspond au bord supérieur du titre et 100% au bord inférieur
Dans l'exemple donné, on obtient visuellement :
Jouez avec les pourcentages pour trouver ce qui vous convient le mieux :)
Espacement entre le texte et les bords de la zone de titre
Pour changer l'espace entre les bords et le texte des titres, il faut ajouter les lignes suivantes :padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
background-repeat: repeat;
padding-top: 5px; /* Espace au-dessus du texte */
padding-right: 10px; /* Espace à droite du texte */
padding-bottom: 5px; /* Espace en-dessous du texte */
padding-left: 10px; /* Espace à gauche du texte */
}Dans cet exemple on obtient visuellement :
Espacement autour de la zone des titres
Pour changer l'espace autour des titres, il faut ajouter les lignes suivantes :margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
background-repeat: repeat;
margin-top: 15px; /* Espace au-dessus de la zone de titre */
margin-right: 0px; /* Espace à droite de la zone de titre */
margin-bottom: 0px; /* Espace en-dessous de la zone de titre */
margin-left: 0px; /* Espace à gauche de la zone de titre */
}Ajouter une image aux titres des articles
En utilisant la méthode qui permet d'ajouter une image en fond d'un texte, expliqué ci-dessus, on peut, par exemple, ajouter une image avant chaque titre.En effet, il suffit d'ajouter l'image en fond du titre mais ne pas la répéter. En jouant sur la position horizontale (x) et verticale (y) de l'image on peut la placer où l'on veut par rapport aux titres.
Exemple : Je souhaite ajouter une image à gauche des titres. Je dois donc :
- Ne pas répéter l'image en fond du titre (no-repeat)
- Positionner l'image à 0% horizontalement de la zone des titres
- Positionner l'image à 50% verticalement de la zone des titres pour qu'elle soit centrée
- Ajouter un espace de 48 pixels (48px) à gauche des titres pour éviter qu'ils chevauchent l'image
Ce qui donne :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
background-repeat: no-repeat; /* Pas de répétition de l'image */
background-position-x: 0%; /* Position horizontale de l'image */
background-position-y: 50%; /* Position verticale de l'image */
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 48px; /* Espace à gauche des titres */
}
Notez que cette technique est applicable sur tout type de texte ou lien :)
N'oubliez pas que pour visualiser les changements que vous apportez à vos titres, vous pouvez cliquer sur Prévisualiser le modèle au dessus de la boîte de code.
Une fois que vous êtes satisfaits de vos titres, n'oubliez pas d'enregistrer en cliquant sur Enregistrer le modèle.
Et voilà ! Vous savez maintenant comment modifier l'apparence des titres de vos articles ;)
Bon blogging !
