WordPress theme aanpassen met CSS

Wanneer je een eigen website hebt met WordPress en je wilt wat aanpassingen gaan doen aan het uiterlijk van de website dan is enige kennis van CSS wel handig. Je kunt namelijk op een redelijk eenvoudige manier aanpassingen doen in het CSS bestand wat het uiterlijk van je WordPress Theme regelt.

Overigens noemen we een theme ook wel een template. Beide termen gaan over hetzelfde. Het theme bepaalt hoe WordPress er uit ziet. In dit artikel heb ik het dus over het WordPress theme.

WordPress theme aanpassen via het dashboard

De meest eenvoudige manier om wat aan te passen aan je CSS bestand is door in het menu van je WordPress dashboard naar Weergave te gaan en dan op Editor te klikken.

De eerste pagina die dan opent is het belangrijkste CSS bestand van het theme dat je gebruikt. Nu kun je aan de slag met het aanpassen van CSS door regels te veranderen, weg te halen en bij te voegen. Natuurlijk moet je dan wel enige kennis van CSS hebben, waarover later meer.

Regelmatig updaten

Maar dit is echter geen verstandige keuze omdat je hier te maken hebt met een theme dat misschien wel verandert. Veel themes die je vindt worden met enige regelmaat geüpdatet. Bijvoorbeeld als er een nieuwe versie van WordPress uit is of als er een fout in het theme gevonden wordt. Lees verder »

Hoe maak ik een website met HTML en CSS?

Een eenvoudige website in HTML en CSS, hoe maak ik dat? Een vraag die je met een site als deze regelmatig langs ziet komen. In dit artikel laat ik je zien hoe je dat doet.

Hiervoor maak ik gebruik van HTML5 en CSS3. Maar let wel, ik heb het hier enkel over de basis. Niet over ingewikkelde mogelijkheden die er zijn, niet over allerlei toevoegingen zoals webwinkels of content management systemen.

Daar heb je namelijk veel meer voor nodig dan een beetje HTML en CSS.

Een HTML document

Maar goed, we gaan dus weer even terug naar de basis. Hoe zat het ook alweer?

Ten eerste moet je de browser vertellen dat je een HTML document hebt. Dat doe je in de eerste plaats door het document op te slaan als een .htm document. Dat doe je niet in een programma als Word, maar dat doe je in een tekstverwerkingsprogramma die tekst kaal opslaat.

Kladblok op je Windowscomputer bijvoorbeeld, of teksteditor op de Mac.
Even opletten bij het opslaan dat je als extentie dus .htm meegeeft.

Een doctype

Ten tweede geef je een html document een Doctype mee. Vroeger, in de tijd van HTML4.01 was dat ingewikkeld. Je had verschillende versies, voor strikt gebruik of voor meer los gebruik. Lees verder »

CSS Pseudo selectors :before, :after, :focus en :first-child

In de serie over CSS selectors ga ik het vandaag hebben over enkele bijzondere selectors. Ten eerste twee selectors om extra tekst te genereren, :before en :after. Daarnaast de pseudo selector :first-child en :focus.

:before

Het pseudo element kan iets wat met geen andere selector kan, namelijk het vooraf laten komen van content bij een element.

Een voorbeeld. Stel je hebt een lijst met links, maar enkele links zijn extra waardevol. Als het ware een supertip.

Deze links kun je vooraf laten gaan met de tekst ‘Supertip’. Dit kun je natuurlijk doen door in je HTML code deze tekst toe te voegen, maar met de :before selector kun je het jezelf makkelijker maken.

Dit kan namelijk wel eens van pas komen als je de opzet van je site aanpast zonder aan de HTML code te komen. Makkelijke uiterlijke aanpassingen doe je dan met je CSS.

Eenvoudig toevoegen

Een :before selector is eenvoudig in te voegen. Maak eerst een class aan die we de naam ‘tip’ geven (.tip dus). Voeg deze class toe aan de paragraaf of link die de extra toevoeging krijgt. Bijvoorbeeld Lees verder »

Hoe maak je een flexibele layout met meerdere kolommen in HTML en CSS

Een website bestaat vaak uit meerdere kolommen. In deze tutorial wil ik je laten zien hoe je een webpagina maakt die bestaat uit 4 kolommen. Deze kolommen hebben een flexibele breedte, afhankelijk van de breedte van het beeldscherm. Let op, ik heb de webpagina niet responsive gemaakt.

Foto portfolio of kranten ‘look’

De 4 kolommen website zie je vaak terug bij websites die het uiterlijk van een krant weergeven of bij een website waar je een foto portfolio in wilt maken. Dat laatste gaan we dan ook oppakken.

Om dit te bewerkstelligen zul je ten eerste een webpagina moeten opzetten die bestaat uit een header en vier divs om de kolommen mee te gaan maken. Ook moeten we een achttal afbeeldingen hebben die we er in gaan plaatsen.