Dela med sig:
Hur man anpassar Blockquotes Style i WordPress-teman
Citat är ofta den mest minnesvärda delen av din artikel. De är också den mest delade delen av alla inlägg eller presentationer. Därför anpassar tidningar och huvudströmmens mediasidor deras blockquote-stil för att få det att stå ut. I den här artikeln kommer vi att visa hur du anpassar blockquotes stil i WordPress tillsammans med att visa dig 9 vackra exempel på anpassade blockquotes stil.
WordPress låter dig lägga till blockquotes i dina inlägg och sidor genom att använda verktygsfältet i din skrivavdelning.
Detta lägger till lite HTML i ditt inlägg som vi kan använda för att anpassa stilen. Obs! Vi använder textläget i WordPress-postredigeraren. Nedan är ett exempel på HTML som du ska se.
Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen och nihil remittunt. En vero displicuit ea, quae tributa est animi virtuutibus tanta praestantia? Sint ista Graecorum; Är du inte säker på att du gör det? Huius ego nunc auktoritatem sequens idem faciam. Vis man
För att anpassa blockquotes-stilen i ditt WordPress-tema, skulle vi behöva ändra style.css-filen i ditt tema. Du kan göra det genom att antingen gå till Utseende »Redaktör i din WordPress-admin eller redigera filerna via FTP.
Därefter måste du använda en av de föreslagna stilarna nedan och överväga dina blockquote-stilar. Om ingen finns, lägg till dem helt enkelt. Du är också mer än välkommen att kombinera de två stilarna och anpassa dig till ditt hjärtas önskan.
1. Classic CSS Blockquote
Vanligtvis använder folk CSS bakgrundsbild att lägga till stora citattecken i blockquote. I det här exemplet har vi använt CSS för att lägga till stora citattecken.
blockquote font-family: Georgia, serif; typsnittstorlek: 18px; typsnittstyp: kursiv; bredd: 450px; marginal: 0,25em 0; vaddering: 0,25em 40px; linjehöjd: 1,45; position: relativ; färg: # 383838; bakgrund: #ececec; blockquote: före display: block; innehåll: "\ 201C"; typsnittstorlek: 80px; position: absolut; vänster: -10px; topp: -10px; färg: # 7a7a7a; blockquote cite färg: # 999999; typsnittstorlek: 14px; display: block; marginal-topp: 5px; blockquote cite: före innehåll: "\ 2014 \ 2009";
2. Classic Blockquote med bild
I det här exemplet har vi använt en bakgrundsbild för citattecken.
blockquote font: 16px italic Georgia, serif; bredd: 450px; padding-left: 70px; padding-top: 18px; vadderande-botten: 18px; padding-right: 10px; bakgrundsfärg: #dadada; border-top: 1px solid #ccc; gränsbotten: 3px solid #ccc; marginal: 5px; bakgrundsbild: url (http://example.com/wp-content/themes/yourthome/images/gray-georgia.png); Bakgrundsposition: Mitt vänster; background-repeat: no-repeat; textindelning: 23px; blockquote cite färg: # a1a1a1; typsnittstorlek: 14px; display: block; marginal-topp: 5px; blockquote cite: före innehåll: "\ 2014 \ 2009";
3. Enkel Blockquote
I det här exemplet har vi lagt till bakgrundsfärg och streckad vänstra gränsen istället för blockquotes. Känn dig fri att leka med färgerna.
blockquote font-family: Georgia, serif; typsnittstorlek: 16px; typsnittstyp: kursiv; bredd: 500px; marginal: 0,25em 0; vaddering: 0,25em 40px; linjehöjd: 1,45; position: relativ; färg: # 383838; gränsen till vänster: 3px streckad # c1c1c1; bakgrund: #eee; blockquote cite färg: # 999999; typsnittstorlek: 14px; display: block; marginal-topp: 5px; blockquote cite: före innehåll: "\ 2014 \ 2009";
4. Vitblå och Orange Blockquote
Blockquotes kan göras för att stå ut och de kan vara lika färgglada som du vill att de ska vara.
blockquote font-family: Georgia, serif; typsnittstorlek: 16px; typsnittstyp: kursiv; bredd: 450px; marginal: 0,25em 0; vaddering: 0,25em 40px; linjehöjd: 1,45; position: relativ; färg: #FFF; gränsen till vänster: 5px fast # FF7F00; Bakgrund: # 4b8baf; blockquote cite color: #efefef; typsnittstorlek: 14px; display: block; marginal-topp: 5px; blockquote cite: före innehåll: "\ 2014 \ 2009";
5. Använda Google Web Fonts för Blockquotes i CSS
I det här blockquote CSS-exemplet har vi använt Droid Serif-teckensnitt från Google-webbfonts bibliotek.
blockquote @import url (http://fonts.googleapis.com/css?family=Droid+Serif:400italic); font-family: "Droid Serif", serif; font-size: 16px; font-style: italic; bredd: 450px; background-color: # fbf6f0; gränsen till vänster: 3px streckad # d5bc8c; gränsen-höger: 3px streckad # d5bc8c; text-align: center; blockquote cite färg: # a1a1a1; typsnittstorlek: 14px; display: block; marginal-topp: 5px; blockquote cite: före innehåll: "\ 2014 \ 2009";
6. Round Corner Blockquote
I det här exemplet har vi blockquote med rundade hörn och vi har använt droppskugga för gränser.
blockquote width: 450px; bakgrundsfärg: # f9f9f9; gränsen: 1px solid #ccc; gränsstråle: 6px; boxskugga: 1px 1px 1px #ccc; typsnittstyp: kursiv; blockquote cite: före innehåll: "\ 2014 \ 2009";
7. Använd Gradient som bakgrund för Blockquote
I det här CSS blockquote-exemplet har vi använt CSS3-gradienten för att förbättra bakgrunden till blockquote. CSS-gradienter är knepiga på grund av kompatibilitet mellan webbläsare. Vi rekommenderar att du använder färglabs, CSS-gradientgenerator.
blockquote width: 450px; färg: #fff; bakgrund: # 7d7e7d; / * Gamla webbläsare * / bakgrund: -moz-linjär-gradient (topp, # 7d7e7d 0%, # 0e0e0e 100%); / * FF3.6 + * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # 7d7e7d), färgstopp (100%, # 0e0e0e)); / * Chrome, Safari4 + * / bakgrund: -webkit-linjär-gradient (topp, # 7d7e7d 0%, # 0e0e0e 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradienten (topp, # 7d7e7d 0%, # 0e0e0e 100%); / * Opera 11.10+ * / bakgrund: -ms-linjär-gradient (topp, # 7d7e7d 0%, # 0e0e0e 100%); / * IE10 + * / bakgrund: linjär gradient (till botten, # 7d7e7d 0%, # 0e0e0e 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 7d7e7d", endColorstr = "# 0e0e0e", GradientType = 0); / * IE6-9 * / border: 1px solid #ccc; gränsstråle: 6px; boxskugga: 1px 1px 1px #ccc; typsnittstyp: kursiv; blockquote cite: före innehåll: "\ 2014 \ 2009";
8. Blockquote med bakgrundsmönster
I det här exemplet har vi använt en bakgrundsbild som mönster för blockquote.
blockquote width: 450px; background-image: url (http://example.com/wp-content/themes/your-theme/images/lined_paper.png '); gränsen: 1px solid #ccc; boxskugga: 1px 1px 1px #ccc; typsnittstyp: kursiv; blockquote cite: före innehåll: "\ 2014 \ 2009";
9. Använda flera bilder i Blockquote Background
Du kan använda flera bilder i blockquote-bakgrunden med hjälp av css. I det här exemplet har vi använt blockquote: före pseudoelement för att lägga till en annan bakgrundsbild till blockquote.
blockquote width: 450px; background-image: url (http://example.com/wp-content/themes/your-theme/images/lined_paper.png '); gränsen: 1px solid #ccc; boxskugga: 1px 1px 1px #ccc; typsnittstyp: kursiv; blockquote: före position: absolute; margin-top: -20px; margin-vänster: -20px; innehåll: url (http://example.com/wp-content/themes/your-theme/images/pin.png '); blockquote cite: före innehåll: "\ 2014 \ 2009";
Vi hoppas att du hittade den här artikeln till hjälp när du lär dig hur du anpassar blockquotes-stilen i WordPress. Om du har några frågor eller förslag, var god att lämna en kommentar nedan.