Vzhled webu

#513

Pro vzhled webu můžeme využít jeden z předdefinovaných vzhledů, nebo si můžeme vytvořit svůj vlastní.

Pokud si chceme vytvořit svůj vlastní, přesuneme se do WebVzhledy.

Po kliknutí na tlačítko Přidat se musíme jako první ve formuláři přesunout na část Nastavení.

  • Vzhled Nazveme.
  • Typ šablony vybereme typ šablony. My chceme vytvořit šablonu pro web, takže vybereme možnost „Web“.
  • Šablona vybereme šablonu, kterou chceme použít. Tato možnost ovlivní jaké kolonky se vytvoří v části Základní. Ovlivní to tedy, co všechno si budeme moci nastavit. Běžně se používá možnost „Základní šablona“.

Po vybrání šablony se nám formulář automaticky uloží a my se můžeme přesunout do Základní, kde se nám vytvořily kolonky, ve kterých budeme definovat barvy. Barvy můžeme vybírat z pravého sloupce, ale můžeme také vkládat Hex kódy.

Vysvětlení kolonek

  • Pozadí a Barva pozadí – barva pozadí elementu.
  • Písmo a Barva textu - barva textu v daném elementu.
  • Barva textu odkazů – barva odkazu, který ještě nebyl zobrazen. Liší se od barvy textu, pokud zde barvu nadefinujeme.
  • Barva textu odkazů pod kurzorem – tato barva se zobrazí, když budeme na odkazu stát kurzorem.
  • Barva textu již navštívených odkazů – pokud si uživatel tento odkaz již někdy zobrazil, bude mít odkaz tuto barvu.
  • Hlavička – barva pozadí označení – v hlavičce se v menu obarvuje webová stránka, na které se právě nacházíme. Obarvení (zvýraznění) bude mít tuto barvu.

Nastavení stylu

Pokud nechcete používat kolonky v Základní je možné využít části Nastavení stylu. Tady nastavíte proměnným barvy.

Ukázka kódu:

$e10w-body-bg: #F6E4D1;
$e10w-body-text: #000000;
$e10w-content-link-tex: #D1F6F6;
$e10w-content-link-visited-text: #D1F6F6;

$e10w-navbar-bg: #D1F6F6;
$e10w-navbar-text: #D2D1F6;

Seznam id, které můžete používat

Id Vysvětlivka
Tělo stránky
e10w-body-bg barva těla webu
e10w-body-text barva textu v těle webu
Hlavička
e10w-navbar-bg barva hlavičky
e10w-navbar-text barva textu v hlavičce
e10w-navbar-select-bg barva v menu, která podbarvuje stránku, na které se právě nacházíme
e10w-navbar-select-text barva textu aktuální stránky v menu
Patička
e10w-footer-bg barva patičky
e10w-footer-text barva textu v patičce
e10w-footer-link-text barva textu odkazů v patičce
e10w-footer-link-hover-text barva textu odkazů po najetí kurzorem
e10w-footer-link-visited-tex barva textu již navštívených odkazů
Obsah
e10w-content-bg barva pozadí obsahu (rozdílná od barvy těla stránky)
e10w-content-text barva textu obsahu
e10w-content-link-text barva textu odkazů
e10w-content-link-hover-text barva textu odkazů po najetí kurzorem
e10w-content-link-visited-text barva textu již navštívených odkazů
Levý sloupec
e10w-sb-start-bg barva levého sloupce
e10w-sb-start-text barva textu v levém sloupci
e10w-sb-start-link-text barva textu odkazů
e10w-sb-start-link-hover-text barva textu odkazů po najetí kurzorem
e10w-sb-start-link-visited-text barva textu již navštívených odkazů
Pravý sloupec
e10w-sb-end-bg barva pravého sloupce
e10w-sb-end-text barva textu v pravém sloupci
e10w-sb-end-link-text barva textu odkazů
e10w-sb-end-link-hover-text barva textu odkazů po najetí kurzorem
e10w-sb-end-link-visited-text barva textu již navštívených odkazů