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 WebApp, 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:

$navbar-bg-color: red;

nebo

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

Soubor uložte.

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.

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