0 Kč bez DPH

Úprava výpisu článků rubriky

30. 11. 2017

V tomto článku si ukážeme, jak z řádkového výpisu článků rubriky, vytvořit pěkný výpis srovnaný v boxech neboli v dlaždicích. Návod lze aplikovat pouze na šablony One a Slide

Původní výpis stránek rubriky   Upravený výpis stránek rubriky

První obrázek výše přináší srovnání výchozího a upraveného zobrazení výpisu článků rubriky. V levé části obrázku vidíme, že se články nově uspořádaly do boxů, které se vkusně zařadily do tří sloupců.

HTML kód článků

Generuje se automaticky, jakmile v inPage píšeme obsah. Pro změnu zobrazení článků nemusíme html kód jakkkoliv měnit. Nicméně můžeme se na něj podívat, pokud ve webovém prohlížeči použijete klávesou zkratku CTRL + U (platí pro OS Windows). 

<ul id="list-pages" class="media-list">

<li class="media">
<div class="media-body">
<h2 class="subtitle media-heading"><a title="Poslání nadace" href="/inpage/poslani-nadace/">Poslání nadace</a></h2>
<div class="perex">
<a class="perex-image-link" title="Poslání nadace" href="/inpage/poslani-nadace/"><img src="/obrazek/2/logo-png/" class="perex-image"></a>
<div class="perex-text"><p><span>Posláním nadace je pomáhat překonávat každodenní překážky lidem s těžkým zrakovým postižením. Stejně tak jako nositel jména nadace pan Prof. MUDr. Václav Vejdovský, DrSc. se snažíme dělat vše pro to, aby lidé se zrakovým handicapem mohli žít důstojný život.</span></p>
</div>
</div>
</div>
</li>

<li class="media">
<div class="media-body">
<h2 class="subtitle media-heading"><a title="Z historie nadace" href="/inpage/z-historie-nadace/">Z historie nadace</a></h2>
<div class="perex">
<a class="perex-image-link" title="Z historie nadace" href="/inpage/z-historie-nadace/"><img src="/obrazek/2/logo-png/" class="perex-image"></a>
<div class="perex-text"><p><span>Nadace prof. Vejdovského se narodila 17. 11. 1992 v Litovli. Otec nadace se jmenuje Karel Stejskal a byl projektantem. Jméno pro své dítě našel velmi snadno, protože k němu choval úctu i obdiv. Charisma prof. MUDr. Václava Vejdovského, DrSc. vnímali tisíce jeho...</span></p>
</div>
</div>
</div>
</li>

....

</ul>

Výpis rubriky bez obrázku

CSS kód

Aby výpis článků vypadal jako ve výše uvedeném obrázku, musíme do CSS stylu přidat níže uvedené definice. Vlastní styly vždy přidáváme zde: Vzhled  Vlastní styly CSS.

#list-pages li.media { /* úprava boxu */
width: 31%; /* šířka boxu */
display: inline-block; /* umožní zobrazení prvků vedle sebe */
background: #fbfbfb; /* pozadí boxu */
border: 1px solid #EAEAEA; /* rámeček */
border-radius: 7px; /* zaoblení rámečku */
margin: 7px; /* mezera mezi boxy */
padding: 15px; /* mezera uvnitř boxu */
text-align: center; /* zarovnání prvků v boxu */
}

#list-pages h2.subtitle { /* nadpis v boxu */
margin-bottom: 20px; /* mezera pod nadpisem */
}

#list-pages h2.subtitle a { /* odkaz uvnitř nadpisu */
text-decoration: none; /* odkaz nadpisu bez podtržení */
color: #002F6B; /* barva odkazu nadpisu */
font-size: 18px; /* velikost písma odkazu nadpisu */
}

