Partager:
Comment personnaliser le style Blockquotes dans les thèmes WordPress
Les citations sont souvent la partie la plus mémorable de votre article. Ils constituent également la partie la plus commune de tout message ou présentation. C'est la raison pour laquelle les journaux et les principaux sites médiatiques personnalisent leur style de citation par blocs pour le rendre visible. Dans cet article, nous allons vous montrer comment personnaliser le style des citations de bloc dans WordPress et vous présenter 9 beaux exemples de style de citations de bloc personnalisées..
WordPress vous permet d'ajouter des guillemets dans vos publications et vos pages en utilisant la zone de barre d'outils de votre section d'écriture..
Cela ajoutera un peu de HTML dans votre message que nous pourrons utiliser pour personnaliser le style. Remarque: nous utilisons le mode texte dans l'éditeur de publication WordPress. Vous trouverez ci-dessous un exemple de code HTML.
Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. Un peu déplorable, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; C igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem met en scène idem faciam. Homme sage
Afin de personnaliser le style des guillemets dans votre thème WordPress, il vous faudrait modifier le fichier style.css de votre thème. Vous pouvez le faire soit en allant à Apparence »Editeur dans votre administrateur WordPress ou éditez les fichiers via FTP.
Ensuite, vous devrez utiliser l’un des styles suggérés ci-dessous et remplacer vos styles de citation de bloc. S'il n'en existe pas, ajoutez-les simplement. Vous êtes également plus que bienvenu pour combiner les deux styles et les personnaliser à votre guise..
1. Classic CSS Blockquote
Habituellement, les gens utilisent CSS image de fond ajouter de gros guillemets dans blockquote. Dans cet exemple, nous avons utilisé CSS pour ajouter de grands guillemets..
blockquote font-family: Georgia, serif; taille de police: 18px; style de police: italique; largeur: 450px; marge: 0,25 m 0; rembourrage: 0,25 em 40px; hauteur de ligne: 1,45; position: relative; couleur: # 383838; arrière-plan: #ecec; blockquote: before display: block; contenu: "\ 201C"; taille de la police: 80px; position: absolue; à gauche: -10px; en haut: -10px; couleur: # 7a7a7a; blockquote cite color: # 999999; taille de police: 14px; bloc de visualisation; marge supérieure: 5px; blockquote cite: before content: "\ 2014 \ 2009";
2. Blockquote classique avec image
Dans cet exemple, nous avons utilisé une image d'arrière-plan pour les guillemets.
blockquote font: 16px italic Georgia, serif; largeur: 450px; rembourrage à gauche: 70px; rembourrage en haut: 18px; rembourrage en bas: 18px; padding-right: 10px; couleur de fond: #dadada; border-top: 1px solid #ccc; border-bottom: 3px solid #ccc; marge: 5px; background-image: url (http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); position de fond: centre gauche; répétition de fond: non répétée; retrait du texte: 23px; blockquote cite color: # a1a1a1; taille de police: 14px; bloc de visualisation; marge supérieure: 5px; blockquote cite: before content: "\ 2014 \ 2009";
3. Blockquote simple
Dans cet exemple, nous avons ajouté une couleur d'arrière-plan et une bordure gauche en pointillé au lieu de citations de bloc. N'hésitez pas à jouer avec les couleurs.
blockquote font-family: Georgia, serif; taille de police: 16px; style de police: italique; largeur: 500px; marge: 0,25 m 0; rembourrage: 0,25 em 40px; hauteur de ligne: 1,45; position: relative; couleur: # 383838; border-left: 3px en pointillé # c1c1c1; fond: #eee; blockquote cite color: # 999999; taille de police: 14px; bloc de visualisation; marge supérieure: 5px; blockquote cite: before content: "\ 2014 \ 2009";
4. Blockquote blanc bleu et orange
Les devis de bloc peuvent être faits pour se démarquer et ils peuvent être aussi colorés que vous le souhaitez.
blockquote font-family: Georgia, serif; taille de police: 16px; style de police: italique; largeur: 450px; marge: 0,25 m 0; rembourrage: 0,25 em 40px; hauteur de ligne: 1,45; position: relative; couleur: #FFF; border-left: 5px solid # FF7F00; fond: # 4b8baf; blockquote cite color: #efefef; taille de police: 14px; bloc de visualisation; marge supérieure: 5px; blockquote cite: before content: "\ 2014 \ 2009";
5. Utilisation des polices Web de Google pour les devis en CSS
Dans cet exemple CSS, nous avons utilisé la police Droid Serif de la bibliothèque de polices Web de Google..
blockquote @import url (http://fonts.googleapis.com/css?family=Droid+Serif:400italic); famille de polices: 'Droid Serif', serif; taille de police: 16px; style de police: italique; largeur: 450px; couleur de fond: # fbf6f0; border-left: 3px en pointillé # d5bc8c; border-right: 3px en pointillé # d5bc8c; text-align: center; blockquote cite color: # a1a1a1; taille de police: 14px; bloc de visualisation; marge supérieure: 5px; blockquote cite: before content: "\ 2014 \ 2009";
6. devis rond
Dans cet exemple, nous avons un bloc de devis avec des coins arrondis et nous avons utilisé une ombre portée pour les bordures..
blockquote width: 450px; couleur de fond: # f9f9f9; bordure: 1px solide #ccc; border-radius: 6px; box-shadow: 1px 1px 1px #ccc; style de police: italique; blockquote cite: before content: "\ 2014 \ 2009";
7. Utiliser le dégradé comme arrière-plan pour Blockquote
Dans cet exemple CSS blockquote, nous avons utilisé le dégradé CSS3 pour améliorer l'arrière-plan de blockquote. Les dégradés CSS sont délicats à cause de la compatibilité entre navigateurs. Nous vous recommandons d'utiliser colorlabs, générateur de dégradé CSS.
blockquote width: 450px; couleur: #FFF; arrière-plan: # 7d7e7d; / * Anciens navigateurs * / arrière-plan: -moz-linear-gradient (haut, # 7d7e7d 0%, # 0e0e0e 100%); / * FF3.6 + * / background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, # 7d7e7d), couleur-stop (100%, # 0e0e0e)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (haut, # 7d7e7d 0%, # 0e0e0e 100%); / * Chrome10 +, Safari5.1 + * / arrière-plan: -o-linear-gradient (haut, # 7d7e7d 0%, # 0e0e0e 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (haut, # 7d7e7d 0%, # 0e0e0e 100%); / * IE10 + * / background: linéaire-dégradé (jusqu'au bas, # 7d7e7d 0%, # 0e0e0e 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 7d7e7d", endColorstr = "# 0e0e0e", GradientType = 0); / * IE6-9 * / border: 1px solid #ccc; border-radius: 6px; box-shadow: 1px 1px 1px #ccc; style de police: italique; blockquote cite: before content: "\ 2014 \ 2009";
8. Blockquote avec motif de fond
Dans cet exemple, nous avons utilisé une image d’arrière-plan comme modèle pour blockquote..
blockquote width: 450px; background-image: url ('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); bordure: 1px solide #ccc; box-shadow: 1px 1px 1px #ccc; style de police: italique; blockquote cite: before content: "\ 2014 \ 2009"; 9. Utilisation de plusieurs images en arrière-plan Blockquote
Vous pouvez utiliser plusieurs images en arrière-plan blockquote en utilisant css. Dans cet exemple, nous avons utilisé blockquote: before pseudo-élément pour ajouter une autre image d'arrière-plan à bloquer.
blockquote width: 450px; background-image: url ('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); bordure: 1px solide #ccc; box-shadow: 1px 1px 1px #ccc; style de police: italique; blockquote: before position: absolute; marge supérieure: -20px; marge gauche: -20px; content: url ('http://example.com/wp-content/themes/your-theme/images/pin.png'); blockquote cite: before content: "\ 2014 \ 2009"; Nous espérons que vous avez trouvé cet article utile pour apprendre à personnaliser le style Blockquotes dans WordPress. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire ci-dessous.