Custom CSS

Met Custom CSS kan je het design van je site aanpassen. Ook al heb je honderden pagina’s, alles kan je zo in één klap veranderen. Ook de mobiele versie kun je zo een eigen design geven. Je moet een klein beetje CSS kunnen, maar alle code kun je ook simpel Googlen. Om te vinden welke CSS-code je precies moet aanpassen, kan je de site “Rechtsklik > inspecteren” in de browser.

De CSS kan je in de meeste thema’s aanpassen met de Customizer (in sommige zoals Divi zit het in de editor, bij Geavanceerd). Desnoods met een plug-in zoals Simple Custom CSS.

Bekijk een paar voorbeelden op AARTJAN.nl/blog, zoals al die animaties daar op mouse-overs (hover) bij plaatjes, kopteksten en in de kolom rechts. Of het fotootje rechtsboven. of de afgeronde styling van de knoppen. Of de horizontale lijntjes in de rechterkolom, en de styling met pijltjes in het menu: allemaal Custom CSS. Zie het korte filmpje verderop.

Bekijk ook de mobiele versie, door het venster kleiner te maken. Die is ook aangepast met Custom CSS, met een media query voor kleine schermen. Dus in de CSS staat dan onderaan een stukje speciaal voor kleine schermen: dat heet responsive design.

Rechtsklik > Inspecteer

Dit kan in vrijwel alle browsers, en dan zie je in de code welk element het is, met welke class, en in welk element met welke class dat staat. Je kan daar de CSS ook direct veranderen om het te testen.

Rechtsklik > Inspecteer kan in alle browsers. In Safari moet het zo: Voorkeuren > Geavanceerd > Opties voor ontwikkelaars

Voeg nieuwe CSS toe

CSS staat in de meeste thema’s bij de Customizer, of in een plugin voor Custom CSS. Meestal bij Dashboard > Weergave. Voeg daar je eigen CSS toe, bijvoorbeeld zo:

.entry-content h1 { font-size: 3rem; }

Dit betekent: alle h1’s in een div met class=”entry-content” worden 3x zo groot.

Hier staat een cursus CSS voor de basis, of hier over animaties en filters. Of Google alles.

Als het niet meteen werkt zet je er zo !important bij:

.entry-content p { font-size: 3rem;  !important; }

Als het dan nog niet werkt kan je Super Refreshen. In de meeste browsers zo:

  • ⌘ R is Refresh ZONDER CSS
  • ⌘ ⇧ R is Refresh MET CSS

Ander voorbeeld: een animatie op mouse-overs kan zo (zie ook het filmpje verderop):

.entry-content h1 { 
    color:black; 
    transition: all 0.5s;
}
.entry-content h1:hover { color:red; }

Waar is de CSS in DIVI?

In de DIVI Blockbuilder kan Custom CSS in de editor, bij Geavanceerd:

Mobile CSS: Responsive design

Meer dan de helft van je bezoek is mobiel. Onderaan de CSS kan je alle dingen die je op mobiel anders wil in een “media query” zetten, zodat je het design van de mobiele versie verder af kan stellen:

@media screen and (max-width: 600px) {

  .entry-content h1 { font-size: 2rem; }
  .entry-content p  { font-size: 1.3rem; }

}

Let op de accolades: Het geheel staat nu ook tussen de accolades van de query.

Je kan zo enorm veel dingen aanpassen. Bekijk AARTJAN.nl/blog en dit korte filmpje nog maar eens:

Kort filmpje met demo in 10 min

 




Media & Redactie opdracht

Deze opdracht is ook onderdeel van je examen. Daar maak je een Brandbook. Om dit te oefenen maak je  een analyse van een artikel op een nieuws-website. Die site kies je zelf. Je beschrijft de stijl van dat artikel. Dat doe je in een Bericht op je eigen website. Lever het in als url, in Teams.

In opdracht 2 maak je dan met Custom CSS die stijlen na. Zodat jouw website in de stijl van die nieuws-website is. Meer weten over CSS? Lees dan dit.

En in opdracht 3 pas je eigen stijlen toe op een plaatje, en op de eerste alinea.

