Vlastní CSS a skrývání částí webu pomocí CSS

Poměrně časté požadavky se týkají skrytí určitých částí webu, které nemají vlastní tlačítko pro zapnutí/vypnutí na straně správce. Protože není možné mít na frontendové stránce tlačítka pro jednotlivé detaily v administraci tématu, můžete jednoduše skrýt nežádoucí části pomocí CSS, pokud se nevyznáte v úpravě kódů HTML, abyste danou část vůbec odstranili.

Vyhledejte díl, který chcete odstranit

Pomocí nástrojů pro vývojáře prohlížeče můžete vyhledat přesnou část, kterou chcete odstranit.
Řekněme, že chcete odstranit část s datem a autorem pod příspěvkem na blogu, klikněte pravým tlačítkem myši na tuto část Inspect Element a otevřete nástroje pro vývojáře prohlížeče:

Otevřené nástroje pro vývojáře

Při pohybu kurzoru myši nad zdrojovým kódem se pod kurzorem myši zobrazí zvýrazněná část stránky, která odkazuje na řádek zdrojového kódu:

Najít prvek ve zdroji

Tímto způsobem můžete najít část, kterou chcete skrýt - například podle výše uvedených snímků obrazovky, zda se jedná o všechny sekce s datem a autorem, nebo pouze o sekci s datem, nebo pouze o sekci s autorem.

Napište CSS pro skrytí vybrané sekce

Po výběru části, kterou chcete skrýt, použijte atribut ID nebo CLASS vybrané značky HTML ve vlastních stylech CSS nebo použijte přesný selektor CSS, který pro tuto značku používá téma. Selektor CSS pro vybraný tag použitý tématem najdete na pravé straně nástrojů pro vývojáře prohlížeče.
Pokud jste se například rozhodli odstranit celou část s datem a autorem, je selektor používaný tématem následující: .elm-posts-main .item .item-info

Selektory CSS pro značku

CSS styl pro skrytí HTML tagu na straně je "display: none;", můžete také použít !important aby se zabránilo dalšímu přepisování stylu CSS jiným stylem CSS.

Konečný styl CSS pro skrytí části s datem a autorem tedy bude:

.elm-posts-main .item .item-info {
	display: none !important;
}

Přidání vlastního kódu CSS do nástroje Přizpůsobení

Vlastní kód CSS můžete přidat do Vzhled > Přizpůsobení > Další CSS

Po zveřejnění si ji můžete zkontrolovat na svých webových stránkách:

applied_css_style