Vlastní vzhled
V ALVAO WebApp je možné:
- upravit vzhled přes kaskádové styly (barvy, velikosti, …)
- nahradit zobrazovanou grafiku za vlastní (např. vlastní logo v záhlaví
stránky)
Pokud chcete upravit vzhled tak:
- 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
- .css –kaskádové styly
Poznámka:
Složka Custom/název společnosti se používá pro vlastní formuláře.
- V souboru Web.config nastavte položku
CustomThemePath v sekci "appSettings" na cestu ke složce Theme.
Např. když jsou úpravy vzhledu ve složce <instalační složka ALVAO WebApp>/Custom/ALVAO/Theme,
tak položku
CustomThemePath nastavte na "~/Custom/ALVAO/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>
Následně:
- Všechny CSS soubory v této složce budou načteny v každé stránce. Tyto
soubory se načítají jako poslední, takže pravidla mají větší váhu než
pravidla v CSS 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.
Příklad
Pokud chcete změnit logo v ALVAO WebApp, tak vytvořte složku Custom/<název
společnosti>/Theme/img a do ní umístěte logo ve
formátu PNG a přejmenuje ho na "logo.png".
Dále přidejte verzi loga ve čtvercovém poměru stran pro užší zobrazení WebApp na mobilních zařízeních. To pojmenujte "logo-short.png". V souboru
Web.config nastavte položku
CustomThemePath na hodnotu "~/Custom/<název společnosti>/Theme".
Při zobrazení stránky má obrázek v složce s úpravami větší váhu než
výchozí obrázek ve složce Content/img, takže se zobrazí
upravené logo.
V případě, že chcete upravit např. barvy, tak ve složce Theme
vytvořte soubor Custom.css. Do něho zapište pravidlo:
.navbar-default
{
background-color: red;
}
Soubor uložte. Při dalším zobrazení ALVAO WebApp bude tento soubor načten a
pravidlo způsobí zabarvení modrého pruhu na červeno.
Vypnutí vlastního vzhledu
V případě, že chcete opět používat standardní vzhled ALVAO WebApp, tak
nastavte položku CustomThemePath v souboru Web.config na
prázdnou hodnotu.
Upgrade ALVAO WebApp
V případě, že v dalších verzích ALVAO WebApp dojde k úpravě přes kaskádové
styly, tak se tyto změny promítnou i do upraveného vzhledu.
Zálohování vlastního vzhledu
V případě, že chcete zálohovat nastavení vlastního vzhledu, zazálohujte si
složku Custom/<název společnosti>/Theme.
Nenašli jste co jste hledali? Zeptejte se našeho týmu technické podpory.
|