Opdracht 1. Analyse

Kies een nieuws-website. Noteer de stijl van de onderstaande onderdelen van een artikel. Gebruik het web-infovenster (rechtsklik  > Inspecteer) om dat op te zoeken. Schrijf er een Bericht over,  op je website. Doe er ook screenshots bij van het artikel en een paar van jouw webinfovensters.

  • De koptekst: kleur, lettertype, fontgrootte en interlinie,
    oftewel color, font-family, font-size en line-height
  • Hetzelfde van de tussenkopjes
  • Idem van de broodtekst ofwel body text
  • De kleur en stijl van links
  • Streamers of quotes: een blockquote (als die er zijn)
  • De stijl van Onderschriften bij foto’s
  • Als de eerste alinea afwijkt (de intro of lead), dan ook deze stijl
  • Een Chapeau: staat er nog iets bovenaan, boven de kop?
  • Wat kun je zeggen over de stijl van plaatjes?

Een voorbeeld van zo’n webinfovenster:

Klik voor een vergroting

In het voorbeeld is de stijl van de koptekst h1:

  • Kleur
    color: #141412;
  • Lettertype
    font-family:  Bitter, Georgia, serif
    (dus de Bitter, en als de bezoeker dat niet heeft: dan de Georgia, en anders een serif ofwel een schreefletter)
  • Fontgrootte
    font-size: 48px;
  • Interlinie
    line-height: 1.3;

Verder noteer je ook de HTML van deze kop. In dit voorbeeld is dat een h1 met class=”entry-title”. Dat is in de meeste WordPress-sites zo. In jouw CSS wordt dat dan straks:

h1.entry-title { hier komen de stijlen }

Een paragraaf in de HTML van WordPress is meestal een p die in een groot blok staat. Dat blok is meestal een  <div class=entry-content>. In jouw CSS wordt dat dan:

.entry-content p { hier komen de stijlen }

Opdracht 2. Custom CSS

Als je in jouw Customizer geen Custom CSS ziet (niet elk Thema heeft dat), dan activeer je de plugin voor Custom CSS. Die zie je dan bij Dashboard > Weergave. Voeg daar je css-code toe. Een gewone WordPress-paragraaf kun je in de CSS meestal zo vormgeven:

.entry-content p { color: red; }

Dit betekent: alle p’s die in een div met class=”entry-content” staan worden rood.

Als het niet werkt zet je er !important bij:

.entry-content p { color: red !important; }

Als het dan nog niet werkt kan je extra Refreshen. In elke browser anders, maar vaak zo:

  • ⌘ R is Refresh ZONDER CSS
  • ⌘ ⇧ R is Refresh MET CSS

Filmpje met uitleg

 

3. Gebruik twee eigen classes

Gebruik ook twee eigen classes: een voor plaatjes, en een voor tekst. Pas die toe in je artikel. Bijvoorbeeld voor een border om een plaatje. Voeg deze CSS toe aan het plaatje. In de Classic editor bijvoorbeeld zo: Klik het plaatje > klik Potloodje > vul bij CSS-klasse jouw class in:

In de nieuwe WordPress Blok-editor: klik het plaatje, klik de drie puntjes > Meer instellingen > beneden: Geavanceerd > class

En in de Custom CSS zet je dan iets als dit om het te laten werken:

.border {border: 5px solid grey; border-radius: 100px;}

 Lever drie screenshots in op Teams: 1x de HTML, 1x de CSS en 1x het resultaat.

Doe dit ook voor een tekst, bijvoorbeeld voor de stijl van de eerste alinea (de intro):

.intro {font-weight:bold; font-size: 1.6rem;}

Pas deze stijl “intro” toe op de eerste alinea van een bericht, met de code <span class=intro>  aan het begin, en aan het einde </span>. Dit moet in de HTML Code Editor. Die zit bij de knoppen Visueel / Tekst rechtsboven, of in de nieuwe WordPress Blok-editor  via de 3 puntjes > als HTML omzetten:

<span class=intro> Hier komt de hele eerste alinea </span>

 Lever ook hiervan drie screenshots in.