Vzhled stylování obsahu (Styleguide)


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!

rada-big

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.

vyhoda-big

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.

nevyhoda-big

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

thumb-120x120

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)

  • Výhoda quis tellus Vivamus natoque Donec
  • Nevýhoda quis tellus Vivamus natoque Donec
  • Lorem ipsum dolor sit amet
  • consectetuer quis tellus Vivamus natoque Donec
  • Lorem ipsum dolor sit amet
  • consectetuer quis tellus Vivamus natoque Donec
  • Lorem ipsum dolor sit amet
  • consectetuer quis tellus Vivamus natoque Donec
  • Justo id amet consequat natoque commodo fringilla
  • Lorem ipsum dolor sit amet
  • consectetuer quis tellus Vivamus natoque Donec
  • Justo id amet consequat natoque commodo fringilla

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.

thumb-120x120
 
thumb-120x120
 
thumb-120x120

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.

640x480

Obrázek obtékaný textem zprava

thumb-120x120

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

thumb-120x120

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

  Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

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

Přiřazený styl tabletable-striped.

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

  Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

Tabulka s rámečky

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

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

  Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

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

  Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

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

  Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

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

  Název sloupce Název sloupce Název sloupce
Styl active: Hodnota Hodnota Hodnota
Styl success: Hodnota Hodnota Hodnota
Styl info: Hodnota Hodnota Hodnota
Styl warning: Hodnota Hodnota Hodnota
Styl danger: Hodnota Hodnota Hodnota

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.

  Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota