pondělí 29. srpna 2016


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ý :-)



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

0 komentářů:

Okomentovat


  • Tipy pro blogery

    Nápady a postřehy, odkoukané fígle, prostě vše, co by se vám mohlo hodit při práci na vašem vlastním blogu...

  • Moje grafika

    Amatérské pokusy o grafiku, mnohdy vytvořené s obrovským štěstím nebo díky volně stažitelné předchystané práci...

  • Calibre program

    Pár návodů s postupy, které jsem objevila díky experimentům s programem nebo diskuzním fórům na netu. Calibre slouží ke správě elektronických knih...