CSS po meri in skrivanje delov spletnega mesta prek CSS

Precej pogoste zahteve so povezane s skrivanjem določenih delov na spletnem mestu, ki nimajo svojega gumba za vklop/izklop na strani upravitelja. Ker na sprednji strani ni mogoče imeti gumbov za vsako podrobnost na strani administratorja, lahko nezaželene dele preprosto skrijete z uporabo CSS, če niste vešči urejanja kod HTML, da bi del sploh odstranili.

Poiščite del, ki ga želite odstraniti

Uporabite lahko orodja za razvijalce brskalnika in poiščete točen del, ki ga želite odstraniti.
Recimo, da želite odstraniti del z datumom in avtorjem pod prispevkom v blogu, z desnim klikom na ta del Inspect Element in odprite orodja za razvijalce brskalnika:

Odprta orodja za razvijalce

Če se s kazalcem miške premaknete nad izvorno kodo, lahko vidite označen del strani, ki se nanaša na vrstico izvorne kode pod kazalcem miške:

Iskanje elementa v viru

Tako lahko poiščete del, ki ga želite skriti - na primer glede na zgornje posnetke zaslona, če gre za vse razdelke z datumom in avtorjem ali samo za razdelek z datumom ali samo za razdelek z avtorjem.

Napišite CSS za skrivanje izbranega razdelka

Ko izberete del, ki ga želite skriti, uporabite atribut ID ali CLASS izbrane oznake HTML v svojih slogih CSS ali pa uporabite natančen selektor CSS, ki ga tema uporablja za to oznako. Selektor CSS za izbrano oznako, ki ga uporablja tema, lahko najdete na desni strani orodij za razvijalce brskalnika.
Če ste se na primer odločili odstraniti celoten del z datumom in avtorjem, je izbirnik, ki ga uporablja tema, naslednji: .elm-posts-main .item .item-info

Selektorji CSS za oznako

slog CSS za skrivanje oznake HTML na strani je "display: none;", uporabite lahko tudi !important za preprečevanje nadaljnjega prepisovanja sloga CSS z drugim slogom CSS.

Končni slog CSS za skrivanje dela z datumom in avtorjem bo:

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

Dodajanje kode CSS po meri v program za prilagajanje

Kodo CSS po meri lahko dodate v Videz > Prilagodi > Dodatni CSS

Po objavi jo lahko preverite na svojem spletnem mestu:

applied_css_style