Slik endrer du utseende for sitater i WordPress

567

De som bruker sitater i innlegg ønsker gjerne at utseende for sitater skiller seg fra resten av innholdet.

Sitater kan være noe av det mest minneverdige ved en artikkel, og særlig nettaviser bruker mye tid på hvordan de skal se ut.

I Gutenberg har sitater sin egen blokk, mens i klassisk (eller annen) editor må de settes inn med en kode:

<blockquote class="wp-block-quote">
<p>A day without laughter is a day wasted.</p>
<cite>Charlie Chaplin</cite>
</blockquote>

A day without laughter is a day wasted.

Charlie Chaplin

Det er temafilen styles.css som bestemmer hvordan sitater ser ut i WordPress. Hvis du ikke er fornøyd, kan du endre utseende for sitater med noen enkle steg.

Hvordan endre utseende for sitater

For å endre utseende for sitater, må vi endre eller legge til CSS kode for temaet i WordPress.

Du kan gjøre dette på flere måter:

• Legg til CSS kode ved hjelp av «tilpass»
• Legg til CSS kode i styles.css for dattertema (les hva er dattertema)
• Endre eller legg til koden i temafilen styles.css

De fleste WordPress temaer lar deg vanligvis legge til ekstra eller egendefinert CSS fra funksjonen «tilpass». Det er denne metoden vi bruker i denne guiden.

Gå til Utseende > Tilpass > Ekstra CSS.

I denne guiden har vi valgt å bruke standard WordPress tema «Twenty Nineteen». Hvis du bruker et annet tema, kan alternativet «Ekstra CSS» hete noe annet hos deg.

Vi skal nå vise deg noen eksempler på CSS kode du kan bruke for å endre utseende for sitater. Du må gjerne endre disse videre for å oppnå ønsket resultat.

Senterjustere sitat

Tatt i betraktning at det meste av innholdet i innlegg er venstrejustert, vil sitater skille seg mer ut ved å bruke senterjustering.

blockquote {
max-width: 550px;
text-align: center;
margin: 20px;
padding: 20px;
}

Endre skrift, farge og størrelse

I dette eksempelet går vi litt videre, og endrer skrift, farge og størrelse.

blockquote {
max-width: 550px;
text-align: center;
margin: 20px;
padding: 20px;
font-family: Arial,Helvetica Neue,Helvetica,Sans-Serif;
font-size: 20px !important;
color: #0076C5 !important;
}

Legg til bakgrunn

La oss ta sitater enda et skritt videre, og si at du vil legge til en bakgrunn til stilen over. Det gjøres ved å legge til en linje til med CSS kode.

blockquote {
max-width: 550px;
text-align: center;
margin: 20px;
padding: 20px;
font-family: Arial,Helvetica Neue,Helvetica,Sans-Serif;
font-size: 20px !important;
color: #0076C5 !important;
background: #F9F9F9;
}

Eksempel: Sitat med stiplet linje

Helt til slutt tar vi med et eksempel hvor vi har laget stiplet linje og endret farge på «cite» (forfatter John Smith).

blockquote {
font-family: Georgia, Sans-Serif;
font-size: 20px !important;
max-width: 550px;
margin: 20px;
padding: 20px;
line-height: 1.45;
position: relative;
color: #0076C5 !important;
border-left:4px dashed #c1c1c1 !important;
background:#F9F9F9 !important;
}
 
blockquote cite {
color: #C70039 !important;
font-size: 15px !important;
display: block;
margin-top: 5px;
}
  
blockquote cite:before {
content: "\2014 \2009";
}

Har du spørsmål kan du benytte kommentarfeltet under, eller bruke kontaktskjemaet vårt. Vi svarer på alle henvendelser.