Dneska se podíváme na to, jaké druhy citací můžeme na blogu použít. Je jich opravdu nepřeberné množství, takže uvedu jen pár jako příklad, aby bylo jasné, jaké možnosti vůbec existují... V tomto návodu jsem hodně využila svoje nápady, věci, které jsem objevila a pár tipů z této stránky.

Předem upozorňuji, že před veškerými změnami proveďte zálohu, ať máte jistotu, kdyby se vám něco nepodařilo...

Veškeré kódy se vkládají nad ]]></b:skin>

Můj návod.

Kopírovat se zdrojem!

Obyčejná citace


blockquote {
font-weight: normal;
font-size: 12px;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
border: 1px solid #DDDDDD;
}

border: ...; - rámeček citace, můžete hodně experimentovat
width: 75%; - šířka citace
font-size: 12px; - velikost písma
1px - určuje šířku ráměčku, klidně mužete mít širší linky,
#DDDDDD - určuje barvu rámečku,
solid je jednoduchá čára, dotted tečkovaná, double dvojitá


rámeček můžete mít i jen na některé straně nebo různě kombinovat, nahradit border: 1px solid #DDDDDD;
  • levý rámeček border-left: 1px solid #DDDDDD;
  • pravý rámeček border-right: 1px solid #DDDDDD;
  • rámeček nahoře border-top: 1px solid #DDDDDD;
  • rámeček dole border-bottom: 1px solid #DDDDDD;



také můžete přidat řádek border-radius: 3px; - tím určíte zaoblené rohy (3px určuje velikost obloukových hran)

Citace s uvozovkami


blockquote {
font-weight: bold;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
}

.post blockquote:before {
 content: " \201C ";
color: #757575;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
  position: absolute;
  left: 10px;
  top:25px;
}

.post blockquote:after {
 content: " \201D ";
color: #757575;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
  position: absolute;
  right: 10px;
  bottom:5px;
}

blockquote... vzhled citovaného boxu
post blockquote:before ... určuje symbol na začátku
post blockquote:after... určuje symbol na konci

bold - určuje typ písma (tučné - bold, normální - normal)
\201C - symbol uvozovek, na této stránce si můžete vybrat jakýkoli jiný symbol a vložíte jeho číslo za obrácené lomítko, nebo můžete vložit i text...
#757575 - kód pro barvu písma, na této stránce si můžete zvolit barvu a získáte k ní její html kód
50px - velikost symbolu
10px - posuváte symbol doleva či doprava podle potřeby (left - levá, right - pravá)
5px - posuváte symbol nahoru či dolů podle potřeby (top - nahoru, bottom - dolů)


Také můžete kombinovat více věcí...


blockquote {
font-weight: bold;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
border-left: 1px solid #DDDDDD;
}

.post blockquote:before {
content: " \201C ";
color: #757575;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
position: absolute;
left: 10px;
top:25px;
}


Citace v bublině


.post blockquote {
background: linear-gradient(#C1BDBD, #5F5F5F) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font-size: 11px;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #C1BDBD;
border-style: solid;
border-width: 30px 0px 0px 20px;
top: -30px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}

#C1BDBD, #5F5F5F - barva boxu, nejdříve nahoře, potom dole, vytvoří to přechod
#FFFFFF - barva textu
11px - velikost písma
#C1BDBD - barva trojúhelníku nad boxem


.post blockquote {
background: linear-gradient(#C1BDBD, #5F5F5F) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 30px 5px;
padding: 15px 30px;
position: relative;
font-size: 11px;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #C1BDBD;
border-style: solid;
border-width: 0px 30px 20px 0px;
top: 20px;
content: "";
display: block;
left: -30px;
position: absolute;
width: 0;
}


A ještě jednobarevná nestínovaná verze...

.post blockquote {
background: #C1BDBD;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 30px 5px;
padding: 15px 30px;
position: relative;
font-size: 11px;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #C1BDBD;
border-style: solid;
border-width: 0px 30px 20px 0px;
top: 20px;
content: "";
display: block;
left: -30px;
position: absolute;
width: 0;
}


Další bubliny

Opravdu hodně flexibilní. Máte na výběr mnoho možností a kombinací. Bubliny lze umístit kamkoli...

.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #C92E2E;
border-radius: 70px 70px 70px 70px;
color: #333333;
margin: 1em 140px 80px;
padding: 30px 30px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #D56666;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #F19E9E;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}




.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #EE7C2A;
border-radius: 130px 130px 130px 130px;
color: #333333;
margin-bottom: 50px;
padding: 50px 50px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #EEA36D;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #F2C6A6;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 70px;
width: 25px;
z-index: 10;
}




.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #3228EB;
border-radius: 130px 130px 130px 130px;
color: #333333;
margin-top: 50px;
padding: 50px 50px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #8B87DA;
border-radius: 50px 50px 50px 50px;
top: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #C9C7F7;
border-radius: 25px 25px 25px 25px;
top: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 70px;
width: 25px;
z-index: 10;
}



.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #2FB41D;
border-radius: 70px 70px 70px 70px;
color: #333333;
margin: 1em 140px 80px;
padding: 30px 30px;
position: relative;
text-align: justify;
font-size: 11px;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #69CF5C;
border-radius: 50px 50px 50px 50px;
top: 20px;
content: "";
display: block;
height: 50px;
position: absolute;
left: -40px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #E39A25;
border-radius: 25px 25px 25px 25px;
top: 10px;
content: "";
display: block;
height: 25px;
position: absolute;
left: -70px;
width: 25px;
z-index: 10;
}

border: 5px solid #...; - barvy a tloušťka ráměčků
border-radius: ...; - určuje jak moc se rámeček podobá kruhu či obdélníku
#333333 - barva textu
padding: ...; - odsazení textu od okraje rámečku
margin: 1em 140px 80px; - čím bude text delší, bude se rámeček prodlužovat směrem dolů, ale nebude se rozšiřovat, pokud nechcete, smažte celý řádek
top: 10px; / left: -70px; / ... - tímto určíte polohu menších kruhů, vždy vybíráte pozici odshora nebo odspodu (top, bottom) a zleva nebo zprava (left, right). Například když chcete kruh v horním levém rohu, použijete top a left. Čísla potom určují o kolik je posun oproti rohu rámečku. Takže když chcete kruh například nad rámeček, dáváte hodnotu se znaménkem mínus viz příklady.



Snad vám pomůže na pochopení i tento obrázek...


Doufám, že je to alespoň trochu srozumitelné. Těch možností je samozřejmě mnohem více. Příště se pokusím ukázat, jak je možné mít i více druhů citací. Například když budete chtít mít citát z knihy, pak třeba spoiler v jiném rámečku apod...