Vlastní vzhled

Vzhled ALVAO WebApp si můžete přizpůsobit potřebám vaší organizace v WebApp – Správa – Nastavení – WebApp.

Pokročilejší změny vzhledu, jako např. změny barev, řezů a velikostí písma, rozměrů grafických elementů atd., můžete realizovat vytvořením vlastního souboru kaskádových stylů (CSS) takto:

Ve složce s nainstalovaným WebApp v podsložce Custom si vytvořte složku s názvem společnosti. V ní vytvořte podsložku Theme. Tato složka bude obsahovat všechny úpravy ovlivňující vzhled. Měla by mít stejnou hierarchii jako složka Content v instalační složce WebApp:

Content/
- img/ – složka s obrázky
- fonts/ – složka s písmy
- .scss – soubory s kaskádovými styly

Poznámka:

Složka Custom/<název_společnosti> se používá pro vlastní formuláře.

V souboru Web.config v sekci appSettings nastavte položku CustomThemePath na cestu ke složce Theme. Např., když jsou úpravy vzhledu ve složce <instalační složka ALVAO WebApp>/Custom/Company1/Theme, tak položku CustomThemePath nastavte na "~/Custom/Company1/Theme".

Povolte přístup do této složky i pro nepřihlášené uživatele (styly se aplikují i na přihlašovací stránce). V souboru Web.config najděte řádek "<location path="Scripts">". Za něj doplňte:

<location path="Custom/<název společnosti>/Theme">
<system.web>
  <authorization>
   <allow users="*" />
  </authorization>
</system.web>
</location>

Všechny SCSS soubory v této složce budou načteny na každé stránce WebApp. Tyto soubory se načítají jako poslední, takže pravidla mají větší váhu než pravidla v systémových SCSS souborech ve složce Content. Všechny ostatní soubory v této složce mají přednost před soubory ve složce Content, včetně obrázku ve složce img.

Proměnné

V SCSS souborech můžete používat následující proměnné. Syntaxe nastavení hodnoty proměnné: : „<název proměnné>: <hodnota>;“.

Proměnná

Popis

$navbar-bg-color

Barva horního navigačního panelu

$navbar-hover-bg-color

Barva prvků v horním navigačním panelu po najetí myší

$search-bg-color

Barva vyhledávacího pole v horním navigačním panelu, pokud není aktivní

$navbar-search-focus-bg-color

Barva horního navigačního panelu po aktivaci vyhledávacího pole

$navigation-sd-bg-color

Barva levého navigačního panelu

Poznámka:

ALVAO WebApp používá svoji paletu 7 odstínů základní barvy, které jsou použity jako výchozí barvy jednotlivých grafických prvků. Jednotlivé odstíny jsou uloženy v proměnných $primary-color-dark-3, $primary-color-dark-2, $primary-color-dark-1, $primary-color, $primary-color-light-1, $primary-color-light-2 a $primary-color-light-3 (od nejtmavší po nejsvětlejší), přičemž základní barva je uložena v proměnné $primary-color. Paletu můžete změnit, pro konzistentní vzhled WA, ale budete muset provést další úpravy.

Příklad

Pokud chcete změnit barvu horního navigačního panelu na červenou, vytvořte složku Custom/<název společnosti>/Theme a v ní vytvořte prázdný soubor Custom.scss. Do souboru zapište pravidlo:

V souboru Web.config nastavte položku CustomThemePath na hodnotu "~/Custom/<název společnosti>/Theme".

Vypnutí vlastního vzhledu

V případě, že chcete opět používat standardní vzhled ALVAO WebApp, v souboru Web.config nastavte položku CustomThemePath na prázdnou hodnotu.

Zálohování vlastního vzhledu

Nastavení vlastního vzhledu doporučujeme zálohovat buď v rámci záloh celého aplikačního serveru, příp. zálohováním složky Custom/<název společnosti>/Theme.

Upgrade ALVAO

Při upgrade na novou verzi ALVAO může dojít ke změnám v kaskádových stylech ALVAO WebApp. Po upgrade proto doporučujeme zkontrolovat vzhled WebApp a vlastní vzhled případně upravit.