Skip Navigation LinksALVAO 10.3ALVAO Service DeskImplementace systému v organizaciVlastní úpravy a rozšířeníVlastní vzhled Skip Navigation Links. Skip Navigation Links Skip Navigation Links.


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:

  1. 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.
  2. 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".
  3. 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:

$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.