Šablona Hanami - podrobný popis nových funkcí
15. 12. 2015
Hanami je šablona, která se vám zcela přizpůsobí. Moderní vzhled ve stylu “onepage” umožňuje lépe
manipulovat s jednotlivými prvky na stránce, které nově můžete na konkrétních stránkách zobrazit či skrýt. V tomto článku vám ukážeme, jak na to.
Doporučené rozměry a zobrazované velikosti
Tyto velikosti se vám budou hodit kdykoli budete chtít změnit motiv, nastavit velikost loga nebo třeba jen zkrotit velikost zobrazovaných obrázků e-shopu.
Motiv
Doporučená velikost je 1920 x 500px. Obrázek vyplňuje vždy celou výšku i šířku motivu a je centrován na střed. Při velkém zobrazení (monitor) se nezobrazuje žádný prázdný okraj stránky a při malém (mobil) vidíte vždy střed obrázku.
Logo
Doporučená velikost je 300 x 66px. Logo je limitováno pouze výškou. Maximální výška je 55px. Tomuto rozměru je přizpůsobena jeho šířka. Logo se vám nikdy neořízne, ale přizpůsobí.
Náhledové obrázky
Obrázky ve fotogaleriích a e-shopu se zobrazují v poměru 5:4. Zobrazuje se vždy minimálně 100% šířka a výška. Případný přesahující rozměr je v náhledovém obrázku oříznut.
Práce s vlastními boxy
Šablona Hanami je svým rozložením sestavena jako jednosloupcová šablona. Jednotlivé prvky stránky se řadí pod sebe. Na náhledu vpravo vidíte základní rozvržení prvků. Pro lepší orientaci jsou barevně odlišené.
Modré prvky, jako jsou vlastní box motiv, vlastní box 1, vlastní box 2, vlastní box 3 a patička, lze naplnit libovolným obsahem v sekci Nastavení -> Prvky stránek.
Růžové prvky, jako jsou Top produkty, Aktivní rubrika, oblíbené odkazy a náhodný obrázek, se plní automaticky podle funkce, pro kterou jsou vytvořeny. Většině z těchto prvků můžete také měnit pozici v sekci Nastavení -> Rozmístění prvků stránek.
Zobrazení prvků na stránce
Vy výchozím stavu se všechny prvky zobrazují na všech stránkách. Na některých místech si je můžeme jednoduše vypnout přiřazením vlastnosti "display: none".
| Stránky | kód stránky | Prvky | kód prvku |
|---|---|---|---|
| Hlavní strana | #index | Motiv | #motiv |
| Rubrika | .rubric | Separator | #separator |
| Detail příspěvku | .article-detail | Vlastní box 2 | #second |
| Výpis galerií | #galleries | Aktivní rubrika | #blog |
| Detail galerie | .gallery-detail | Vlastní patička | #footbox |
| Stránka obrázku | .photo-detail | ||
| Vstupní strana e-shopu | #eshop | ||
| Kategorie e-shopu | .category-detail | ||
| Detail produktu | .product-detail | ||
| Stránka košíku | #order | ||
| Dokončení objednávky | #finish | ||
| Stránka vyhledávání | #search | ||
| Stránka stahování | #download | ||
| Stránka složky | .folder-detail | ||
| Kontakt | #support | ||
| Mapa webu | #webmap |
Práce s prvky
V administraci vlastního vzhledu přejdeme do sekce VZHLED a v postranním panelu na pravé straně vybereme položku Vlastní CSS styl. Do editoru Definice stylů zapíšeme naše hodnoty a v nastavení nad editorem zaškrtneme políčko Nastavit styl jako aktivní.
Jednotlivé třídy a identifikátory vypisujeme v pořadí, v jakém jsou na webu obsaženy. Stránka tedy bude vždy před prvkem. Zapíšeme identifikátor (#) či třídu (.) stránky a následně zapsaný prvek oddělíme mezerou.
Příklad skrytí motivu na stránce e-shopu:
#eshop #motive { display: none }
Separátor
Separátory ve one-page šablonách fungují jako vizuální oddělovače obsahu. Nejběžněji tvoří obsah takovýchto oddělovačů odkazy na sociální média, citace, různá počítadla, tlačítka atd. Zpravidla se jedná o obsah s nepříliš vysokou informační hodnotou.
Vlastní box 1 je už pro tuto funkci přichystán. Jeho základní umístění je mezi Úvodním textem a Vlastním boxem 2, ve kterém můžete mít další stránku textu. V živém náhledu šablony vidíte, že tento prvek má pozadí se zajímavým efektem parallax.
Vytvoření separátoru
Vytvořte si stránku, do které umístíte text nebo obrázky, které se v separátoru budou zobrazovat. Tuto stránku vyberte jako vlastní box 1 v Nastavení -> Prvky stránky.
Nachystejte si obrázek na pozadí, doporučená velikost je 1920 x 1200px, a nahrajte ho do obrázků v administraci. Url obrázku najdete v jeho detailu v sekci optimalizace pro vyhledávače.
Do vlastního CSS stylu napište:
#separator { background-image: url("/obrazek/3/vas-obrazek/") }
Obrázek se chová podobně jako motiv: vyplní vždy celý prostor, takže zde nezůstane prázdný okraj. Pokud chcete obrázek vystředit, zapište do stylu i pozicování background-position, kde první hodnota znamená údaj o horizontálním umístění a druhá hodnota údaj o vertikálním umístění.
Příklad:
#separator { background-image: url("/obrazek/3/vas-obrazek/");
background-position: center center; }
Kontakty
Kontakty se zobrazují, když vyplníte údaje v sekci Nastavení -> Kontakty. Při vyplnění kontaktů se automaticky zobrazí i rychlý kontakt (telefon, e-mail) v hlavičce stránek.
Tým inPage
info@inpage.cz
Přidat komentář
Přehled komentářů
Text v hlavním menu
28. 12. 2017 23:15:21 | Zdenka
Dobrý den,
na stránkách ( https://www.interierovydesigner.com ) by jsme chtěli text v v hlavním menu v jednom řádku. Bohužel pokud zadám v prvním okně místo slova Úvod - O nás, tak se přesměruje do 2 řádků. To stejné i v druhém okně - vizualizace interiérů. Takto působí hlavní menu jaksi neupraveně. Kde je prosím možné nastavit rozšíření oken menu podle délky textu?
Děkuji za odpověď Zdenka Sekená
Odpovědět | Zobrazit odpovědi
Re: Text v hlavním menu
2. 1. 2018 10:24:35 | Tým inPage
Dobrý den,
do vlastních stylů CSS v administraci Vašeho webu vložte tento zápis:
.navbar-default .navbar-nav > li > a {white-space: nowrap;}
Text se pak nebude zalamovat a jednotlivé buňky menu se budou přizpůsobovat délce textu.
Odpovědět
Re: Re: Text v hlavním menu
2. 1. 2018 22:24:53 | Zdenka Sekená
Dobrý den,
text v hlavním menu jsem dle Vaší nápovědy upravila, lze ale nastavit text submenu samostatně tak, aby byl text v submenu zůstal zalomený?
Zároveň se Vás chci zeptat zda šablona umožňuje, aby okna v menu a okna submenu byly v stejné linii pod sebou, myslím tím začátek a konec. Nyní jsou okna v menu "kratší" než v submenu.
Děkuji za odpověď Zdenka Sekená
Odpovědět
Re: Re: Re: Text v hlavním menu
3. 1. 2018 10:57:27 | Tým inPage
Dobrý den,
aby se text v submenu zalamoval, docílíte tak, že nastavíte jeho pevnou šířku a to pomocí css zápisu:
ul.dropdown-menu li ul li {max-width: 182px;}
A aby menu dosahovalo stejné úrovně jako submenu, tak je třeba jednotlivé buňky menu rozšířit pomocí tohoto zápisu:
.navbar-default .navbar-nav > li > a {padding: 0 43px;}
Odpovědět
Písmo v menu
29. 7. 2017 17:50:29 | Zdenka Sekená
Dobrý den,
na web ( https://www.interierovydesigner.com ) stránkách by jsme chtěli v hlavním menu písmo Century Gotik, ve Vašich návodech se mi návod nepodařilo najít.
Platí pro šablonu Hanami ve Vašich návodech:
https://blog.inpage.cz/inpage/sirius-upravy-menu/ ?
Děkuji za odpověď Zdenka Sekená
Odpovědět | Zobrazit odpovědi
Re: Písmo v menu
31. 7. 2017 13:54:05 | Tým inPage
Dobrý den,
zde máte návod na to jak změnit písmo na stránkách: https://blog.inpage.cz/inpage/zmena-pisma-na-webu/
Písmo, které jste si zvolila v rámci google fonts není, ale nabízí plno dalších jiných zajímavých stylů písma.
Případně pro více informací napište na admin@zoner.cz
Odpovědět
úprava pozadí stránky
7. 3. 2017 15:32:57 | Květoslav Vilímek
Dobrý den,
je prosím možné v šabloně HANAMI měnit pozadí stránky, ideálně bych chtěl vložit "gradient", jak je popsáno na vašem blogu, vzorový zápis body { background: url("/obrazek/3/url obrázku") repeat-x 0 0 #F2F2F2; } mi bohužel nefunguje.
Děkuji
Odpovědět | Zobrazit odpovědi
Re: úprava pozadí stránky
8. 3. 2017 13:08:25 | Tým inPage
Dobrý den,
kód pro "gradient" je třeba vygenerovat např. na těchto stránkách:http://www.colorzilla.com/gradient-editor/ . Vygenerovaný css kod zapsat do zápisu:
body {
*zkopírovaný kod*
}
Odpovědět
Re: Re: úprava pozadí stránky
9. 3. 2017 13:27:27 | Květoslav Vilímek
Dobrý den,
jde mi o to, že ať dělám, co dělám, žádný background zadaný v ccs stylu se mi v šabloně Hanami neobjevuje. Nevím kde dělám chybu, zkoušel jsem jen jednobarevné pozadí, a to také nefungovalo. Můžete se mi na to, prosím, podívat, stránky se teprve snažím postavit v demo módu, odkaz je: https://demo-11942.inpage.cz/
Děkuji!
Odpovědět
Re: Re: Re: úprava pozadí stránky
14. 3. 2017 15:07:56 | Tým inPage
Dobrý den,
v případě, že Vám nefungovala ani jedna z možností zkuste tento zápis:
( Gradient si mužete vygenerovat na této webové stránce: http://www.colorzilla.com/gradient-editor/ )
#wrap {
*zkopirovaný gradient*
}
Odpovědět
zveřejňování data u fotogalerie + vlastní box1
6. 3. 2017 21:19:26 | katazaj
Dobrý den,
prosím, je možné vypnout zverejňování datumu u fotogalerie? Případně i informaci o počtu fotografií?
Vlastní box1 - lze nastavit jeho zveřejnění pouze na HP?
Děkuji, KZ
Odpovědět | Zobrazit odpovědi
Re: zveřejňování data u fotogalerie + vlastní box1
8. 3. 2017 13:24:41 | Tým inPage
Dobrý den,
jedná se o složitějiší úpravu CSS,
vypnout zveřejnění datumu lze, i počet fotografii. Stači v administraci v sekci Vzhled → vlastni css styl napsat:
#photogalleries .thumbnail dl {
display: none;
}
Co se vlastního boxu týče kod pro zobrazení vlastního boxu 1 na HP je potřeba zapsat tento kód ve vlastních stylech css
#separator{
display:none;
}
#index #separator{
display: block;
}
#panel-custom-1 {
display: none;
}
#index #panel-custom-1 {
display:block;
}
V případě že si nebudete vědět rady, nebo budete potřebovat další úpravy šablony mužete využit našich doplnkových služeb a my práci uděláme za Vás.
https://www.inpage.cz/doplnkove-sluzby/
Odpovědět
odstranění motivu z kategorií
28. 2. 2017 12:35:06 | Radek Trnka
Dobrý den
je možné použít nějaký způsob jak v jednom řádku nahradím motiv u všech produktů nebo je nutné pro každý přidaný produkt na eshopu přidávat do vlastního stylu záznam
tedy místo category-123456 například jen category -******
Odpovědět | Zobrazit odpovědi
Re: odstranění motivu z kategorií
3. 3. 2017 15:10:27 | Tým inPage
Dobrý den, tyto stránky mají společnou třídu .category-detail a produkty zase .product-detail, tak k hromadné úpravě doporučuji využití právě těchto tříd.
Odpovědět
RE: RE: Anglické názvy měsíců
10. 8. 2016 23:21:08 | Pavel Král
Dobrý den, děkuji za skvělý servis.
Odpovědět
RE: Anglické názvy měsíců
8. 8. 2016 10:41:03 | Tým inPage
Dobrý den, děkujeme za komentář. Šablonu jsme upravili, aby se zkratky měsíců zobrazovaly dle vybraného jazyka webu. Nyní se Vám již budou zobrazovat v češtině.
Odpovědět
Anglické názvy měsíců
4. 8. 2016 15:15:21 | Pavel Král
Dobrý den,
je možno, prosím, nějakým dostupným způsobem změnit anglické zkratky měsíců ve výpisu článků z rubriky na české?
Děkuji.
PK
Odpovědět