Ú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.
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 %.
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;
}
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).
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