Vlastní vzhled

Vzhled aplikace ALVAO WebApp můžete přizpůsobit potřebám své organizace v nabídce WebApp - Administration - Settings - WebApp.

Pokročilejší změny vzhledu, jako je změna barev, řezů a velikostí písma, velikostí grafických prvků atd. můžete provést vytvořením vlastního souboru kaskádových stylů (CSS) následujícím způsobem:

Ve složce s nainstalovanou aplikací WebApp v podsložce Custom vytvořte složku s názvem společnosti. V ní vytvořte podsložku Theme. Tato složka bude obsahovat všechna přizpůsobení, která ovlivňují vzhled. Měla by mít stejnou hierarchii jako složka Content (Obsah) v instalační složce aplikace WebApp:
- content/
  - img/ - složka s obrázky
  - fonts/ - složka s písmy
  - .scss - soubory kaskádových stylů
Poznámka:
Složka Custom/<název společnosti> se používá pro vlastní formuláře
V souboru Web.config v části appSettings nastavte položku CustomThemePath na cestu ke složce Theme. Pokud se například úpravy vzhledu nacházejí v instalační složce <ALVAO WebApp>/Custom/Company1/Theme, pak nastavte položku CustomThemePath na "~/Custom/Company1/Theme".
Povolte přístup do této složky nepřihlášeným uživatelům (styly se použijí i na přihlašovací stránce). V souboru Web.config najděte řádek "<location path="Scripts">". Za něj přidejte následující text
<location path="Custom/<název společnosti>/Theme">
<system.web>
<authorization>
<allow users="*" />
</authorization>
</system.web>
</location>

Všechny soubory SCSS v této složce budou načteny na každé stránce webové aplikace. Tyto soubory se načítají jako poslední, takže jejich pravidla mají větší váhu než pravidla systémových souborů SCSS 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 souborech SCSS 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, pokud je aktivováno vyhledávací pole
$navigation-sd-bg-color	Barva levého navigačního panelu

Poznámka:

ALVAO WebApp používá svou paletu 7 odstínů základní barvy, které se používají jako výchozí barvy pro jednotlivé grafické prvky. 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. Tuto paletu můžete změnit, ale pro konzistentní vzhled webové aplikace budete muset provést další úpravy

Příklad

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

$navbar-bg-color: red

nebo

.navbar-default
{
background-color: red;
}

Soubor uložte.

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

Vypnutí vlastního vzhledu

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

Zálohování vlastního vzhledu

Doporučujeme zálohovat nastavení vlastního vzhledu buď v rámci zálohování celého aplikačního serveru, nebo zálohováním složky Custom/<company>/Theme.

Upgrade systému Alvao

Při upgradu na novou verzi aplikace Alvao může dojít ke změnám kaskádových stylů webové aplikace ALVAO. Proto po upgradu doporučujeme zkontrolovat vzhled aplikace WebApp a v případě potřeby upravit vlastní vzhled.

Nenašli jste co jste hledali? Zeptejte se našeho týmu technické podpory.