Overslaan en naar hoofdcontent gaan

Hoe kunnen we je helpen?

Zoeken

CV Feedback-pagina aanpassen met eigen CSS

Yellow Yard
  • Bijgewerkt

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.

Verwante artikelen