0 Kč bez DPH
  • WYSIWYG verze 3.5
    • Návod je vytvořen ve WYSIWYG editoru verze 3.5 Více »

Zvýrazněte důležitý text pomocí infoboxu - šablona ERIS

12. 11. 2013

Potřebujete-li oznámit něco důležitého a zviditelnit informaci tak, aby byla nepřehlédnutelná, jistě využijte vlastnost infobox. Tato vlastnost je novinkou šablony ERIS.

zvyrazneni

Vyberte si barvu

Pro šablonu Eris jsme připravili těchto šest barevných odstínů:

ukázka barev

Jak na to?

Otevřete si editaci článku ve kterém chcete zvýraznění použít. Klikněte na tlačítko HTML (po najetí myší se zobrazí Upravit HTML zdroj). Otevře se vám zdánlivě nepřehledný kód. Je v něm text, který jste do článku sami napsali.  Text začínající <p> je odstavec, ten se zavírá znaky </p> a text ohraničený v <h> je nadpis.
Více o základech CSS.

Pokud chcete text vkládat do postranního sloupce, vytvořte si stránku novou. Editor HTML bude prázdný.

najdi html

Do editoru napiště kód ve tvaru:

<p class="info red"> Text vaší informace </p>

Pokud chcete informaci napsat na dva řádky, ukončete první řádek tagem <br>.

Úpravu HTML kódu ukončíte tlačítkem aktualizovat.

V editačním textovém poli se zobrazí váš text bez zvýraznění, to se projeví až na vašich stránkách. Zde můžete upravit ještě tloušťku písma či zarovnání.

Přehledná tabulka přednastavených barev infoboxu:

Barva

kód p class=

Tyrkysová info cyan
Modrá info blue
Zelená info green
Červená info red
Fialová info purple
Růžová info pink

Nezapomeňte ukončit úpravu stránky tlačítkem Upravit stránku.

Kateřina Koukalová
Webdesigner
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • info red

    21. 11. 2013 13:40:12 | Libor Jiránek

    Dobrý den,

    p class="info red" => červená - ok, ale:
    p class="info red" => růžová???
    Nemělo by tam být třeba:
    p class="info pink"? ... Nebo něco podobného.

    Řešil jsem toto už dříve asi před rokem a půl u jiného zákazníka a na jiné šabloně a realizoval přes table a je to možná i zajímavější o to, že se ten "infobox" při přejetí myší zvýrazní. Viz http://www.estetika-novotna.cz/

    S pozdravem
    jiranek.cz

    Odpovědět

  • RE: info red

    22. 11. 2013 11:12:40 | Vladimír Souš

    Dobrý den,
    děkujeme za upozornění, chybu v návodu jsme ihned opravili, správně tam má samozřejmě být "pink".
    Zvýraznění při najetí je většinou u odkazů, takže to určitě globálně zavádět nebudeme, nicméně pokud chcete při najetí myši text zvýraznit, použijte následující zápis:
    .red:hover {
    background: none repeat scroll 0 0 #XXXXXX;
    border: 1px solid #XXXXXX;
    }
    Kde XXXXXX nahradíte vždy příslušným hexadecimálním kódem barvy, více zde:
    http://www.blog.inpage.cz/inpage/css-uzivatelske-zaklady/

    Přeji hezký zbytek dne.

    Odpovědět