Anpassad CSS & dölja delar av webbplatsen via CSS

Ganska vanliga förfrågningar är relaterade till att dölja specifika delar på webbplatsen som inte har sin egen på/av-knapp på adminsidan. Eftersom det inte är möjligt att ha temaadministratörsknappar för varje detalj på frontend kan du helt enkelt dölja oönskade delar med CSS om du inte är bekant med redigering av HTML-koder för att ta bort delen alls.

Lokalisera den del som ska tas bort

Du kan använda webbläsarens utvecklingsverktyg för att hitta den exakta delen som du vill ta bort.
Låt oss säga att du vill ta bort delen med datum och författare under blogginlägget, med högerklicka på den här delen Inspektera element och öppna webbläsarens utvecklarverktyg:

Öppna verktyg för utvecklare

Om du för muspekaren över källkoden kan du se markerade avsnitt på sidan som hänvisar till en rad källkod under muspekaren:

Hitta element i källan

På så sätt kan du hitta par du vill dölja - till exempel hänvisar till skärmdumpar ovan om det är alla avsnitt med datum och författare, eller bara datumavsnitt, eller bara författaravsnitt.

Skriv CSS för att dölja markerad sektion

När du har valt en del som du vill dölja använder du ID- eller CLASS-attributet för den valda HTML-taggen i dina egna CSS-stilar, eller använder den exakta CSS-väljaren som används av temat för den här taggen. CSS-väljaren för den valda taggen som används av temat hittar du till höger i webbläsarens utvecklingsverktyg.
Om du till exempel bestämde dig för att ta bort hela delen med datum och författare, är den väljare som används av temat: .elm-poster-main .objekt .objekt-info

CSS-selektorer för tagg

CSS-stil för att dölja HTML-taggen på sidan är "display: none;", du kan också använda !viktig för att förhindra ytterligare överskrivning av CSS-stilen med en annan CSS.

Så den slutliga CSS-stilen för att dölja delen med datum och författare kommer att vara:

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

Lägg till anpassad CSS-kod i Customizer

Du kan lägga till den anpassade CSS-koden i Utseende > Anpassa > Ytterligare CSS

Efter publiceringen kan du se den på din webbplats:

tillämpad_css_stil