Nová šablona NAVI
28. 04. 2011
Přidali jsme do inPage zcela novou šablonu v 7 barevných kombinacích. Zároveň jsme šablony inPage nově pojmenovali pro lepší orinentaci v názvech. Nová šablona dostala název NAVI.
Při návrhu šablony jsme vycházeli ze získaných zklušeností a požadavků našich zákazníků. Volili jsme světlou barvu s výrazně barevnými prvky. Veškeré barvy je samozřejmě možné upravit vlastním CSS stylem.
Tipy aneb hrátky s CSS
Nová šablona umožňuje samozřejmě vlastní úpravu vzhledu pomocí CCS stylu.
Přinášíme některé z tipů jak jednoduše na to. Uvedené příklady jsou ukázkové, vždy si můžete CSS styl libovolně nadefinovat podle svých potřeb.
Individuální rozměr motivu
Výchozí doporučený rozměr motivu je u šablony NAVI 775px na šířku a 240px na výšku.
Pokud by jste chtěli použít jiný rozměr obrázku, musíte také upravit CSS styl.
Na ukázkovém příkladu jako motiv použijeme obrázek s jiným rozměrem výšky - pouze 180px
(v případě jiného rozměru šířky, postupujeme obdobně)
- Nejprve se musíte přihlásit do administrace inPage a obrázek pro motiv nahrát.
Podrobný popis nahrávání obrázků naleznete v článku Nahrávání obrázků. - V dalším kroku je třeba obrázek pro motiv nastavit. V administraci klikněte na Vzhled > Obrázek motivu a vyberte jej ze svých obrázků. Nastavení dokončíte kliknutím na tlačítko Potvrdit.
- Posledním krokem je úprava CSS stylu - musíte zadat novou šířku motivu a upravit si odsazení obsahu. V administraci klikněte na Vzhled > Vlastní CSS styl. Zkontrolujte, že máte zatrženo Nastavit styl jako aktivní a vložte následující definici stylů:
#theme { width: 775px; height: 180px; }
#container.theme #rcolumn { padding-top: 195px; }Upravíme šířku (ev. výšku) nového rozměru motivu a následně zmenšíme odsazení obsahu šablony. Odsazení je potřeba upravit z důvodu aby mezi motivem a obsahem nebyla příliž velká mezera - protože jsme zmenšovali výšku motivu. Nový rozměr pro odsazení jsme získali tak, že jsme od původního odsazení padding-top: 255px odečetli rozdíl mezi původní a novou výškou (240px - 180px = 60px -> 255px - 60px = 195px).
- Nastavení vlastního CSS stylu dokončíte kliknutím na tlačítko Potvrdit.
Individuální rozměr loga
U šablony NAVI je přednastavený rozměr loga 200px na šířku a 100px na výšku), rozměry si můžete nastavit zcela individuálně. Pokud budete mít logo podbarveno, může být pěkné ho mít na výšku stejně vysoké jako motiv stránek.
Postup je podobný jako při změny rozměru motivu. Jen s tím rozdílem, že v administraci kliknete na Vzhled > Logo a pro vlastní CSS styl použijete následující úpravy:
Př. Změna šířky a výšky #logo { width: 200px; height: 200px; } Př. Nastavení stejné výšky loga jako je výchozí výška motivu #logo { width: 200px; height: 240px; } Př. Větší odsazení loga od navigačního menu #logo { margin-bottom: 30px; } Zarovnání menu pod motiv
Pokud u šablony NAVI nepoužíváte žádné logo, je navigační menu zarovnáno s horní hranicí motivu stránek. Odsazení můžete zkusit změnit a menu si tak třeba zarovnat se spodní hranicí motivu.
Touto úpravou vám vznikne vedle motivu prázdný prostor, který můžete využít, případně jen docílít drobné grafické úpravy šablony.
Pro vlastní CSS styl použijete následující úpravy:
#menu { margin-top: 240px; } E-shop - změna umístění ceny s DPH a bez DPH
Využíváte-li dvojí zobrazení cen v E-shopu, mohla by se vám hodit úprava, kterou prohodíte umístění cen s DPH (z leva do prava) a bez DPH (z prava do leva). Tyto úpravy se projeví pro stránku s detailem zboží a pro výpis kategorie při řádkovém zobrazení.
Následující příklad je funkční pro všechny typy šablon.
Obr. Záměna umístění cen s a bez DPH
Pro vlastní CSS styl použijete následující úpravy:
Př. Změna umístění cen pro detail zboží a výpis kategorie .eshop.item.inline .withdph, .eshop.item.detail .withdph
{ float: right; }
.eshop.item.inline .nodph, .eshop.item.detail .nodph
{ float: left; } Př. Změna umístění cen POUZE pro výpis kategorie - řádkové zobrazení .eshop.item.inline .withdph { float: right; }
.eshop.item.inline .nodph { float: left; } Př. Změna umístění cen POUZE pro detail zboží .eshop.item.detail .withdph { float: right; }
.eshop.item.detail .nodph { float: left; } Patička - seznam s odkazy
Zápatí webu si můžete vylepšit o hezkou patičku. U šablony NAVI jsou k dispozici předdefinované styly pro text a seznam s odkazy.
Obr. Upravená patička
Nejprve si vytvořte administraci nový článek, který si následně nastavte jako Vlastní patičku. Nastavení článku provedete v administraci Nastavení > Prvky stránek, kde v poli Vlastní patička zvolte název článku, který jste si vytvořili. Do prázdného článku stačí už pouze vložit odstavec a seznam, předvytvořené styly vše sami zformátují (pouze u poslední položky seznamu neopoměňte uvést třídu last).
<ul>
<li><a href="/">Úvodní stránka</a></li>
<li><a href="/rubrika/novinky/">Novinky</a></li>
<li><a href="#">E-shop</a></li>
<li><a href="#">Kontakt</a></li>
<li class="last"><a href="#">Kontakt</a></li>
</ul>
<p>ZONER software, a.s. © 2011</p> Další možnosti úprav pomocí CSS hledejte na našem blogu v sekci Hrajeme si s CSS.
Nové názvy šablon
Názvy pro nové šablony jsme čerpali z pojmenovaných hvězd, které naleznete například na Wikipedii.
Vybrali jsme: Navi (dříve šablona 7), Vega (4), Polaris (6), Mira (1), Atlas (2), Zeta (5) a Media (3).
Protože připravujeme další šablony, budeme potřebovat vybrat nové názvy. V diskuzi nám můžete nechat svoje tipy na další názvy šablon! Podmínou je pouze jasný a srozumitelný název.
Přidat komentář
Přehled komentářů