Custom CSS & hiding parts of website via CSS

Prilično česti zahtjevi odnose se na skrivanje određenih dijelova na web stranici koji nemaju vlastitu tipku za uključivanje/isključivanje na strani administratora. Budući da nije moguće imati gumbe za administratore teme za svaki detalj na sučelju, možete jednostavno sakriti neželjene dijelove pomoću CSS-a ako niste upoznati s uređivanjem HTML kodova kako biste uopće uklonili dio.

Pronađite dio koji želite ukloniti

Pomoću alata za razvojne programere preglednika možete locirati točan dio koji želite ukloniti.
Recimo da želite ukloniti dio s datumom i autorom ispod blog posta, desnom tipkom miša kliknite na ovaj dio Inspect Element i otvorite alate za razvojne programere preglednika:

Otvorite alate za razvojne programere

Pomicanjem pokazivača miša preko vašeg izvornog koda možete vidjeti istaknuti odjeljak na stranici koji se odnosi na redak izvornog koda ispod vašeg pokazivača miša:

Pronađi element u izvoru

Na ovaj način možete pronaći dio koji želite sakriti – na primjer pozivajući se na gornje snimke zaslona ako je to cijeli odjeljak s datumom i autorom, ili samo odjeljak s datumom, ili samo odjeljak s autorom.

Napišite CSS da biste sakrili odabrani odjeljak

Kada ste odabrali dio koji želite sakriti, upotrijebite atribut ID ili CLASS odabrane HTML oznake u svojim vlastitim CSS stilovima ili upotrijebite točan CSS birač koji koristi tema za ovu oznaku. CSS selektor za odabranu oznaku koju koristi tema možete pronaći na desnoj strani razvojnih alata preglednika.
Na primjer, ako ste odlučili ukloniti cijeli dio s datumom i autorom, selektor koji koristi tema je: .elm-posts-main .item .item-info

CSS selektori za oznaku

CSS stil za skrivanje HTML oznake sa strane je “display: none;“, također možete koristiti !važno naredbu za sprječavanje daljnjeg prepisivanja CSS stila drugim CSS-om.

Dakle, konačni CSS stil za skrivanje dijela s datumom i autorom bit će:

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

Dodajte prilagođeni CSS kod u Customizer

Možete dodati prilagođeni CSS kod Izgled > Prilagodi > Dodatni CSS

Nakon objave možete provjeriti na svojoj web stranici:

primijenjeni_css_stil