Kohandatud CSS ja veebilehe osade varjamine CSS-i abil

Üsna tavalised taotlused on seotud veebilehe konkreetsete osade varjamisega, millel ei ole oma sisse/välja lülitusnuppu administraatori poolel. Kuna ei ole võimalik, et iga detaili jaoks on teema admin-nupud frontendil, saate lihtsalt soovimatuid osi CSS-i abil peita, kui te ei ole tuttav HTML-koodide redigeerimisega, et osa üldse eemaldada.

Leia eemaldatav osa

Saate kasutada brauseri arendaja tööriistu, millega saate leida täpse osa, mida soovite eemaldada.
Oletame, et soovite eemaldada osa kuupäeva ja autoriga blogipostituse all, paremklõps selle osa Inspect Element ja avada brauseri arendaja tööriistad:

Avatud arendaja tööriistad

Liikudes hiirekursoriga oma lähtekoodi üle, näete leheküljel esile tõstetud osa, mis viitab hiirekursori all olevale lähtekoodi reale:

Leia element allikas

Nii saate leida par, mida soovite varjata - näiteks viidates ülaltoodud ekraanipiltidele, kui see on kõik lõik koos kuupäeva ja autoriga või ainult kuupäeva lõik või ainult autori lõik.

Kirjutage CSS valitud sektsiooni peitmiseks

Kui olete valinud osa, mida soovite varjata, kasutage valitud HTML-tähe ID- või CLASS-atribuuti oma CSS-stiilides või kasutage täpselt CSS-valitsejat, mida teema kasutab selle tägi jaoks. Teema poolt kasutatava valitud tagi CSS-selektiivi saate leida brauseri arendajatööriistade paremal poolel.
Näiteks kui te otsustate eemaldada kogu kuupäeva ja autoriga osa, on teema poolt kasutatav valija järgmine: .elm-posts-main .item .item-info

CSS selektorid sildi jaoks

CSS stiil HTML sildi varjamiseks küljel on "display: none;", võite kasutada ka !important avaldusega, et vältida CSS-stiili edasist ülekirjutamist teise CSS-iga.

Nii et lõplik CSS stiil varjata osa kuupäeva ja autor on:

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

Kohandatud CSS-koodi lisamine Customizerisse

Saate lisada kohandatud CSS-koodi Välimus > Kohandada > Täiendavad CSS-id

Pärast avaldamist saate seda oma veebilehel kontrollida:

applied_css_style