Op de CV Feedback-pagina kun je met aangepaste CSS de vormgeving van het cv aanpassen. Hiermee kun je de pagina beter laten aansluiten op de huisstijl van jouw organisatie.
Denk bijvoorbeeld aan het aanpassen van kleuren, lettertypes, marges, kolommen, het logo, profielblokken en de opmaak van werkervaring.
Wat kun je aanpassen?
De volgende CSS-selectors kunnen gebruikt worden om onderdelen van de CV Feedback-pagina aan te passen:
#container .container header header #logo header .col-center header h1 h1 h2 h3 h1, h2, h3 .row .col .col-3 .col-auto .col-center .col-flex div.col-3 div.resumeBlock div.col-3 div.resumeBlock h3 div.col-3 div.resumeBlock ul div.col-auto div.resumeBlock div.resumeBlock table .info-block-row:not(:last-child) .info-block-label .info-block-value .input-label .no-star::after .star::after .ratings-score .profilePictureContainer .profilePictureContainer img
Let op: met CSS pas je alleen de vormgeving aan. De inhoud van het cv wordt hiermee niet aangepast.
Algemene huisstijl instellen
Met onderstaande CSS pas je de basisstijl van de CV Feedback-pagina aan, zoals het lettertype, de tekstkleur en de algemene spacing.
#container {
font-family: Arial, sans-serif;
color: #1f2933;
background-color: #ffffff;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 40px;
}
h1, h2, h3 {
color: #2f2a73;
font-weight: 700;
}
h1 {
font-size: 36px;
margin-bottom: 40px;
}
h2 {
font-size: 26px;
margin-bottom: 20px;
}
h3 {
font-size: 18px;
}Logo aanpassen
Het logo bovenaan de pagina kan aangepast worden met de selector header #logo.
header #logo {
max-width: 180px;
height: auto;
margin-bottom: 40px;
}Wil je het logo kleiner tonen? Gebruik dan bijvoorbeeld:
header #logo {
max-width: 140px;
}Kopteksten aanpassen
De pagina gebruikt verschillende kopteksten, zoals “Curriculum Vitae”, “Profiel” en “Werkervaring”. Deze kun je aanpassen met onderstaande CSS.
header h1 {
color: #1f2933;
font-size: 34px;
margin-top: 40px;
}
h2 {
color: #111827;
border-bottom: 2px solid #e5e7eb;
padding-bottom: 8px;
}Informatieblok links aanpassen
Links op de pagina kan een blok staan met gegevens zoals leeftijd, woonplaats en beschikbaarheid. Dit blok kun je aanpassen met de selectors voor resumeBlock en info-block.
div.col-3 div.resumeBlock {
border: 1px solid #dcdfe6;
border-radius: 8px;
padding: 18px;
background-color: #ffffff;
}
.info-block-row:not(:last-child) {
margin-bottom: 12px;
}
.info-block-label {
font-size: 12px;
color: #6b7280;
}
.info-block-value {
font-size: 15px;
font-weight: 700;
color: #111827;
}Profiel en werkervaring aanpassen
De hoofdinhoud van het cv staat meestal in de bredere kolom aan de rechterkant. Door witruimte en regelhoogte toe te voegen, wordt de tekst rustiger en beter leesbaar.
div.col-auto div.resumeBlock {
margin-bottom: 48px;
}
div.col-auto div.resumeBlock p {
line-height: 1.6;
margin-bottom: 16px;
}Tabellen aanpassen
Sommige onderdelen van het cv kunnen in tabelvorm worden weergegeven.
Deze tabellen kun je aanpassen met div.resumeBlock table.
div.resumeBlock table {
width: 100%;
border-collapse: collapse;
}
div.resumeBlock table td {
padding: 6px 10px;
vertical-align: top;
}Profielfoto aanpassen
Wanneer er een profielfoto wordt getoond, kun je de container en de afbeelding zelf aanpassen.
.profilePictureContainer {
width: 140px;
height: 140px;
margin-bottom: 24px;
}
.profilePictureContainer img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}Wil je liever een vierkante foto met afgeronde hoeken? Gebruik dan:
.profilePictureContainer img {
border-radius: 12px;
}Beoordelingen en sterren aanpassen
Wanneer er beoordelingen of sterren worden gebruikt op de CV Feedback-pagina, kun je deze aanpassen met de volgende selectors.
.ratings-score {
font-weight: 700;
color: #2f2a73;
}
.star::after {
color: #f5b301;
}
.no-star::after {
color: #d1d5db;
}Layout aanpassen
De CV Feedback-pagina gebruikt kolommen. In het voorbeeld staat links een smallere kolom en rechts de hoofdinhoud.
.row {
display: flex;
gap: 48px;
}
.col-3 {
flex: 0 0 220px;
}
.col-auto {
flex: 1;
}Voor een compactere layout kun je bijvoorbeeld deze CSS gebruiken:
.row {
gap: 32px;
}
.col-3 {
flex: 0 0 200px;
}Voorbeeld van complete CSS
Onderstaand voorbeeld geeft de CV Feedback-pagina een rustige en moderne opmaak.
#container {
font-family: Arial, sans-serif;
color: #1f2933;
background-color: #ffffff;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 40px;
}
header #logo {
max-width: 170px;
height: auto;
margin-bottom: 40px;
}
h1, h2, h3 {
color: #111827;
font-weight: 700;
}
h1 {
font-size: 36px;
margin-bottom: 48px;
}
h2 {
font-size: 26px;
margin-bottom: 20px;
}
h3 {
font-size: 18px;
}
.row {
display: flex;
gap: 48px;
align-items: flex-start;
}
.col-3 {
flex: 0 0 220px;
}
.col-auto {
flex: 1;
}
div.col-3 div.resumeBlock {
border: 1px solid #dcdfe6;
border-radius: 8px;
padding: 18px;
background-color: #ffffff;
}
.info-block-row:not(:last-child) {
margin-bottom: 12px;
}
.info-block-label {
font-size: 12px;
color: #6b7280;
}
.info-block-value {
font-size: 15px;
font-weight: 700;
color: #111827;
}
div.col-auto div.resumeBlock {
margin-bottom: 48px;
}
div.col-auto div.resumeBlock p {
line-height: 1.6;
}
div.resumeBlock table {
width: 100%;
border-collapse: collapse;
}
div.resumeBlock table td {
padding: 6px 10px;
vertical-align: top;
}
.profilePictureContainer {
width: 140px;
height: 140px;
margin-bottom: 24px;
}
.profilePictureContainer img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.ratings-score {
font-weight: 700;
color: #2f2a73;
}
.star::after {
color: #f5b301;
}
.no-star::after {
color: #d1d5db;
}Tips voor het testen
Controleer na het aanpassen van de CSS altijd of de pagina goed leesbaar blijft. Let hierbij vooral op:
- De tekst moet goed leesbaar blijven op verschillende schermformaten.
- Kolommen mogen elkaar niet overlappen.
- Het logo en eventuele profielfoto’s moeten netjes schalen.
- Lange teksten, zoals werkervaring of motivatie, moeten goed worden weergegeven.
Werkt de opmaak niet zoals verwacht? Verwijder dan tijdelijk de laatst toegevoegde CSS-regels en test opnieuw. Zo kun je snel achterhalen welke regel het probleem veroorzaakt.










