Dieser Artikel beschreibt, wie Sie Ihre Personio-Karriereseite mit CSS individuell anpassen können.
Tipp
Cascading Style Sheets (CSS) ist eine Programmiersprache und eine der Kernsprachen des Internets. Mit CSS werden Gestaltungsanweisungen für Webseiten, meistens zusammen mit der Auszeichnungssprache HTML, erstellt.
Ihre Personio-Karriereseite mit CSS individuell gestalten
Die Struktur Ihrer Personio-Karriereseite wird in HTML erstellt. Die visuelle Gestaltung der einzelnen HTML-Elemente wird über CSS definiert. Der CSS-Code wird in der Regel in einem separaten Stylesheet hinterlegt, das über die Metadaten der Website mit dem entsprechenden HTML-Code verknüpft ist. Für die Gestaltung Ihrer Personio-Karriereseite betrachten Sie das Eingabefeld Individuelles CSS als Stylesheet.
Eingabefeld Individuelles CSS
Gehen Sie folgendermaßen vor, um Ihre Personio-Karriereseite entsprechend Ihrem Corporate Design individuell zu gestalten:
- Navigieren Sie in den Einstellungen auf Recruiting > Karriereseite.
- Scrollen Sie nach unten zu Design und wählen Sie Individuelles CSS.
Sehen Sie nachfolgend eine Abbildung, die das Eingabefeld Individuelles CSS mit Musterinhalten zeigt:
Design eines bestimmten Elements anpassen
Um ein spezifisches Element Ihrer Personio-Karriereseite (wie z. B. die Kategorie-Buttons) über CSS individuell zu gestalten, müssen Sie einen eindeutigen Bezug zwischen dem Stylesheet und dem entsprechenden HTML-Element schaffen. Dieser Link wird mit Selektoren hergestellt.
Durch die Angabe passender Selektionskriterien im Stylesheet definieren Sie, welche HTML-Elemente Sie gestalten möchten. Es gibt unterschiedliche Arten von Selektoren – für das CSS-Styling einer Personio-Karriereseite ist vor allem die Verwendung von Klassen-Selektoren gängig.
Hinweis
Aus Sicherheitsgründen können nicht alle HTML-Elemente über das Eingabefeld Individuelles CSS individuell gestaltet werden. Eine detaillierte Auflistung aller Elemente finden Sie im unteren Bereich des Artikels unter Zulässige Anknüpfungspunkte und Gestaltungsmöglichkeiten.
Selektoren finden
Gehen Sie folgendermaßen vor, um die entsprechenden Selektoren zu finden:
- Öffnen Sie Ihre Personio-Karriereseite. Die URL finden Sie in den Einstellungen unter Recruiting > Karriereseite.
- Navigieren Sie über Rechtsklick auf Untersuchen, um die Code-Ansicht aufzurufen.
- Klicken Sie auf das Symbol links oben in der Code-Ansicht und aktivieren Sie so die Möglichkeit, Elemente im Code auszuwählen.
- Klicken Sie auf das Element, das Sie stylen möchten. Das Element wird im Fenster mit der HTML-Struktur automatisch markiert. Anschließend können Sie die gewünschte Klasse kopieren. Die Kategorie-Buttons gehören beispielsweise zur Klasse ".category-btn".
Hinweis
Ein Überschreiben oder Hinzufügen von Eigenschaften und Werten direkt in der Code-Ansicht verändert nur das Frontend. Diese Änderungen sind nicht von Dauer und nur für Sie sichtbar. Um das Backend dauerhaft zu verändern, nutzen Sie das Eingabefeld Individuelles CSS.
Eigenschaften über das Eingabefeld Individuelles CSS eingeben
Navigieren Sie in den Einstellungen auf Recruiting > Karriereseite. Scrollen Sie nach unten zu Design > Individuelles CSS, um die entsprechende Klasse über den Klassennamen mit einem vorgeschalteten "." auszuwählen. In geschweiften Klammern benennen Sie, welche Eigenschaft des HTML-Elements (property, hier z. B. die Farbe, also „color“) verändert werden soll und welchen Wert Sie ihr zuweisen möchten (z. B.: #ffffff = weiß).
Standardmäßig besteht ein CSS-Befehl mit Klassenselektor also aus den folgenden Komponenten:
.class-name {property:value; property:value; property:value;}Der CSS-Code für das oben genannte Beispiel wäre demnach:
.category-btn {color: #ffffff; background-color: #23b6dd} Nach Eingabe dieses Styling-Befehls wird der Kategorie-Button auf der Karriereseite in Türkis mit weißer Schrift dargestellt.
Ideen für die Gestaltung Ihrer Karriereseite
Finden Sie nachfolgend Vorschläge zur Gestaltung Ihrer Karriereseite. Die Abbildung unten zeigt das Eingabefeld Individuelles CSS mit Muster-Code für die einzelnen Zeilen.
Muster-Code
Sie können Ihre Personio-Karriereseite mit CSS noch weiter individuell gestalten. Die Anpassungsoptionen beinhalten jedoch keine Änderungen an der Logik oder der Seitenstruktur.
Element: Header-Hintergrundbild
Über CSS-Styling können Sie den Graufilter entfernen, der auf das unter Karriereseite > Design > Header-Hintergrundbild hinterlegte Bild angewendet wird.
.background-image-wrapper {background-image: none;}- Klasse, um das Element anzusprechen: .background-image-wrapper
- Eigenschaft: background-image: none
Tipp
Wenn Sie das Header-Bild verbergen möchten, aktivieren Sie die entsprechende Option unter Karriereseite > Design > Layout. Diese Funktion ist hilfreich, wenn Sie Ihre Personio- Karriereseite über iFrame in die Karriereseite Ihres Unternehmens einbinden möchten.
Element: Hintergrundfarbe
Sie können per CSS-Styling die gesamte Hintergrundfarbe einer Personio-Karriereseite an Ihre Unternehmensfarben anpassen. Im Code-Beispiel ist die Karriereseite in hellblau gefärbt:
.body-container, .footer, .background-image-wrapper.container-fluid
{background-color:#d5f0f7}- Klasse um das Element anzusprechen: .body-container, .footer, .background-image-wrapper.container-fluid
- Eigenschaften: background-color
- Beispielwerte der Eigenschaft: #d5f0f7 - hier hellblau
Hinweis Es ist nicht möglich, für die Karriereseite und die Stellenausschreibungen unterschiedliche Hintergrundfarben zu hinterlegen.
Element: Überschrift
Die Überschrift, die mittig auf dem Header-Bild einer Personio-Karriereseite erscheint, kann unter Beschreibungen und Übersetzungen > Überschrift formatiert werden. Wenn Sie die Überschrift über das vorgegebene Editierfeld hinaus anpassen möchten, können Sie mit CSS weitere Formatierungsänderungen vornehmen, zum Beispiel (Zeile 1 im Bild):
.recruiting-phrase {color: #d5f0f7; font-size: 40px}- Klasse um das Element anzusprechen: .recruiting-phrase
- Eigenschaften: color, font-size
- Beispielwerte der Eigenschaft: #d5f0f7 - hier hellblau, 40px
Element: Suchleiste
Die Suchleiste einer Personio-Karriereseite erscheint standardmäßig mit einem weißen Hintergrund und grauer Schrift. Sie können dieses Element über individuelles CSS anpassen. Im gezeigten Beispiel ist die obere Suchleiste hellblau gefärbt (Zeile 2 im Bild):
.search-bar-wrapper {background-color:#d5f0f7}
#search-job {background-color: #d5f0f7}- Klasse um das Element anzusprechen: .search-bar-wrapper, #search-job
- Eigenschaften: background-color
- Beispielwerte der Eigenschaft: #d5f0f7 - hier hellblau
Element: Icons
Standardmäßig zeigt Ihre Karriereseite in der Suchleiste Stellen durchsuchen ein kleines, graues Lupensymbol an. Sie können dieses Symbol zwar nicht löschen, aber Sie können seine Farbe verändern, um es so unsichtbar zu machen oder farbig hervorzuheben (Zeile 3 im Bild).
.fas.fa-search {color:#fff}- Klasse um das Element anzusprechen: .fas.fa-search
- Eigenschaft: color
- Beispielwert der Eigenschaft: #fff (weiß)
Element: Suchen-Button
Sie können auch das Design der Buttons auf Ihrer Karriereseite anpassen. Das folgende Beispiel zeigt ein Design des Buttons Suchen in der Suchleiste (Zeile 4 im Bild):
.career-btn-primary { background-color:#FF0; color:#242424 }- Klasse um das Element anzusprechen: .career-btn-primary
- Eigenschaften: color, background-color
Sie können außerdem definieren, wie Buttons angezeigt werden sollen, wenn die sich bewerbende Person mit der Maus darüber fährt. Verwenden Sie dazu sogenannte Pseudo-Klassen, um die Eigenschaften der Buttons neu zu definieren. Pseudo-Klassen erkennen Sie an einem Doppelpunkt, gefolgt von einem Element wie z. B. dem Wort „hover“ hinter der eigentlichen Klasse (Zeile 5 im Bild):
.career-btn-primary:hover {color:#05eefa; background-color:#708281;
border:2px dotted #d5f0f5}- Klasse um das Element anzusprechen: .career-btn-primary:hover
- Syntax: .class-selector:pseudo-class {property:value;}
- Weitere Informationen zu Pseudo-Klassen finden Sie auf Internetseiten mit CSS-Tutorials
Element: Stellen-Box
Die einzelnen Stellen werden standardmäßig in Boxen mit weißem Hintergrund aufgelistet. Sie können diese Farbe jedoch anpassen (Zeile 6 im Bild):
.job-box {background-color: #d5f0f7}- Klasse um das Element anzusprechen: .job-box
- Eigenschaften: background-color
Sie können auch den Pfeil anpassen, der als Link zur Stelle dient (Zeile 7 im Bild):
.jb-link {color: #23b6dd} - Klasse um das Element anzusprechen: .jb-link
- Eigenschaften: color
Element: Footer
Sie können auch den Footer via individuelles CSS anpassen. Hier im Beispiel ist die Footer-Farbe auf türkis gesetzt und die Schriftgröße des standardmäßigen Texts Powered by Personio verkleinert. Sie können auch die Links im Footer anpassen (Zeile 8 im Bild):
.footer {background-color: #23b6dd; font-size: 12px;}
.footer a {color: #d5f0f7}- Klasse um das Element anzusprechen: .footer, .footer a (Links)
- >Eigenschaften: background-color, font-size, color
- Beispielwert der Eigenschaft: #23b6dd - hier türkis, 12px
Überprüfen Sie die Änderungen, die Sie am Design vorgenommen haben, mithilfe des Buttons Vorschau. Die oben beschriebenen CSS-Änderungen sehen zum Beispiel so aus:
Zulässige Anknüpfungspunkte und Gestaltungsmöglichkeiten
Finden Sie nachfolgend eine Übersicht aller HTML-Tags, die als Selektoren dienen können, sowie aller CSS-Eigenschaften, die Sie über die Funktion Individuelles CSS anpassen können.
Selektoren
h1/h2/h3/h4/div, b, strong, i, em, a, ul, ol, li, p, br, span
Eigenschaften
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
Lernen Sie, wie Sie Bilder und Videos in Personio-Karriereseiten einfügen.
CSS-Code-Korrektur
Wenn Sie eine nicht zulässige Anpassung vornehmen wollen, können Sie diese im Eingabefeld Individuelles CSS eingeben. Ihre Eingabe verschwindet jedoch nach dem Speichern wieder und wird nicht umgesetzt. Dies liegt am CSS-Code-Sanitizer, einer Sicherheitsfunktion der Personio-Karriereseiten, die alle nicht unterstützten HTML- und CSS-Codeelemente entfernt und so das Codefeld bereinigt.
Der CSS-Code-Sanitizer trägt zur Sicherheit der Karriereseiten bei, indem er das Eingabefeld auf bösartige Daten prüft, die Schaden anrichten könnten, und diese sofort entfernt.
Außerdem kürzt das Tool den Code und gruppiert ähnliche Eigenschaften (z. B. wird padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; zu padding: 5px 10px 10px).