Vzhled stylování obsahu (Styleguide)

• Nadpisy
• Odstavce
• Bloky
• Seznamy
• Externí odkaz
• Obrázky
• Tabulky

Nadpisy

Nadpisy lze přiřazovat pomocí roletkového výběru "Formát".

Nadpis H1

Nadpis H2

Nadpis H3

Nadpis H4

Nadpis H5

Nadpis H6

Odstavce

Odstavce lze stylovat pomocí roletkového výběru "Style".

Normální odstavec - zarovnaný vlevo

Defaultní nastavení bez stylu. Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Normální odstavec - zarovnaný vpravo

Přiřazený styl text-right. Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Normální odstavec - zarovnaný soumerne

Přiřazený styl text-justify. Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Normální odstavec - zarovnaný na střed

Přiřazený styl text-center. Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Zvýrazněné odstavce podbarvením

Odstavce lze stylovat pomocí roletkového výběru "Style".

Přiřazený styl odstavecUvodnik. Úvodník, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecVystraha. Výstraha, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.
Výstraha

Přiřazený styl odstavecPotvrzeni. Potvrzení, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecPoznamka. Poznámka, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecRada. Rada, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecDulezite. Dulezite, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecCitace. Citace, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Obrázkové odstavce s malou ikonou

Přiřazený styl odstavecVystraha a vystrahaM. Výstraha, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Přiřazený styl odstavecPotvrzeni a potvrzeniM. Potvrzení, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Přiřazený styl odstavecPoznamka a poznamkaM. Poznámka, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Přiřazený styl odstavecRada a radaM. Rada, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Přiřazený styl odstavecDulezite a duleziteM. Dulezite, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Přiřazený styl odstavecCitace a citaceM. Citace, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Obrázkové odstavce se střední ikonou

Přiřazený styl odstavecVystraha a vystrahaS. Výstraha, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Přiřazený styl odstavecPotvrzeni a potvrzeniS. Potvrzení, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Přiřazený styl odstavecPotvrzeni a vystrahaS. Poznámka, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Přiřazený styl odstavecRada a radaS. Rada, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Přiřazený styl odstavecDulezite a duleziteM. Dulezite, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Přiřazený styl odstavecCitace a citaceM. Citace, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Obrázkové odstavce s velkou ikonou

Přiřazený styl odstavecVystraha a vystrahaV. Výstraha, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Přiřazený styl odstavecPotvrzeni a potvrzeniV. Potvrzení, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.
Potvrzení

Přiřazený styl odstavecPoznamka a poznamkaV. Poznámka, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Přiřazený styl odstavecRada a radaV. Rada, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Přiřazený styl odstavecDulezite a duleziteV. Dulezite, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Přiřazený styl odstavecCitace a citaceV. Citace, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Barevné bloky s obrázkem a odstavci

Do barevného bloku je možné nahrát jakýkoliv obrázek, který budou optékat odstavce. Na blok lze aplykovat barevné styly předchozích odstavců. Pro rozšířené úpravy prvků uvnitř bloku je nutné se přepnout do html kodu!

Kliknutím na obrázek můžete pomocí ikony "Vložit/upravit" obrázek změnit. Odentrováním můžete dále přidávat další odstavce. Změnu barvy pozadí však lze zmenit jen po přepnutí-se do html kodu a přepsání třídy odstavecRada obalového <div>. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed.

Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Kliknutím na obrázek můžete pomocí ikony "Vložit/upravit" obrázek změnit. Odentrováním můžete dále přidávat další odstavce. Změnu barvy pozadí však lze zmenit jen po přepnutí-se do html kodu a přepsání třídy odstavecPotvrzeni obalového <div>. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Další možnosti úprav v bloku

Nadpis H2

Do bloku je možné vkládat další prvky jako třeba nadpisy, nebo odrážkový seznam.

Seznam ovšem nesmí být vedle obrázku umístěného vlevo (odrážky se schovají pod obrázek).

Ideální umístění orážkového seznamu je mimo obrázky, případně použít obrázek umístěný vpravo.

• Morbi leo libero non Suspendisse
• pharetra diam vel massa. Neque
• Quisque ac pellentesque eu sodales egestas purus pellentesque
• Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Seznamy

Seznam lze stylovat pomocí ikon "Řazený seznam" a "Neřazený seznam".

Jmenný seznam - bez odrážek horizontální

Seznam lze stylovat pomocí roletkového výběru "Style". Přiřazený styl list-inline.

• Odrazka
• Odrazka
• Odrazka
• Odrazka
• Odrazka

