- 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.
Vyberte si barvu
Pro šablonu Eris jsme připravili těchto šest barevných odstínů:
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ý.
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.
Související články k úpravám šablony ERIS
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