Custom CSS

Met de Custom CSS Bewerker kun je het uiterlijk van je thema aanpassen, zonder dat het nodig is om een onderliggend thema te creëren of je zorgen te maken over thema updates die je aanpassingen overschrijven.

Custom CSS toevoegen

Activeer ten eerste de Custom CSS module op het Jetpack dashboard, daarna heb je toegang tot de CSS bewerker via Uiterlijk → Bewerken CSS.

Als dit je eerste bezoek aan de CSS Editor is(of als je nog geen custom CSS code hebt toegevoegd), zul je een vervangend bericht in het bewerkingsvenster (ingesloten in /* en */) aantreffen. Bekijk het bericht, het bevat belangrijke informatie over de upgrade. Het bericht begint met…

/* Welkom bij Custom CSS!

CSS (Cascading Style Sheets) is een soort code die de browser vertelt hoe een webpagina te renderen. Je kunt dit commentaar verwijderen en beginnen met je aanpassingen.

Als je klaar bent om je custom CSS code toe te voegen, verwijder dan gewoon het bericht om te beginnen en voeg daarna je CSS toe.

Bewerkingsopties

Je hebt een paar opties voor het bewerken van je stylesheet, en die zijn direct aan de rechterkant van het bewerkingsvenster te vinden:

Preprocessor: de CSS bewerker heeft ondersteuning voor CSS preprocessors LESS en Sass (SCSS Syntax). Dit is een geavanceerde optie voor gebruikers die CSS extenties als variabelen en mixins willen benutten. Zie de LESS en Sass websites voor meer informatie.
Add-on: als je wijzigingen maakt aan het ontwerp van je website, kun je ervoor kiezen om op het bestaande thema stylesheet te bouwen (Add-on CSS), of het bestaande stylesheet van het thema te vervangen door je eigen CSS. Kies de tweede optie als je wilt beginnen met alleen de HTML structuur van het thema te vervangen en de hele CSS opnieuw te creëren van het begin af. Raadpleeg het originele stylesheet van het thema als verwijzing en zorg dat alle regels/stijlen er zijn. Als je bepaalde elementen mist, zal het openbare zicht van het blog er scheef uitzien. Alleen de CSS code in het bewerkingsvenster zal op je blog worden toegepast met deze optie.
Mobile Compatible: als je gebruik maakt van Jetpack’s Mobiele Theme, wil je misschien je CSS wijzigigen ook toepassen op het mobiele thema.
Content width: deze optie moet gebruikt worden als je de breedte van de belangrijkste content gewijzigd hebt met gebruik van custom CSS. De “Content Breedte” instelling wordt gebruikt als standaardafmeting voor volledige afbeeldingen, video’s en enkele shortcode breedtes als ze in je blog worden ingevoegd. Let wel, dit zal geen invloed hebben op de afmeting van bepaalde afbeeldingen en video’s die je hebt toegevoegd voordat je de instellingen wijzigde, afhankelijk van de manier waarop ze ingevoegd zijn, en misschien moet je er een paar opnieuw invoeren na het wijzigen van de instelling.

Previewing and Saving

Bij het bewerken van je CSS, is het een erg goed idee om altijd je wijzigingen te controleren voordat je ze echt toepast – ongeacht je vaardigheidsnivau. Nadat je wijzigingen hebt aangebracht aan je CSS, klik dan Voorbeeld Tonen aan.

Een nieuwe browser venster/tabblad zal geopend worden waarmee je kunt zien hoe je blog eruit ziet als de CCS wordt toegepast. Bovenaan je blog zul je een bericht zien, precies onder je grijze beheerbalk:

Als je vindt dat het er goed uitziet en je de wijzigingen wilt opslaan, ga dan terug naar je open CSS Bewerkingsvenster en klik Stylesheet Opslaan aan.

CSS Revisions

De CSS Revisie module toont alle backup copies van je custom CSS. Telkens als je op Save Stylesheet klikt, wordt een revisie opgeslagen. Jetpack slaat de laatste 25 revisies voor elke post op je blog op. Met de CSS revisies kun je terugkijken naar de recente wijzigingen en teruggaan naar een eerdere versie als dat nodig is.

Om CSS Revisies te vergelijken, selecteer je een revisie datum in de CSS Revisions sectie onder de Bewerker. Selecteer een andere datum in de revisies lijst, klik Revisies Vergelijken, en je kunt de twee versies van je CSS naast elkaar bekijken, met de wijzigingen duidelijk gemarkeerd.