Dokumentace:
Vytvoření subtématu:
Podpora modulů:
- Zastaralé
- Omega Tools – již je součástí Omega 4
- Volitelné (spíše nedoporučené)
- Delta – díky novému konceptu Omega 4 by se měl modul Delta používat jen ve vyjímečných případech
- Doporučené
- Context
- Panels
- Panels Everywhere (je možné zakázat "layout extension" v Omega 4)
- Display Suite
Responsive/Mobile-First HTML5 Base Framework s možností využití gridu (12, 16 a 24 sloupcového rozložení) pro vytváření vlastních přizpůsobivých témat vzhledu reagujících na šířku zobrazovacího zařízení. Ve výchozím nastavení jsou to rozložení Global až do 719px, Narrow 720px až 959px, Normal 960px až 1199px a Wide 1200px a více, případně je možné využít i pružného rozložení Fluid v relativních jednotkách em.
Ruční postup vytvoření subtématu
- Rozbalte téma Omega 7.x-3.0 do adresáře sites/all/themes/.
- Zkopírujte připravené téma z adresáře sites/all/themes/omega/starterkits/ např. omega-html5 do adresáře sites/all/themes/ a přejmenujte jej na libovolný název např. my-theme.
- V nově vytvořeném tématu přejmenujte:
- starterkit_omega_html5.info na my_theme.info
- css/YOURTHEME-alpha-default...css na my-theme-alpha-default...css
- V souboru my_theme.info:
- upravte hodnoty parametrů
-
name = My Theme
description = Responsive HTML5 Base Theme
- odstraňte řádky
-
; IMPORTANT: DELETE THESE TWO LINES IN YOUR SUBTHEME
hidden = TRUE
starterkit = TRUE
- připojení stylu pro tisk
-
; OPTIONAL STYLESHEETS
css[print.css][name] = Your custom print styles
css[print.css][description] = This file holds all the custom print CSS of your theme.
css[print.css][options][weight] = 11
css[print.css][options][media] = print
- V admin/appearance (Vzhled) povolte nově vytvořené subtéma.
Poloautomatický postup vytvoření subtématu:
- Rozbalte téma Omega 7.x-3.0 do adresáře sites/all/themes/.
- Nainstalujte modul Omega Tools.
- V admin/appearance/omega-tools/add (Vzhled, Create new Omega subtheme) vyplňte požadované informace (stačí název tématu). V dalším kroku můžete doplnit popis a kliknout na tlačítko Dokončit. Ostatní volby (nastavení gridu, zón a regionů) jsou zatím ve vývoji.
Automatický postup vytvoření subtématu:
- Využijte terminál a příkazy skriptovacího rozhraní Drush:
drush dl omega omega_tools
drush en omega_tools
drush omega-subtheme "Long Theme Name"
drush en long_theme_name
drush vset theme_default long_theme_name
Nastavení:
- V Grid settings, RESPONSIVE SETTINGS, VIEWPORT SETTINGS:
- nastavte Maximum scale: 2
- zatrhněte Scalable by user
- V Toggle Libraries povolte
- Formalize – sjednocuje vzhled (např. formulářových prvků) v různých porhlížečích
- Media queries
- Equal heights – umožňuje nastavit stejnou výšku regionů v rámci jedné zóny
- povolte tuto volbu
- v nastavení požadované zóny je možné určit, zda mají být všechny podřízené regiony stejně vysoké
- v nastavení požadovaného regionu je možné určit, zda mají být všechny podřízené bloky stejně vysoké
Pořádí načítání stylů (při vytváření tématu vzhledu doporučuji postupovat dle pravidla "mobil first"):
- global.css se načítá vždy (určeno pro "chytré" telefony)
- ...-default.css je určen pro prohlížeče, které nepodporují CSS media queries a nedokáží tak určit šírku zobrazovacího zařízení např. IE8-
- ...-default-narrow.css je určen pro tablety
- ...-default-normal.css je určen pro standardní zobrazovací zařízení
- (...-default-fluid.css je určen pro pružné zobrazení)
- ...-default-wide.css je určen pro široká zobrazovací zařízení
Poznámky:
- CSS vlastnost
display: none
pouze znamená, že prvek nebude zobrazen, ale samotná data např. tímto způsobem skryté obrázky se přesto načítají.
Z tohoto důvodu uvádějte obrázky na pozadí prvků až v příslušných stylech pro konkrétní šířku zařízení.
Subtémata:
- Respond – HTML5/CSS3 subtéma vycházející z tématu Omega, pracuje se třemi módy (mobile, fluid a 1200px) s přizpůsobivou velikostí obrázků, kde využívá metodu fluid images
Další responsive témata:
Poznámky: