In dit artikel wordt uitgelegd hoe je Personio-carrièrepagina's kunt personaliseren met CSS.
Tip: Cascading Style Sheets, afgekort als CSS, is een programmeertaal en een van de kerntalen van het World Wide Web. CSS wordt gebruikt om ontwerpopdrachten voor webpagina's te maken, vooral in combinatie met de opmaaktaal HTML.
Ontwerpen met CSS
Volg deze stappen om je Personio-carrièrepagina met behulp van CSS aan te passen aan de huisstijl van je bedrijf:
- Ga naar Instellingen > WERVING & SELECTIE > Werving & Selectie > Carrièrepagina.
- Scrol omlaag naar Design en ga naar Aangepaste CSS.
Op de volgende schermafbeelding is het invoerveld Aangepaste CSS met voorbeeldinhoud te zien:
Klassen, selectoren en CSS-eigenschappen
De structuur van Personio-carrièrepagina's wordt gecreëerd in de programmeertaal HTML. De visuele vormgeving van de afzonderlijke HTML-elementen wordt gedefinieerd in de programmeertaal CSS. CSS-code wordt meestal opgeslagen in een apart opmaakmodel, dat via de metadata van een website gekoppeld wordt aan de bijbehorende HTML-code. Bij het ontwerpen van een Personio-carrièrepagina vormt het hierboven weergegeven invoerveld Aangepaste CSS je opmaakmodel.
Als je met CSS het ontwerp van een specifiek element van een Personio-carrièrepagina (zoals de categorieknoppen) wilt aanpassen, moet je een unieke koppeling creëren tussen het opmaakmodel en het betreffende HTML-element. Die koppeling wordt gelegd met behulp van selectoren. Je definieert de HTML-elementen die je wilt ontwerpen door de betreffende selectiecriteria op te nemen in je opmaakmodel. Er zijn verschillende soorten selectoren, maar voor het toepassen van CSS-opmaak op een Personio-carrièrepagina gebruik je meestal klasseselectoren.
Opmerking: Om veiligheidsredenen kun je niet alle HTML-elementen aanpassen via het invoerveld Aangepaste CSS. Aan het eind van dit artikel vind je onder het kopje Toegestane koppelingen en ontwerpopties een gedetailleerde lijst van alle elementen.
Selectoren identificeren
Voorbeeld
In onderstaande video zie je hoe je de klasse voor de categorieknoppen kunt bepalen.
Volg deze stappen om de selectoren te vinden waarop je je opmaak wilt toepassen:
- Open de betreffende Personio-carrièrepagina (de url is te vinden in Instellingen > WERVING & SELECTIE > Werving & Selectie > Carrièrepagina).
- Klik met de rechtermuisknop op de pagina en selecteer Inspecteer om de codeweergave te openen.
- Klik op het symbool linksboven in de codeweergave om de selectie van code-elementen mogelijk te maken.
- Klik vervolgens op het element dat je wilt opmaken. Het element wordt automatisch gemarkeerd in het venster met de HTML-structuur, zodat je gemakkelijk de gewenste klasse kunt kopiëren.
De categorieknoppen behoren tot de klasse '.category-btn'.
Opmerking: Als je eigenschappen en waarden rechtstreeks in de codeweergave overschrijft of toevoegt, wijzig je daarmee alleen de zogenaamde front-end. Deze wijzigingen zijn niet permanent en zijn alleen voor jou zichtbaar. Je moet het invoerveld Aangepaste CSS gebruiken om de back-end permanent te wijzigen.
Eigenschappen invoeren via het veld Aangepaste CSS
Ga naar Instellingen > WERVING & SELECTIE > Werving & Selectie > Carrièrepagina > Design > Aangepaste CSS om de betreffende klasse te selecteren via de klassenaam voorafgegaan door '.'. Geef met accolades aan welke eigenschap van het HTML-element je wilt wijzigen (hier: color) en welke waarde je eraan wilt toewijzen (hier: #ffffff = wit).
Een CSS-opdracht met klasseselector bestaat daarom standaard uit de volgende componenten:
.class-name {eigenschap:waarde; eigenschap:waarde; eigenschap:waarde}De CSS-code voor het bovengenoemde voorbeeld zou daarom zijn:
.category-btn {color: #ffffff; background-color: #23b6dd} Nadat deze opmaakopdracht ingevoerd is, wordt de categorieknop op de carrièrepagina weergegeven in turquoise met witte tekst.
CSS Code Sanitizer
Als een gewenste wijziging niet toegestaan is, kun je die wel in het invoerveld Aangepaste CSS invoeren, maar je invoer wordt na het opslaan verwijderd en niet geïmplementeerd. Dat komt door de CSS Code Sanitizer, een beveiligingsfunctie op de Personio-carrièrepagina's die alle niet-ondersteunde elementen in de HTML- en CSS-code verwijdert om het codeveld op te schonen.
De CSS Code Sanitizer maakt de carrièrepagina's veiliger door het invoerveld te controleren op schadelijke gegevens en die onmiddellijk te verwijderen.
De tool stroomlijnt daarnaast de code en groepeert vergelijkbare eigenschappen (bijvoorbeeld padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; wordt padding: 5px 10px 10px;).
Suggesties voor het ontwerp van je carrièrepagina's
Hieronder vind je een aantal suggesties voor het ontwerp van je carrièrepagina's. Op onderstaande screenshot is het invoerveld Aangepaste CSS te zien met op elke regel voorbeelden van code.
Je kunt je Personio-carrièrepagina's natuurlijk nog verder personaliseren met CSS. Maar wijzigingen in de logica of de paginastructuur behoren niet tot de aanpassingsmogelijkheden.
Element: achtergrondafbeelding voor de koptekst
Gebruik CSS om het grijsfilter te verwijderen dat het systeem toepast op de afbeelding die is opgeslagen onder Carrièrepagina > Design > Achtergrondafbeelding kopregel.
.background-image-wrapper {background-image: none;}- Klasse om het element te selecteren: .background-image-wrapper
- Eigenschap: background-image: none
Tip: Je kunt de achtergrondafbeelding voor de koptekst verbergen door de betreffende optie te selecteren onder Instellingen > WERVING & SELECTIE > Werving & Selectie > Carrièrepagina > Design > Lay-out. Deze functie is vooral nuttig als je je Personio-carrièrepagina met iFrame naadloos wilt integreren in de carrièrepagina van je bedrijf.
Element: achtergrondkleur
Je kunt CSS-opmaak gebruiken om de volledige achtergrondkleur van een Personio-carrièrepagina aan te passen aan de kleuren van je bedrijf. In de voorbeeldcode krijgt de carrièrepagina een lichtblauwe achtergrond:
.body-container, .footer, .background-image-wrapper.container-fluid
{background-color:#d5f0f7}- Klasse om het element te selecteren: .body-container, .footer, .background-image-wrapper.container-fluid
- Eigenschap: background-color
- Voorbeeldwaarde voor de eigenschap: #d5f0f7 (lichtblauw)
Opmerking: Het is niet mogelijk om verschillende achtergrondkleuren te kiezen voor de carrièrepagina en de functies.
Element: opschrift
De tekst die in het midden van de achtergrondafbeelding in de koptekst van een Personio-carrièrepagina verschijnt, kan opgemaakt worden in Opschriften. Als je echter een aanpassing wilt die verder gaat dan de mogelijkheden van het standaard bewerkingsveld, dan kun je CSS gebruiken om de opmaak verder te wijzigen, zoals bijvoorbeeld in regel 1 van de screenshot:
.recruiting-phrase {color: #d5f0f7; font-size: 40px}- Klasse om het element te selecteren: .recruiting-phrase
- Eigenschappen: color, font-size
- Voorbeeldwaarde voor de eigenschap: #d5f0f7 (lichtblauw), 40px
Element: zoekbalk
De zoekbalk van een Personio-carrièrepagina is standaard ingesteld op een grijs lettertype en een witte achtergrond. Je kunt CSS gebruiken om dit element aan te passen. In onderstaand voorbeeld krijgt de bovenste zoekbalk een lichtblauwe kleur (regel 2 van de screenshot):
.search-bar-wrapper {background-color:#d5f0f7}
#search-job {background-color: #d5f0f7}- Klasse om het element te selecteren: .search-bar-wrapper, #search-job
- Eigenschap: background-color
- Voorbeeldwaarde voor de eigenschap: #d5f0f7 (lichtblauw)
Element: pictogrammen
Standaard wordt in de zoekbalk Zoek functies op je carrièrepagina een grijs pictogram (een klein vergrootglas) weergegeven. Dat kan niet verwijderd worden, maar je kunt wel de kleur van het pictogram wijzigen om het te verbergen of te benadrukken (regel 3 van de schermafbeelding).
.fas.fa-search {color:#fff}- Klasse om het element te selecteren: .fas.fa-search
- Eigenschap: color
- Voorbeeldwaarde voor de eigenschap: #fff (wit)
Element: knop Zoeken
Op dezelfde manier kun je het ontwerp van de knoppen op een carrièrepagina wijzigen. Zoals bijvoorbeeld hieronder het ontwerp van de knop Zoeken in de zoekbalk (regel 4 van de schermafbeelding):
.career-btn-primary { background-color:#FF0; color:#242424 }- Klasse om het element te selecteren: .career-btn-primary
- Eigenschappen: color, background-color
Voor knoppen kun je bovendien definiëren hoe ze eruit moeten zien als een kandidaat de muis erover beweegt. Daarvoor worden zogenaamde pseudoklassen gebruikt om de knopeigenschappen te herdefiniëren. Pseudoklassen worden aangeduid met een dubbele punt gevolgd door een element, zoals het woord hover, na de eigenlijke klasse (regel 5 van de schermafbeelding):
.career-btn-primary:hover {color:#05eefa; background-color:#708281;
border:2px dotted #d5f0f5}- Klasse om het element te selecteren: .career-btn-primary:hover
- Syntax: .klasse-selector:pseudoklasse {eigenschap:waarde}
- Raadpleeg online CSS-tutorials voor meer informatie over pseudoklassen.
Element: functievak
Standaard worden de afzonderlijke functies weergegeven in vakken met een witte achtergrond. Die kleur kun je zelf aanpassen (regel 6 van de schermafbeelding):
.job-box {background-color: #d5f0f7}- Klasse om het element te selecteren: .job-box
- Eigenschap: background-color
Bovendien kun je het pijltje (>) aanpassen dat fungeert als link naar de functie (regel 7 van de schermafbeelding):
.jb-link {color: #23b6dd} - Klasse om het element te selecteren: .jb-link
- Eigenschap: color
Element: voetregel
De voetregel kan ook gepersonaliseerd worden met CSS. In dit voorbeeld wordt de achtergrondkleur van de voetregel ingesteld op turquoise en wordt de lettergrootte van de standaardtekst Powered by Personio verkleind. De links in de voetregel kunnen ook aangepast worden (regel 8 van de schermafbeelding):
.footer {background-color: #23b6dd; font-size: 12px;}
.footer a {color: #d5f0f7}- Klasse om het element te selecteren: .footer, .footer a (links)
- Eigenschappen: background-color, font-size, color
- Voorbeeldwaarde voor de eigenschap: #23b6dd (turquoise), 12px
Voordat je de gepersonaliseerde pagina publiceert, kun je de aangebrachte wijzigingen in het ontwerp op elk moment controleren met behulp van de knop Preview. De hierboven beschreven CSS-wijzigingen zien er bijvoorbeeld als volgt uit:
Toegestane koppelingen en ontwerpopties
Dit gedeelte bevat een overzicht van alle HTML-tags die als selectoren kunnen worden gebruikt en alle CSS-eigenschappen die je kunt wijzigen via de functie Aangepaste CSS.
Selectoren:
h1/h2/h3/h4/div, b, strong, i, em, a, ul, ol, li, p, br, span
Eigenschappen:
line-height, font, font-size, font-weight, font-style, font-family, text-decoration, padding-left, color, background, background-color, text-align, width, height, text-transform, padding-left, padding-right, padding-top, padding-bottom, margin-left, margin-right, margin-top, margin-bottom, border, border-radius
Lees meer over Afbeeldingen en video's invoegen in Personio-carrièrepagina's.