Jak v CSS skrýt některé prvky inPage

Už se vám stalo, že jste si vytvořili web v inPage a některé prvky, (např. motiv, aktuality, počet produktů v e-shop menu apod.), jste na stránkách nechtěli zobrazit? Anebo jste chtěli, u šablony KYRA nebo HANAMI zobrazit jednotlivé bloky jen na úvodní straně a na ostatních už ne? Řešením těchto a mnoha jiných úprav je použití vlastního CSS stylu. O tom, jak skrýt jednotlivé prvky šablony pomocí CSS stylu se podrobněji dočtete v tomto článku.

Skrytí se obecně provede s pomocí CSS vlastnosti display:none. Abyste skryli konkrétní prvek, je třeba definovat jeho přesný název.  Některé prvky mají svůj vlastní a jedinečný identifikátor, který lze nalézt v HTML kódu stránky. K dohledání konkrétního identifikátoru prvku můžete využít průzkumníka v prohlížeči. Zapnete ho najetím myši na prvek, stisknutím pravého tlačítka myši a výběrem prozkoumat (Chrome prozkoumat, FF prozkoumat prvek).

Identifikátor stránky se nachází v tagu body např. pro úvodní stránku je to id="index", kde id znamená identifikátor. 

V některých případech je na prvek použita třída (např. class="date") nebo jen tag (např. label). Zde je vždy třeba vybrat tomuto prvku nadřazený prvek s konkrétním identifikátorem, neboť třídy a tagy se na webu opakují a náš zápis by mohl ovlivnit i jiné prvky než si přejeme.

Skrytí jednotlivých bloků

Prvky šablony se zobrazují v určitých částech stránky. Rozložení prvků šablon si můžete prohlédnout zde Rozložení prvků v responzivních šablonách

V šablonách  KYRA a HANAMI se prvky načítají do jednotlivých bloků, jejichž umístění na stránce je pevné. Umístění prvků v blocích je pak závislé na jejich rozmístění v sekci Nastavení → Rozmístění prvků. Pro skrytí je tedy třeba vybrat nadřazený blok, ve kterém se aktuálně nacházejí. Každý blok má jedinečný identifikátor/název, který využijeme v CSS stylu pro skrytí.

Tabulka identifikátorů jednotlivých bloků

Dále je nutné znát identifikátor stránky. Každá stránka má svůj vlastní identifikátor, kterým ji můžeme vybrat. U základních stránek jako je úvodní stránka, hlavní fotogalerie, kontaktní formulář apod., jsou to pevně dané názvy.

Skrytí bloku pro celý web, kromě několika vybraných stránek

Ukážeme si zobrazení bloku s aktualitami pro úvodní stránku a skrytí na ostatních stránkách. Nejdříve zneviditelníme blok pro celý web.

#blog {
display:none;
}

A poté jej zobrazíme pouze na úvodní stránce

#index #blog {
display:block
}

Nebo na úvodní stránce a kontaktním formuláři

#index #blog,
#support #blog {
display:block
}

Skrytí bloku pro některé stránky

V případě, že chceme mít blok viditelný na všech stránkách kromě např. stránky s kontaktním formulářem, bude styl vypadat takto:

#support #blog {display:none}

Pokud těch stránek bude více se stejnou vlastností, stačí je uvést ke specifikaci a oddělit čárkou. Tento zápis znamená skrytí bloku s aktualitami a barevného bloku na stránkách kontaktní formulář a úvodu.

#support #blog,
#index #blog,
#support #separator,
#index #separator {display:none}

Skrytí jiných prvků

Podobně lze postupovat v případě jiných prvků, zobrazovaných na webu. V průzkumníku zjistěte identifikátor prvku a použijte CSS vlastnost display:none;

Skrytí počtu položek v košíku v šabloně KYRA a HANAMI.

#basket label {display:none;}

Jsou i další prvky, které byste si přáli skrýt? Napište nám je do komentářů.