Dele:
Slik tilpasser du Blockquotes Style i WordPress Themes
Sitater er ofte den mest minneverdige delen av artikkelen din. De er også den mest delte delen av et innlegg eller en presentasjon. Derfor tilpasser aviser og hovedstream-mediasider deres blockquote-stil for å få det til å skille seg ut. I denne artikkelen vil vi vise deg hvordan du tilpasser blockquotes-stilen i WordPress sammen med å vise deg 9 flotte eksempler på tilpasset blockquotes-stil.
WordPress gir deg mulighet til å legge til blokkeringer i dine innlegg og sider ved hjelp av verktøylinjeområdet i skriveområdet.
Dette vil legge til en liten HTML i innlegget ditt som vi kan bruke til å tilpasse stylingen. Merk: Vi bruker tekstmodus i WordPress-postredigering. Nedenfor er et eksempel på HTML som du bør se.
Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen og nil remittunt. En vero displicuit ea, quae tributa er animi virtuutibus tanta praestantia? Sint ista Graecorum; Er du enig med deg, er du ikke enig? Huius ego nunc auktoritatem sequens idem faciam. Vis mann
For å tilpasse blockquotes-stilen i WordPress-temaet, må vi endre stilen.css-filen til temaet ditt. Du kan gjøre dette ved å enten gå til Utseende »Editor i WordPress-admin eller rediger filene via FTP.
Deretter må du bruke en av de foreslåtte stilene nedenfor og overstyr blokkene dine. Hvis ingen finnes, legg så bare til disse. Du er også mer enn velkommen til å kombinere de to stilene og tilpasse til ditt hjertes ønske.
1. Classic CSS Blockquote
Vanligvis bruker folk CSS bakgrunnsbilde å legge til store anførselstegn i blockquote. I dette eksemplet har vi brukt CSS til å legge til store anførselstegn.
blockquote font-family: Georgia, serif; skriftstørrelse: 18px; font-style: kursiv; bredde: 450px; margin: 0,25em 0; polstring: 0.25em 40px; linjehøyde: 1,45; stilling: relativ; farge: # 383838; bakgrunn: #ececec; blockquote: før display: block; innhold: "\ 201C"; skriftstørrelse: 80px; posisjon: absolutt; igjen: -10px; topp: -10px; farge: # 7a7a7a; blockquote cite color: # 999999; skriftstørrelse: 14px; skjerm: blokk; margin-topp: 5px; blockquote cite: før innhold: "\ 2014 \ 2009";
2. Classic Blockquote med bilde
I dette eksemplet har vi brukt et bakgrunnsbilde for anførselstegn.
blockquote font: 16px italic Georgia, serif; bredde: 450 piksler; polstring-venstre: 70px; polstring: 18px; polstring bunn: 18px; polstring-høyre: 10px; bakgrunnsfarge: #dadada; border-top: 1px solid #ccc; grensebunn: 3px solid #ccc; margin: 5px; bakgrunnsbilde: url (http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); Bakgrunnsposisjon: Mellom venstre; bakgrunn-gjentak: ikke-gjenta; tekstindeks: 23px; blockquote cite color: # a1a1a1; skriftstørrelse: 14px; skjerm: blokk; margin-topp: 5px; blockquote cite: før innhold: "\ 2014 \ 2009";
3. Enkel Blockquote
I dette eksemplet har vi lagt til bakgrunnsfarger og stiplede venstre kantlinje i stedet for blokkeringer. Ta gjerne med fargene.
blockquote font-family: Georgia, serif; skriftstørrelse: 16px; font-style: kursiv; bredde: 500px; margin: 0,25em 0; polstring: 0.25em 40px; linjehøyde: 1,45; stilling: relativ; farge: # 383838; border-left: 3px dashed # c1c1c1; bakgrunn: #eee; blockquote cite color: # 999999; skriftstørrelse: 14px; skjerm: blokk; margin-topp: 5px; blockquote cite: før innhold: "\ 2014 \ 2009";
4. Hvitblå og oransje Blockquote
Blockquotes kan gjøres for å stå ut og de kan være like fargerike som du vil at de skal være.
blockquote font-family: Georgia, serif; skriftstørrelse: 16px; font-style: kursiv; bredde: 450px; margin: 0,25em 0; polstring: 0.25em 40px; linjehøyde: 1,45; stilling: relativ; farge: #FFF; border-left: 5px solid # FF7F00; bakgrunn: # 4b8baf; blockquote cite color: #efefef; skriftstørrelse: 14px; skjerm: blokk; margin-topp: 5px; blockquote cite: før innhold: "\ 2014 \ 2009";
5. Bruke Google Web Fonts for Blockquotes i CSS
I dette blockquote CSS-eksemplet har vi brukt Droid Serif font fra Google web fonts bibliotek.
blockquote @import url (http://fonts.googleapis.com/css?family=Droid+Serif:400italic); font-familie: 'Droid Serif', serif; font-size: 16px; font-style: italic; bredde: 450 piksler; background-color: # fbf6f0; border-left: 3px dashed # d5bc8c; border-right: 3px dashed # d5bc8c; tekst-Justering: center; blockquote cite color: # a1a1a1; skriftstørrelse: 14px; skjerm: blokk; margin-topp: 5px; blockquote cite: før innhold: "\ 2014 \ 2009";
6. Round Corner Blockquote
I dette eksemplet har vi blokkering med avrundede hjørner, og vi har brukt dropshadow for grenser.
blockquote width: 450px; bakgrunnsfarge: # f9f9f9; grense: 1px solid #ccc; border-radius: 6px; boksskygge: 1px 1px 1px #ccc; font-style: kursiv; blockquote cite: før innhold: "\ 2014 \ 2009";
7. Bruk Gradient som bakgrunn for Blockquote
I dette CSS blockquote eksempelet har vi brukt CSS3 gradient for å forbedre bakgrunnen til blockquote. CSS-gradienter er vanskelig, på grunn av kompatibilitet med nettleseren. Vi anbefaler å bruke colorlabs, CSS gradient generator.
blockquote width: 450px; farge: #fff; bakgrunn: # 7d7e7d; / * Gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, # 7d7e7d 0%, # 0e0e0e 100%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 7d7e7d), fargestopp (100%, # 0e0e0e)); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær-gradient (topp, # 7d7e7d 0%, # 0e0e0e 100%); / * Chrome10 +, Safari5.1 + * / bakgrunn: -o-lineær-gradient (topp, # 7d7e7d 0%, # 0e0e0e 100%); / * Opera 11.10+ * / bakgrunn: -ms-lineær-gradient (topp, # 7d7e7d 0%, # 0e0e0e 100%); / * IE10 + * / bakgrunn: lineær gradient (til bunn, # 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; boksskygge: 1px 1px 1px #ccc; font-style: kursiv; blockquote cite: før innhold: "\ 2014 \ 2009";
8. Blockquote med bakgrunnsmønster
I dette eksemplet har vi brukt et bakgrunnsbilde som mønster for blockquote.
blockquote width: 450px; background-image: url ( 'http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); grense: 1px solid #ccc; boksskygge: 1px 1px 1px #ccc; font-style: kursiv; blockquote cite: før innhold: "\ 2014 \ 2009";
9. Bruke flere bilder i Blockquote Background
Du kan bruke flere bilder i blockquote bakgrunn ved hjelp av css. I dette eksemplet har vi brukt blockquote: før pseudoelement for å legge til et annet bakgrunnsbilde til blockquote.
blockquote width: 450px; background-image: url ( 'http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); grense: 1px solid #ccc; boksskygge: 1px 1px 1px #ccc; font-style: kursiv; blockquote: før posisjon: absolutt; margin-top: -20px; margin-left: -20px; Innhold: url ( 'http://example.com/wp-content/themes/your-theme/images/pin.png'); blockquote cite: før innhold: "\ 2014 \ 2009";
Vi håper at du fant denne artikkelen nyttig når du lærte hvordan du tilpasser blockquotes-stilen i WordPress. Hvis du har spørsmål eller forslag, vær så snill å legge igjen en kommentar nedenfor.