Brugerdefineret CSS og skjulning af dele af hjemmesiden via CSS

Ret almindelige forespørgsler er relateret til at skjule specifikke dele på hjemmesiden, som ikke har deres egen on/off-knap på admin-siden. Da det ikke er muligt at have temaadministratorknapper for hver detalje på frontend, kan du blot skjule uønskede dele ved hjælp af CSS, hvis du ikke er fortrolig med redigering af HTML-koder for at fjerne delen overhovedet.

Find den del, der skal fjernes

Du kan bruge browserudviklerværktøjer til at finde den nøjagtige del, du vil fjerne.
Lad os sige, at du vil fjerne delen med dato og forfatter under blogindlægget, ved at højreklikke på denne del Inspect Element og åbne browserens udviklerværktøjer:

Åbne udviklerværktøjer

Når du bevæger musemarkøren over din kildekode, kan du se et fremhævet afsnit på siden, der henviser til en linje i kildekoden under musemarkøren:

Find element i kilde

På den måde kan du finde det, du gerne vil skjule - for eksempel ved at se på skærmbillederne ovenfor, om det er alle afsnit med dato og forfatter, eller kun datoafsnittet eller kun forfatterafsnittet.

Skriv CSS for at skjule den valgte sektion

Når du har valgt en del, du vil skjule, skal du bruge ID- eller CLASS-attributten for det valgte HTML-tag i dine egne CSS-stilarter eller bruge den nøjagtige CSS-selektor, som temaet bruger til dette tag. CSS-vælgeren for det valgte tag, der bruges af temaet, kan du finde i højre side af browserens udviklerværktøjer.
Hvis du f.eks. har besluttet at fjerne hele delen med dato og forfatter, er den selector, som temaet bruger, følgende: .elm-posts-main .item .item-info

CSS-selektorer til tag

CSS-stil til at skjule HTML-tagget på siden er "display: none;", du kan også bruge !vigtigt for at forhindre yderligere overskrivning af CSS-stilen med en anden CSS.

Så den endelige CSS-stil til at skjule delen med dato og forfatter vil være:

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

Tilføj brugerdefineret CSS-kode i Customizer

Du kan tilføje den tilpassede CSS-kode i Udseende > Tilpas > Yderligere CSS

Efter udgivelsen kan du tjekke den på din hjemmeside:

anvendt_css_stil