Mukautettu CSS & sivuston osien piilottaminen CSS:n avulla

Melko yleiset pyynnöt liittyvät tiettyjen osien piilottamiseen verkkosivustolla, joilla ei ole omaa päälle/pois-painiketta ylläpidon puolella. Koska ei ole mahdollista, että jokaiselle yksityiskohdalle on teeman hallintanäppäimet etusivulla, voit yksinkertaisesti piilottaa ei-toivotut osat CSS:n avulla, jos et tunne HTML-koodien muokkaamista osan poistamiseksi lainkaan.

Etsi irrotettava osa

Voit käyttää selaimen kehittäjätyökaluja, joilla voit etsiä tarkan osan, jonka haluat poistaa.
Sanotaan, että haluat poistaa osan, jossa on päivämäärä ja kirjoittaja blogikirjoituksen alla, klikkaamalla hiiren kakkospainikkeella tätä osaa Tarkista Elementti ja avaa selaimen kehittäjätyökalut:

Avoimet kehittäjätyökalut

Kun siirrät hiiren kursorin lähdekoodin päälle, näet sivulla korostetun osan, joka viittaa hiiren kursorin alla olevaan lähdekoodiriviin:

Etsi elementti lähteestä

Näin voit löytää osan, jonka haluat piilottaa - esimerkiksi yllä olevien kuvakaappausten perusteella, onko se kaikki osiot päivämäärän ja kirjoittajan kanssa vai vain päivämäärän osio vai vain kirjoittajan osio.

Kirjoita CSS piilottaa valitun osan

Kun olet valinnut piilotettavan osan, käytä valitun HTML-tunnisteen ID- tai CLASS-attribuuttia omissa CSS-tyyleissäsi tai käytä tarkkaa CSS-valitsinta, jota teema käyttää tälle tunnisteelle. Teeman käyttämän valitun tagin CSS-valitsimen löydät selaimen kehittäjätyökalujen oikealta puolelta.
Jos esimerkiksi päätät poistaa koko päivämäärän ja kirjoittajan sisältävän osan, teeman käyttämä valitsin on: .elm-posts-main .item .item-info .item-info

CSS-valitsimet tagille

CSS-tyyli piilottaa HTML-tunnisteen sivulle on "display: none;", voit käyttää myös !important lausekkeen avulla estetään CSS-tyylin korvaaminen toisella CSS:llä.

Joten lopullinen CSS-tyyli piilottaa osan, jossa on päivämäärä ja kirjoittaja, on:

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

Lisää mukautettua CSS-koodia Customizeriin

Voit lisätä mukautetun CSS-koodin Ulkoasu > Mukauta > Lisää CSS:ää

Julkaisun jälkeen voit tarkistaa sen verkkosivustollasi:

sovellettu_css_tyyli