Boxy v postranním sloupci
5. 4. 2016
Počet boxů v postranním sloupci v šablonách ONE a SLIDE je závislý na počtu zobrazených prvků. Tento článek je pro ty z vás, kterým nevyhovuje jejich maximální počet.
Do postranního sloupce si můžete přidat dva boxy v rámci vlastních boxů, ale co když jich potřebujete více? Pomůže vám náš návod.
K této úpravě budeme potřebovat níže připravený css styl a stránku s vytvořenými boxy nastavenou v prvcích stránky jako vlastní box 1.
Úprava stylu pro vlastní box
Prvním krokem je vložení níže uvedeného stylu do vlastních CSS stylů (Vzhled > Vlastní CSS styl). Stylopis upraví formátování vlastního boxu 1 tak, že zruší jeho ohraničení a zobrazení nadpisu. Zkopírujeme tedy níže uvedený kód a vložíme jej do vlastního CSS stylu.
#panel-custom-1.panel {border:0; padding:0; margin:0; box-shadow:none; background-color:transparent;}
#panel-custom-1.panel > .panel-heading {display:none;}
#panel-custom-1.panel > .panel-body {padding:0; margin:0; border:0;}
Kód vytvořených boxů
Dále si vytvoříme stránku, kterou nazveme např. Vlastní box 1, nastavíme ji jako neaktivní, vypneme WYSIWYG editor a uložíme. Znovu ji otevřeme a vložíme níže uvedený HTML kód.
<!-- začátek boxu 1 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Nadpis prvního boxu</h3>
</div>
<div class="panel-body">
<p>Text boxu</p>
<p><a class="btn btn-primary" href="/">Tlačítko boxu</a></p>
</div>
</div>
<!-- konec boxu 1 -->
<!-- začátek boxu 2 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Nadpis druhého boxu</h3>
</div>
<div class="panel-body">
<p>Text boxu</p>
<p><a class="btn btn-primary" href="/">Tlačítko boxu</a></p>
</div>
</div>
<!-- konec boxu 2 -->
Přidání dalšího boxu
V připraveném zdrojovém kódu jsou dva boxy a každý je ohraničen komentářem pro lepší přehlednost. Pro přidání dalšího boxu stačí zkopírovat celý box od začátku komentáře po jeho konec.
Úprava nadpisů a textů v boxu
Nadpis boxu je vepsán mezi tagy <h3 class="panel-title"> a </h3>, kde stačí text jen upravit. Nadpis je také možné smazat a použít box bez nadpisu. Stačí smazat tuto část:
<div class="panel-heading">
<h3 class="panel-title">Nadpis druhého boxu</h3>
</div>
Další text se poté nachází mezi <div class="panel-body"> a </div> a opět ho stačí jen upravit. V případě že si nepřejeme použít tlačítko smažeme celou tuto část:
<p><a class="btn btn-primary" href="/">Tlačítko boxu</a></p>
Příklad použití:
Nadpis boxu
Box s použitím nadpisu, vlastního textu a tlačítka.
Box bez nadpisu a bez tlačítka, vhodný například pro umístění obrázkové reklamy.
Úpravu textu v boxech je možné provádět i při zapnutém WYSIWYG editoru. Doporučujeme při těchto úpravách nastavit verzi editoru 4.2.3 a zapnout v editaci stránky možnost Ukázat bloky (Zobrazit > Ukázat bloky). V editoru se pak zobrazí ohraničené jednotlivé bloky a nemělo by se nám stát, že přepíšeme nějakou důležitou hodnotu.
Barva boxu, nadpisu a tlačítka
Barvy boxů, nadpisů a tlačítek odpovídají barvě šablony díky přidané třídě .panel-primary pro box a .btn-primary pro tlačítko. Pokud byste si přáli použít jinou barvu pro box nebo jinou barvu tlačítka, lze využít dalších možností frameworku bootstrap. Stačí upravit .panel-primary na např .panel-default (šedý nadpis) nebo jinou možnost.
Příklad použití:
Nadpis boxu
Text boxu
Nadpis boxu
Text boxu
Nadpis boxu
Text boxu
Zobrazení na webu
Posledním krokem je uložení stránky a její nastavení jako vlastní box 1 pod záložkou Vzhled > Prvky stránek výběrem v roletkovém menu Vlastní box 1 a uložit.
Výsledek pak zkontrolujeme v náhledu webu.
Příklad použití:
Dokumenty ke stažení
Stáhněte si naše nové katalogy
Reference
Již realizované akce jsou důkazem toho, že víme jak na to!
Tým inPage
info(zav)inpage.cz
Přidat komentář
Přehled komentářů
-
Na titulní stránce nechci postranní sloupce
5. 3. 2019 12:07:02 | Vladislav Kubica
Prosím vás, jak toho docílím?
-
Re: Na titulní stránce nechci postranní sloupce
5. 3. 2019 12:47:59 | Tým inPage
Dobrý den,
toto lze upravit opět s pomocí vlastních CSS stylů. Pokud se to týká webu vpodpalubi.com a šablony ONE, tak styl pro tuto úpravu vypadá následovně:
#index aside {display:none;} /*skryje postranní sloupec pouze pro úvodní stranu*/
/*roztáhne pravý sloupec na celou šířku*/
#index main.col-md-8,
#index main.col-lg-9 {
width:100%
}
/* zruší odsazení kde byl umístěný levý sloupec*/
#index main.col-md-push-4,
#index main.col-lg-push-3 {
left:0;
} -
Re: Re: Na titulní stránce nechci postranní sloupce
5. 3. 2019 13:00:17 | Vladislav Kubica
Přesně ......děkuji uctivě, moc jste pomohli, jde vidět, že s InPage lze vše
-
V podpalubí - zaoblení rohů u "náhodného" obrázku
4. 3. 2019 11:39:07 | Vladislav Kubica
Prosím, používám vlastní styly CSS, ale nemohu přijít na to, jak zaoblit rohy obrázků v postranním sloupci u náhodného obrázku. Je to www.vpodpalubi.com ... je totiž hloupé, když všude mám obrázky zaobleny, ale tam toho nemohu docílit. Prosím o pomoc
-
Re: V podpalubí - zaoblení rohů u "náhodného" obrázku
5. 3. 2019 12:23:25 | Tým inPage
Dobrý den,
zaoblení náhodných obrázků v postranním sloupci v šabloně ONE nastavíte níže uvedeným CSS stylem.
#panel-photos img {border-radius:20px;} -
Re: Re: V podpalubí - zaoblení rohů u "náhodného" obrázku
5. 3. 2019 12:27:47 | Vladislav Kubica
Moc děkuji, pomohli jste mi.