In dit artikel wordt uitgelegd hoe je Personio-carrièrepagina kunt aanpassen met CSS.
Tip
Cascading Style Sheets (CSS) is een programmeertaal en een van de kerntalen van het world wide web. CSS wordt gebruikt om ontwerpopdrachten voor webpagina's te maken, voornamelijk met de opmaaktaal HTML.
Je Personio-carrièrepagina aanpassen met CSS
De structuur van je Personio-carrièrepagina wordt gemaakt met HTML. De visuele vormgeving van de afzonderlijke HTML-elementen wordt gedefinieerd met CSS. CSS-code wordt meestal opgeslagen in een apart opmaakmodel, dat via de metadata van de website gekoppeld wordt aan de bijbehorende HTML-code. Bij het ontwerpen van je Personio-carrièrepagina vormt het invoerveld Aangepaste CSS je opmaakmodel.
Het invoerveld Aangepaste CSS
Volg deze stappen om je Personio-carrièrepagina aan te passen aan de huisstijl van je bedrijf:
- Ga in de Instellingen naar Werving & selectie > Carrièrepagina.
- Scrol omlaag naar Design en ga naar Aangepaste CSS.
De volgende afbeelding toont het invoerveld Aangepaste CSS met voorbeeldinhoud:
Het ontwerp van een specifiek element aanpassen
Om het ontwerp van een specifiek element van je Personio-carrièrepagina (zoals de categorieknoppen) aan te passen met CSS, moet je een unieke koppeling creëren tussen het opmaakmodel en het bijbehorende HTML-element. Deze koppeling wordt tot stand gebracht met 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. Als je CSS-opmaak toepast op je Personio-carrièrepagina, zul je meestal klasseselectoren gebruiken.
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 links en ontwerpopties een gedetailleerde lijst van alle elementen.
Selectoren zoeken
Volg deze stappen om de relevante selectoren te vinden:
- Open je Personio-carrièrepagina. Je vindt de URL in de Instellingen via 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 op het element dat je wilt opmaken. Het element wordt automatisch gemarkeerd in het venster met de HTML-structuur. Vervolgens kun je de gewenste klasse kopiëren. De categorieknoppen behoren bijvoorbeeld tot de klasse ".category-btn".
Opmerking
Als je eigenschappen en waarden rechtstreeks in de codeweergave overschrijft of toevoegt, wijzig je alleen de 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 in de Instellingen naar Werving & selectie > Carrièrepagina. Scrol omlaag naar Opmaak > Aangepaste CSS om de juiste klasse te selecteren met behulp van de klassenaam voorafgegaan door ".". Geef met accolades aan welke eigenschap van het HTML-element je wilt wijzigen (bijvoorbeeld: color) en welke waarde je eraan wilt toewijzen (bijvoorbeeld #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} Zodra je deze opmaakopdracht invoert, wordt de categorieknop op de carrièrepagina weergegeven in turquoise met witte tekst.
Suggesties voor het ontwerpen van je carrièrepagina
Hieronder vind je suggesties voor het ontwerp van je carrièrepagina. Op onderstaande afbeelding is het invoerveld Aangepaste CSS te zien met op elke regel voorbeelden van code.
Voorbeeldcode
Je Personio-carrièrepagina kan verder worden aangepast met CSS. Aanpassingsopties omvatten echter geen wijzigingen in de logica of de paginastructuur.
Element: achtergrondafbeelding voor de kopregel
Gebruik CSS-opmaak om het grijsfilter te verwijderen dat is toegepast 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
Om de achtergrondafbeelding van je kopregel te verbergen, selecteer je de betreffende optie onder Carrièrepagina > Design > Lay-out. Deze functie is handig als je Personio-carrièrepagina via een iframe 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 heeft 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 functies.
Element: opschrift
De tekst die in het midden van de achtergrondafbeelding in de kopregel van een Personio-carrièrepagina verschijnt, kan worden opgemaakt in Opschriften. Als je het veld verder wilt aanpassen dan het standaard bewerkingsveld toestaat, kun je CSS gebruiken om de opmaak verder te wijzigen, bijvoorbeeld (regel 1 van de afbeelding):
.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 het getoonde voorbeeld is de bovenste zoekbalk lichtblauw (regel 2 van de afbeelding):
.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. Je kunt dit niet verwijderen, maar je kunt wel de kleur van het pictogram wijzigen om het te verbergen of te benadrukken (regel 3 van de afbeelding).
.fas.fa-search {color:#fff}- Klasse om het element te selecteren: .fas.fa-search
- Eigenschap: color
- Voorbeeldwaarde voor de eigenschap: #fff (wit)
Element: zoekknop
Je kunt ook het ontwerp van de knoppen op je carrièrepagina wijzigen. Zoals bijvoorbeeld hieronder het ontwerp van de knop Zoeken in de zoekbalk (regel 4 van de afbeelding):
.career-btn-primary { background-color:#FF0; color:#242424 }- Klasse om het element te selecteren: .career-btn-primary
- Eigenschappen: color, background-color
Bovendien kun je bepalen hoe knoppen worden weergegeven als een kandidaat de muis erover beweegt. Hiervoor worden 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 afbeelding):
.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. Deze kleur kun je zelf aanpassen (regel 6 van de afbeelding):
.job-box {background-color: #d5f0f7}- Klasse om het element te selecteren: .job-box
- Eigenschap: background-color
Je kunt ook het pijltje (>) aanpassen dat fungeert als link naar de functie (regel7 van de afbeelding):
.jb-link {color: #23b6dd} - Klasse om het element te selecteren: .jb-link
- Eigenschap: color
Element: voetregel
Je kunt ook de voetregel aanpassen 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. Je kunt ook de links in de voettekst aanpassen (regel 8 van de afbeelding):
.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
Controleer de wijzigingen die je in het ontwerp hebt aangebracht met behulp van de knop Preview. De hierboven beschreven CSS-wijzigingen zien er bijvoorbeeld als volgt uit:
Toegestane koppelingen en ontwerpopties
Het volgende 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, background-image, text-align, width, height, text-transform, padding, padding-right, padding-top, padding-bottom, margin, margin-left, margin-right, margin-top, margin-bottom, border, border-top, border-bottom, border-left, border-right, border-radius
Lees meer over Afbeeldingen en video's invoegen in Personio-carrièrepagina's.
CSS code sanitizer
Ook als je een wijziging wilt aanbrengen die niet is toegestaan, kun je die invoeren in het invoerveld Aangepaste CSS. Je invoer wordt echter na het opslaan verwijderd en wordt 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;).