Citace uvnitř článku II.

Posledně jsem vám ukazovala, jak můžete nastavit vzhled citovaného textu. Jeho rámování, barvu, typ písma a mnoho dalších vychytávek. Takže pokud používáte například úryvky z knih a podobně, mohl se vám návod hodit. Pro zopakování se můžete podívat tady.

Můj návod.

Kopírovat se zdrojem!

Dneska vám ukážu, jak nastavit více variant. Například já na svém blogu mám klasickou citaci...

... spoilerovou citaci....

... citaci zdrojového kódu v těchto návodech...

a možností je mnohem více. Záleží jen na vaší představivosti...

Opět platí základy předchozího návodu. Každá citace může mít jinou barvu, font, můžete měnit tvary, cokoli vás napadne. Ale abyste mohli mít těchto variant víc, musíte využít malé odbočky...

Jak nastavit víc typů

Klasická základní citace je psaná takto, její nastavení v šabloně...

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

to znamená, že v článku máte uvedeno toto (pod tlačítkem HTML)...

<blockquote>Lorem <b>ipsum </b>dolor sit amet, <u>consectetuer </u>adipiscing elit. <i>Nam </i>quis
nulla. Duis condimentum augue id magna semper rutrum. Maecenas ipsum
velit, consectetuer eu lobortis ut, dictum at dui. Vivamus porttitor
turpis ac leo. Aliquam ante. Mauris elementum mauris vitae tortor.
Aenean fermentum risus id tortor. Duis pulvinar. Etiam dui sem,
fermentum vitae, sagittis id, malesuada in, quam. Maecenas fermentum,
sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra
metus odio a lectus.</blockquote>

pokud však chcete napsat další typ, musíte ho zapsat takto, menší oklikou...

div .blockquote2 {
font-weight: normal;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
border: 1px solid #DDDDDD;
}
div .blockquote2:before {
content: " SYMBOL NEBO TEXT ";
color: #cccccc;
font-family: Times;
font-size:10px;
font-weight: normal;
line-height:0px;
position: absolute;
left: 10px;
top:8px;
}
div .blockquote2:after {
 content: " SYMBOL NEBO TEXT ";
color: #cccccc;
font-family: Times;
font-size:10px;
font-weight: normal;
line-height:0px;
position: absolute;
right: 10px;
bottom:5px;
}

Místo blockquote2 si můžete napsat jakýkoli název, třeba anotace, spoiler a podobně.

A v textu bude html zápis vypadat takto...

<div class="blockquote2">Lorem <b>ipsum </b>dolor sit amet, <u>consectetuer </u>adipiscing elit. <i>Nam </i>quis
nulla. Duis condimentum augue id magna semper rutrum. Maecenas ipsum
velit, consectetuer eu lobortis ut, dictum at dui. Vivamus porttitor
turpis ac leo. Aliquam ante. Mauris elementum mauris vitae tortor.
Aenean fermentum risus id tortor. Duis pulvinar. Etiam dui sem,
fermentum vitae, sagittis id, malesuada in, quam. Maecenas fermentum,
sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra
metus odio a lectus.</div>

Samozřejmě je možné použít na všechny varianty jen základ citace, třeba jen jiné rámování, aniž byste vkládali symboly či text, tak jako mám já na začátku...

blockquote {
font-weight: normal;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
border: 2px solid #0066FF;
}
div .blockquote2 {
font-weight: normal;
padding: 10px 40px 10px 40px;
width: 75%;
margin-left: 40px;
text-align: justify;
position: relative;
border: 2px solid #00CC00;
}

Doufám, že vám tento návod pomohl a je dostatečně srozumitelný :-)