Dnes vyšlo 2 článků

Jak ve WordPressu přizpůsobit styl blokových citací

Jak ve WordPressu přizpůsobit styl blokových citací

Citace jsou často velice důležité části vašeho článku. Jsou také nejvíce sdílené ve všech možných příspěvcích a prezentacích. To je důvod, proč noviny a významná média přizpůsobují styl blokových citací tak, aby vynikly. V tomto článku si ukážeme, jak přizpůsobit styl citací ve WordPressu.

WordPress vám umožní přidat citaci do vašich příspěvků s využitím panelu nástrojů.

wordpress-citace2

To do vašeho příspěvku přidá HTML tagy, jejichž styl můžeme přizpůsobit.
Poznámka: Výsledek uvedený níže uvidíte pouze po přepnutí do zobrazení HTML.

<blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.
<cite>Wise Man</cite></blockquote>

Pro upravení stylu blokové citace ve vašem WordPressu musíte najít soubor style.css a v něm udělat drobné úpravy. Můžete to udělat buď tak, že budete editovat přímo ve vaší WordPress administraci nebo budete upravovat soubory přes FTP.

Pak už nezbývá nic jiného, než najít v souboru style.css dané tagy a jejich styl změnit. Pokud žádné takové tagy neexistují, jednoduše je přidejte.

Využít můžete některé z následujících příkladů formátování blokových citací.  Můžete také více z nich spojit do jednoho a přizpůsobit svůj styl tomu, po čem vaše srdce touží.

1. Klasický styl s uvozovkami

Pro přidání velkých uvozovek lidé obvykle používají CSS vlastnost background-image. V tomto příkladu jsou tedy pomocí CSS přidány velké uvozovky.

classic-css-blockquote

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

2. Klasické uvozovky pomocí obrázku

V tomto příkladu jsou uvozovky vytvořeny pomocí obrázku.

classic-image-quotes

blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(http://example.com/wp-content/
        themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

 3. Jednoduchá citace

V tomto příkladu je použito jen jednoduché pozadí a místo uvozovek je vylepšený levý okraj. Nebojte se pohrát si s barvami.

simple-css-blockquote-example

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

 4. Barevná citace

Citace s jednoduchým stylem. Ve změně barev se vám meze nekladou.

orange-blue-white

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

5. Použití Google Web Fonts v citaci

V tomto příkladu je použitý font Droid Serif z Google knihovny webových fontů.

google-font-blockquote

blockquote {
@import url(http://fonts.googleapis.com/
css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
} 
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

6. Citace s oblými rohy

V tomto příkladu je bloková citace se zaoblenými rohy a na okrajích je využitý stín.

round-corner-blockquote

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

 

7. Citace s přechodovým pozadím

V tomto příkladu citace je použitý přechod z CSS3. Je to trochu složitější problematika, protože je problém s kompatibilitou v jednotlivých prohlížečích. Doporučuje se používat colorlabs, CSS generátor přechodu.

css-gradient-blockquote

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient
(top,  #7d7e7d 0%, #0e0e0e 100%); 
/* FF3.6+ */
background: -webkit-gradient
(linear, left top, left bottom, 
color-stop(0%,#7d7e7d), 
color-stop(100%,#0e0e0e)); 
/* Chrome,Safari4+ */
background: -webkit-linear-gradient
(top,  #7d7e7d 0%,#0e0e0e 100%); 
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient
(top,  #7d7e7d 0%,#0e0e0e 100%); 
/* Opera 11.10+ */
background: -ms-linear-gradient
(top,  #7d7e7d 0%,#0e0e0e 100%); 
/* IE10+ */
background: linear-gradient
(to bottom,  #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;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

8. Citace se vzorem na pozadí

V tomto příkladu je na pozadí citace použit obrázek se vzorem.

background-blockquote

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/
themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

9. Využití více obrázků v pozadí citace

V pozadí citace můžete pomocí CSS využít více obrázků. V tomto příkladu je použitý jeden obrázek jako pozadí a druhý představuje špendlík.

multiple-background-blockquote

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/
themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/
themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "\2014 \2009";
}

Snad vám článek pomohl v tom, jak přizpůsobit styl citací. Máte-li jakékoli dotazy či připomínky, neváhejte a zanechejte nám níže komentář.

Zdroj: wpbeginner.com

Dlouholetá podpora týmu.

Komentáře

Nahoru