Jmenný seznam - bez odrážek

Seznam lze stylovat pomocí roletkového výběru "Style". Přiřazený styl list-unstyled.

• odrazka
• odrazka s odkazem
• odrazka strong
• odrazka tučně - výrazně
• odrážka kurzíva

Jmenný seznam - odrážky kolečka

Seznam lze stylovat pomocí ikony "Neřazený seznam".

• odrazka
• odrazka s odkazem
• odrazka strong
• odrazka tučně - výrazně
• odrážka kurzíva

Jmenný seznam - obrázkové odrážky

Seznam lze stylovat pomocí roletkového výběru "Style". Přiřazený styl seznam-obrazkovy.

• hlavní obrázková odrážka webu
• hlavní obrázková odrážka webu s odkazem
• hlavní obrázková odrážka webu strong
• hlavní obrázková odrážka webu kurzíva

Číselný seznam

Seznam lze stylovat pomocí ikony "Řazený seznam".

1. odrazka
2. odrazka s odkazem
3. odrazka strong
4. odrazka tučně - výrazně
5. odrážka kurzíva

Číselný seznam s obrázky čísel do 10

Upravený Řazený seznam. Celému seznamu je přiřazen styl seznam-ciselny jednotlivým odrážkám pak postupně slul jedna, dva, tri, ctiry, pet, sest, sedm, osm, devet, deset.

1. jedna, tučně, kurzíva, výrazně, nevýrazně, odkaz
2. dva
3. tři
4. čtyři
5. pět
6. šest
7. sedm
8. osm
9. devět
10. deset

Seznamy v bloku (výhoda - nevýhoda)

Definiční seznam

Definiční Termín 1

Vysvětlení termínu 1 ..... Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam.

Definiční Termín 2

Vysvětlení termínu 2 .....Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam.

Definiční Termín 3

Vysvětlení termínu 3 .....Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam.

Externí odkaz

Odkaz směřující na  jiný web může být doplněn upozorňující ikonou. Přiřazený styl externi-odkaz.

Externí odkaz na www.webprezent.cz

Obrázky

Základní styly obrázků

Obrázkům lze přiřadit základní styly img-rounded (oblé rohy), img-circle (kulatý obrázek) a img-thumbnail (obrázek s rámečkem). Styly lze i kombinovat a získat tak třeba kulatý obrázek s rámečekem.

 

 

Obrázek přes celou šířku obsahu

Obrázek přes celou šířku webu, případně obrázek uprostřed stránky center-block. Přidáním stylu img-thumbnail pak obrázek doplní rámeček.

Obrázek obtékaný textem zprava

Obrázek se stylem img-left. Přidán je i rámeček img-thumbnail. Amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.

Obrázek obtékaný textem zleva

Obrázek se stylem img-right. zajistí zarovnání obrázku vpravo. Přidán je i rámeček img-thumbnail. Amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.

Fotogalerie (3 obrázky)

Fotogalerie (6 obrázky)

Fotogalerie (4 obrázky)

Fotogalerie (8 obrázky)

Název šablony s cestou v editoru: ObrazkyFotogalerie-8-fotek.html

Tabulky

Pomocí editoru lze snadno a rychle přidat (nebo odebrat) další sloupce a řádky při zachování stylu přes ikony vložení řádku, či sloupce (potažmo smazat řádek, či sloupec).

Tabulka základní styl

Přiřazený styl table.

Název šablony s cestou v editoru: TabulkyTabulka-zakladni.html

Tabulka se střídajícími-se zvýrazněnými řádky

Přiřazený styl table a  table-striped.

Název šablony s cestou v editoru: TabulkyTabulka-stridajicise-radky.html

Tabulka s rámečky

Přiřazený styl table a table-bordered.

Název šablony s cestou v editoru: TabulkyTabulka-s-ramecky.html

Tabulka se zvýrazněním řádku po najetí myši

Přiřazený styl table a table-hover.

Název šablony s cestou v editoru: TabulkyTabulka-hover-radky.html

Tabulka s menším řádkováním

Přiřazený styl table a table-condensed.

Název šablony s cestou v editoru: TabulkyTabulka-male-radkovani.html

Tabulka s barevnými řádky

Přiřazený styl table a řádkům přiřazeny postupně styly active, success, info, warning, danger.

Název šablony s cestou v editoru: TabulkyTabulka-barevne-radky.html

Kombinovaná tabulka

Výše uvedené styly lze různě kombinovat se zachváním základního stylu table.

Přiřazený styl table, table-striped, table-bordered a dvěma řádkům přiřazeny styly success a danger.