Dieser Artikel beschreibt, wie Sie Ihre Personio-Karriereseiten mit CSS individuell anpassen können.
Tipp: Cascading Style Sheets, kurz CSS genannt, ist eine Programmiersprache und eine der Kernsprachen des Internets. Mit CSS werden Gestaltungsanweisungen für Webseiten, meistens zusammen mit der Auszeichnungssprache HTML, erstellt.
Individuelle Anpassungen über CSS
Gehen Sie folgendermaßen vor, um Ihre Personio-Karriereseite mithilfe von CSS individuell gemäß Ihrem Corporate Design zu gestalten:
- Navigieren Sie auf Einstellungen > Recruiting > Recruiting > Karriereseite.
- Blättern Sie nach unten zu Design und wählen Sie Individuelles CSS.
Sehen Sie nachfolgend einen Ausschnitt, der das Eingabefeld Individuelles CSS mit entsprechenden Inhalten zeigt:
Klassen, Selektoren und CSS-Eigenschaften
Die Struktur von Personio-Karriereseiten ist in der Programmiersprache HTML abgebildet. Die visuelle Gestaltung der einzelnen HTML-Elemente ist über die Programmiersprache CSS definiert. Da der CSS-Code in der Regel in einem separaten Stylesheet hinterlegt ist, wird dieses über die Metadaten einer Website mit dem entsprechenden HTML-Code verknüpft. Für die Gestaltung einer Personio-Karriereseite betrachten Sie das oben gezeigte Eingabefeld Individuelles CSS als Stylesheet.
Um ein spezifisches Element einer Personio-Karriereseite (wie z. B. die Kategorie-Buttons) über CSS individuell gestalten zu können, ist es notwendig, einen eindeutigen Bezug zwischen dem Stylesheet und besagtem HTML-Element zu schaffen. Dieser Bezug wird über sogenannte 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. Finden Sie eine detaillierte Auflistung aller Elemente im unteren Bereich des Artikels unter Zugelassene Anknüpfungspunkte und Gestaltungsmöglichkeiten.
Identifizieren des Selektors
Beispiel
Das folgende Video zeigt Ihnen, wie Sie die Klasse für die Kategorie-Buttons bestimmen können.
Gehen Sie folgendermaßen vor, um die Selektoren zu finden, auf die Sie Ihr Design anwenden möchten:
- Öffnen Sie die betreffende Personio-Karriereseite (ihre URL finden Sie unter Einstellungen > Recruiting > 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 anschließend auf das Element, das Sie stylen möchten. So wird das Element im Fenster mit der HTML-Struktur automatisch markiert und Sie können die gewünschte Klasse einfach kopieren.
Die Kategorie-Buttons haben die Klasse „.category-btn“.
Hinweis: Ein Überschreiben/Hinzufügen von Eigenschaften und Werten direkt in der Code-Ansicht verändert nur das sogenannte 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.
Eingabe der Eigenschaft über das Feld Individuelles CSS
Unter Einstellungen > Recruiting > Recruiting > Karriereseite > Design > Individuelles CSS wählen Sie die entsprechende Klasse über den Klassennamen mit einem „.“ davor. 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. value: #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.
CSS-Code-Korrektur
Sollte eine Anpassung, die Sie vornehmen wollen, nicht zulässig sein, können Sie diese zwar in das Eingabefeld individuelles CSS eintragen, jedoch verschwindet Ihr Eintrag nach dem Speichern wieder und wird nicht umgesetzt. Dies liegt am CSS-Code-Sanitizer, einer Sicherheitsvorkehrung der Personio-Karriereseiten, die alle nicht unterstützten HTML- und CSS-Codeelemente entfernt – und so das Codefeld bereinigt.
Zur Sicherheit der Karriereseiten trägt der CSS-Code-Sanitizer bei, indem er sicherstellt, ob das Eingabefeld bösartige Daten enthält, die Schaden anrichten könnten, und diese sofort entfernt.
Außerdem kürzt das Tool den Code und gruppiert ähnliche Eigenschaften in nur einer Gruppe (z. B. wird padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; zu padding: 5px 10px 10px).
Ideen für die Gestaltung Ihrer Karriereseiten
Finden Sie nachfolgend einige Ideen zur Gestaltung Ihrer Karriereseiten. Der beigefügte Screenshot zeigt das Eingabefeld Individuelles CSS mit den Beispielen entsprechenden Codes pro Zeile.
Natürlich bieten Ihre Personio-Karriereseiten noch weitere Möglichkeiten zur Gestaltung über CSS. Grenzen liegen in der Änderung der Logik bzw. des Aufbaus der Seite.
Element: Header-Hintergrundbild
Über CSS-Styling können Sie den Graufilter entfernen, den das System auf das unter Karriereseite > Design > Header-Hintergrundbild hinterlegte Bild anwendet.
.background-image-wrapper {background-image: none;}- Klasse, um das Element anzusprechen: .background-image-wrapper
- Eigenschaft: background-image: none
Tipp: Wenn Sie das Header-Bild ausblenden möchten, wählen Sie einfach die entsprechende Option unter Einstellungen > Recruiting > Recruiting > Karriereseite > Design > Individuelles CSS aus. Diese Funktion ist besonders hilfreich, wenn Sie Ihre Personio-Karriereseite über IFrame nahtlos in die Karriereseite Ihres Unternehmens integrieren möchten.
Element: Hintergrundfarbe
Sie können per CSS-Styling die gesamte Hintergrundfarbe einer Personio-Karriereseite an Ihre Unternehmensfarben anpassen. Im Code-Beispiel wird 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 dem Punkt Beschreibungen und Übersetzungen > Überschrift formatiert werden. Wenn Sie jedoch weitere Anpassungswünsche als in dem vorgegebenen Editierfeld haben, haben Sie die Möglichkeit, diese mit CSS weiter zu formatieren, zum Beispiel (Zeile 1 im Screenshot):
.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. Via individuellen CSS haben Sie die Möglichkeit, dieses Element anzupassen. Hier im Beispiel wird die obere Suchleiste hellblau gefärbt (Zeile 2 im Screenshot):
.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 Keyword für die Stellenbezeichnung eingeben ein kleines, graues Lupensymbol an. Dieses kann zwar nicht gelöscht werden, aber Sie können die Farbe des Symbols verändern, um es so unsichtbar zu machen oder farbig hervorzuheben (Zeile 3 im Screenshot).
.fas.fa-search {color:#fff}- Klasse um das Element anzusprechen: .fas.fa-search
- Eigenschaft: color
- Beispielwert der Eigenschaft: #fff (weiß)
Element: Button Suchen
Analog dazu haben Sie die Möglichkeit, die Buttons auf einer Karriereseite zu gestalten. Im folgenden Beispiel ist die Gestaltung des Buttons Suchen in der Suchleiste (Zeile 4 im Screenshot) gezeigt:
.career-btn-primary { background-color:#FF0; color:#242424 }- Klasse um das Element anzusprechen: .career-btn-primary
- Eigenschaften: color, background-color
Eine Besonderheit der Buttons ist, dass Sie auch bestimmen können, wie diese aussehen sollen, wenn die sich bewerbende Person z. B. mit der Maus darüber hovert. Verwenden Sie dazu sogenannte Pseudo-Klassen und definieren Sie die Eigenschaften Ihres Buttons neu. Die Pseudoklasse erkennen Sie an dem Doppelpunkt und beispielsweise dem Wort "hover" hinter der eigentlichen Klasse(Zeile 5 im Screenshot):
.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: Positions Box
Die einzelnen Stellenausschreibungen werden standardmäßig in Boxen mit weißem Hintergrund aufgelistet. Sie können diese Farbe jedoch anpassen (Zeile 6 im Screenshot):
.job-box {background-color: #d5f0f7}- Klasse um das Element anzusprechen: .job-box
- Eigenschaften: background-color
Darüber hinaus können Sie den Pfeil, der als Link zur Stellenanzeige dient, anpassen (Zeile 7 im Screenshot):
.jb-link {color: #23b6dd} - Klasse um das Element anzusprechen: .jb-link
- Eigenschaften: color
Element: Footer
Auch der Footer kann via individuellem CSS angepasst werden. Hier im Beispiel ist die Footer-Farbe auf türkis gesetzt und die Schriftgröße des standardmäßigen Texts Powered by Personio verkleinert. Die Links im Footer können ebenfalls angepasst werden (Zeile 8 im Screenshot):
.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
Die vorgenommenen Design-Anpassungen können Sie über den Button Vorschau jederzeit vorm Veröffentlichen prüfen. Die oben beschriebenen CSS-Änderungen sehen zum Beispiel so aus:
Zugelassene Anknüpfungspunkte und Gestaltungsmöglichkeiten
Finden Sie nachfolgend eine Übersicht aller HTML-Tags, welche als Selektoren dienen können und aller CSS-Eigenschaften, welche Sie über das individuelle 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, 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
Lernen Sie, wie Sie Bilder und Videos in Personio-Karriereseiten einfügen.