0 Kč s DPH

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.

Boxy v postranním sloupci

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 editoruloží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"></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"></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.

Více informací

Nadpis boxu

Box bez tlačítka s vlastním textem

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

Tlačítko boxu

Nadpis boxu

Text boxu

Tlačítko boxu

Nadpis boxu

Text boxu

Tlačítko 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í

Reference

Již realizované akce jsou důkazem toho, že víme jak na to!

Více informací

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?

    Odpovědět | Zobrazit odpovědi

    • 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;
      }

      Odpovědět

      • 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

        Odpovědět

  • 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

    Odpovědět | Zobrazit odpovědi

    • 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;}

      Odpovědět

      • 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.

        Odpovědět

inPage - webové stránky, doménawebhosting snadno.