Ajoutez une lettrine aux articles en css

Rédigé par jack 8 commentaires
Classé dans : PluXml, Bout de code Mots clés : Article, Css, Snippet, Thème

Grâce à la magie du css, nous allons modifier la taille de la première lettre du texte des articles pour créer une lettrine.

Pour se faire, éditez le fichier css de votre thème et ajoutez à la fin du fichier le code suivant: 


article section:first-letter {
	float: left;
	margin: 10px 5px 0 0;
	padding: 0 10px 0 0;
	line-height: 52px;	
	font-size: 78px;	
	color: #00BBFF;
}

Ce code est valable pour le thème par défaut de PluXml 5.3.1.

Il est donc facilement adaptable en fonction de votre thème. Vous pourrez notamment jouer sur les valeurs des paramètres line-height et font-size pour changer la taille de la lettrine, et du paramètre color pour modifier la couleur du caractère mis en évidence.

8 commentaires

#1  - ppmt a dit :

Ce ne marche pas pour moi. Si je remplace section par p, je vois bien toutes les 1eres lettres de mes paragraphes en grand mais si je mets juste section, rien ne se passe

Je ne suis pas trop doue en CSS et je n'arrive pas a comprendre pourquoi ca ne marche pas

#2  - admin a dit :

@ppmt :
Bonjour. Cela dépend de la structure html de la partie qui affiche l'article. Envoie par mail soit le fichier home.php de ton theme, soit l'adresse de ton site pour que je puisse regarder

#3  - Philippe a dit :

merci pour la reponse. J'ai rajoute mon site web dans ce commentaire

Quel est l'email pour envoye un attachement?

#4  - Dams a dit :

Bonsoir,
J'ai le même problème que Philippe : je n'arrive à avoir les lettrine qu'en indiquant « article section p », ce qui, bien entendu, affiche la lettrine à chaque paragraphe et sinon, rien.

Je vois dans l'article que ça fonctionne pour la version 5.3.1. Y a-t-il une raison pour que ça ne fonctionne pas avec la 5.4 ?

Je suis en train de progressivement modifier le thème par défaut et j'ai vérifié que c'était le seul changement par rapport au theme.css de départ.

#5  - admin a dit :

@Dams :
Bonjour. Je viens de tester le code dans un PluXml 5.4 avec le thème par défaut et ça fonctionne très bien. As-tu fait des modifications dans la structure du thème ?

#6  - Dams a dit :

Bonsoir. Je viens de trouver. C'est le plugin Vignettes qui empêche l'affichage de la lettrine. En créant un article sans vignette, ça fonctionne. Ça ne devrait pas être trop difficile à corriger. Merci de ta réponse.

#7  - LouLeGrain a dit :

Merci pour l'idée et le bout de code !
Personnellement je suis passé a ça :
<pre>
[sélecteurD'article] p:first-child:first-letter {
float: left;
margin: 10px 5px 0 0;
font-size: 6rem;
color: #fdc501;
}
</pre>
Puisque l'éditeur rajoute des paragraphes après insertion d'une image, puis juste des rem a la place des px :)

#8  - Loulou a dit :

Bonjour,
Très bonne astuce, facile à mettre en place et qui en jette ! Aucun problème pour ma part sur Pluxml 5.5. Juste un petit complément, pour que le premier paragraphe et lui seul est la lettrine, il est possible d'utiliser ce code css : p:first-of-type:first-letter
Cela peut être utile pour ceux qui comme moi doivent utiliser la balise <p>.

Les commentaires sont fermés.

Fil RSS des commentaires de cet article

Top