V kódu můžeme vidět zacílení úprav na boxy, které jsou obsaženy v prvku id="list-pages" (#list-pages nebo také ul#list-pages). 

Responsivita

Výše jsme si připravili CSS pro klasické desktopové zařízení. Abychom docílili tzv. responzivního zobrazení webu, musíme CSS styly ještě trochu upravit. Do kódu přidáme definice pro zobrazení webu v různých šířkách. Prvek, nastavující šířku v předchozím kroku "width", celý smažeme. Více o způsobu úpravy responsivního designu naleznete ve stejnojmenném článku Jak upravit responsivní design.

CSS kód zahrnující řešení šířky boxu bude vypadal následovně:

#list-pages li.media { /* úprava boxu */
width: 31%; /* šířka boxu */   /* SMAŽEME */
display: inline-block; /* umožní zobrazení prvků vedle sebe */
background: #fbfbfb; /* barva pozadí boxu */
border: 1px solid #EAEAEA; /* sířka styl a barva rámečku */
border-radius: 7px; /* zaoblení rámečku */
margin: 7px; /* mezera mezi boxy */
padding: 15px; /* mezera uvnitř boxu */
text-align: center; /* zarovnání prvků v boxu */
}

/*--------responzivita (uvedeno na konci vlastních stylů CSS)----------*/

@media screen and (max-width: 767px) { /* zobrazení pro mobil */ 
   #list-pages li.media { 
      width: 100%;

   }

}

@media screen and (min-width: 768px) { /* zobrazení pro tablet */
   #list-pages li.media { 
      width: 48%;

   }
}

@media screen and (min-width: 992px) { /* zobrazení pro malý notebook */
   #list-pages li.media { 
      width: 31%;

   }
}

@media screen and (min-width: 1200px) { /* zobrazení pro monitor */
   #list-pages li.media { 
      width: 31%;

   }
}

Šířka boxu

Výše uvedená šířka boxu (31 %) platí pro dlaždice uspořádané do tří sloupců. Jde tak o procentuální šířku, kterou box zabírá z šířky obsahu stránky, tedy ze 100 %. Boxu nepřiřazujeme šířku 33 %, která by odpovídala podílu ze 100 %, jelikož musíme myslet na mezery mezi boxy. Hodnotu šířky boxu tak můžeme stanovit zcela libovolně, vždy podle toho, kolik si přejeme mít na stránce sloupců. Například v případě dvou sloupců je ideálních šířka 48 %. 

Upravený výpis stránek rubriky     Původní výpis stránek rubriky

Výpis článků rubriky s obrázky v perexu

Obrázek lze vložit přímo do perexu stránky. Výhodnější je však využít funkci hlavního obrázku. Ve všech uvedených kódech tohoto článku je použit právě hlavní obrázek (třída .perex-image). Pro základní úpravu obrázku postačí tento krátký kód: 

#list-pages img.perex-image {
max-height: 160px;
margin-bottom: 15px;
}

Upravený výpis stránek s hlavními obrázky

Výpis rubriky obsahující další rubriky 

Pokud máte rubriku, která místo článků obsahuje pouze další rubriky, je postup i kód téměř stejný. Liší se jen změnou identifikátoru v CSS (= id prvku). V případě stránek se jedná o id="list-pages", u rubrik je to poté id="list-rubrics"

Další úpravy

V tomto článku jsme si ukázali nejčastější úpravy, které lze pro zobrazení výpisu stránek rubriky použít. Pokud jste však ve vlastních stylech CSS pokročilejšími uživateli, můžete provést mnoho dalších úprav. V případě zájmu o pokročilejších úpravy se na nás kdykoliv obraťte (admin@zoner.cz).

Tým inPage
info@inpage.cz

Web s doménou ZDARMA

Přidat komentář

Přehled komentářů

  • Dlaždice i na úvodní stránce

    8. 7. 2018 14:39:41 | Martin

    Dobrý den, výpis rubriky formou dlaždic se mě líbí, ale potřeboval bych, aby se takto zobrazovali tyto stejné články i na úvodní stránce a nejen v rubrice. Jde to nějak zařídit?

    Odpovědět | Zobrazit odpovědi

    • Re: Dlaždice i na úvodní stránce

      9. 7. 2018 7:56:41 | Tým inPage

      Dobrý den,
      stejný kód lze použít i pro výpis článků na úvodní straně. Styl pro #list-pages platí pouze pro výpis rubrik. Pro úvodní stranu je třeba uvést #listdata. Aby dlaždice fungovaly ve výpisu rubrik i na úvodní straně, musíte upravit CSS styl následovně:

      #list-pages li.media, #listdata li.media {
      ...
      }
      #list-pages h2.subtitle, #listdata h2.subtitle {
      ...
      }

      takto pokračujte i s ostatními.

      Odpovědět