Personio-Karriereseite: Gestaltung mit CSS

 

Dieser Artikel beschreibt, wie Sie Ihre Personio-Karriereseiten mit CSS individuell anpassen können.

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

Unter Einstellungen > Recruiting > Karriereseite > Design haben Sie die Möglichkeit, eine Personio-Karriereseite anhand von vordefinierten Konfigurationsmöglichkeiten an Ihr Corporate Design anzupassen. Weitere Informationen über die Konfiguration einer Personio-Karriereseite finden Sie hier.

Sollten Sie eine Personio-Karriereseite noch individueller gestalten wollen, können Sie hierfür CSS nutzen. Navigieren Sie dazu auf Einstellungen > Recruiting > Karriereseite > Design > Benutzerdefiniertes CSS. Sehen Sie nachfolgend einen Ausschnitt, der das Eingabefeld Benutzerdefiniertes CSS mit entsprechenden Inhalten zeigt:

careerpage-custom-css_de.png

 

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 Benutzerdefinierte 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.

Bitte beachten Sie, dass aus Sicherheitsgründen nicht alle HTML-Elemente über das Eingabefeld Benutzerdefiniertes CSS individuell gestaltet werden können. Finden Sie eine detaillierte Auflistung aller Elemente im unteren Bereich des Artikels unter Zugelassene Anknüpfungspunkte und Gestaltungsmöglichkeiten.

 

Identifizieren des Selektors

Um die Selektoren ausfindig zu machen, an welche Sie Ihr Styling anknüpfen wollen, rufen Sie die gewünschte Personio-Karriereseite auf (die entsprechende URL finden Sie unter Einstellungen > Recruiting > Karriereseite). Navigieren Sie über Rechtsklick auf „Untersuchen“ und gelangen Sie so in die Code-Ansicht.

Das folgende Video zeigt Ihnen, wie Sie die Klasse für die Kategorie-Buttons bestimmen können.

careerpage-css-inspect_de.gif

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. Auf diese Weise wird das Element im Fenster mit der HTML-Struktur automatisch markiert und Sie können die passende Klasse nun einfach kopieren. Die Kategorie-Buttons haben die Klasse ".category-btn".

careerpage-css-identifying-selectors-class_de.png

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 Benutzerdefiniertes CSS.

 

Eingabe der Eigenschaft über das Feld Benutzerdefiniertes CSS

Unter Einstellungen > Recruiting > Karriereseite > Design > Benutzerdefiniertes 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 Benutzerdefiniertes 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 Benutzerdefiniertes CSS mit den Beispielen entsprechenden Codes pro Zeile. 

careerpage-custom-css_de.png

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

Wenn Sie das Hintergrundbild Ihrer Kopfzeile ausblenden möchten, wählen Sie einfach die entsprechende Option unter Einstellungen > Recruiting > Karriereseite > Styling > Benutzerdefinierte 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

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 benutzerdefiniertem 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 ein graues Icon (kleine Lupe) in der Suchleiste "Geben Sie das Keyword für die Berufsbezeichnung ein" an. Es ist nicht möglich, dieses zu löschen, jedoch können Sie das Icon einfärben und somit unsichtbar machen oder farbig hervorheben (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 der Bewerber 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 benutzerdefiniertem CSS angepasst werden. Hier im Beispiel wird der Footer türkis gefärbt 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:

careerpage-css-preview_de.gif

 

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 benutzerdefinierte 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

Wie Sie Bilder und Videos in Personio-Karriereseiten einfügen, sehen Sie hier.

 

Sie haben nicht gefunden wonach Sie suchen?

Wir helfen Ihnen gerne weiter! Schreiben Sie uns einfach eine Nachricht mit Ihren Fragen und wir melden uns so bald wie möglich bei Ihnen zurück.

Anfrage einreichen

Kommentare

0 Kommentare

Zu diesem Beitrag können keine Kommentare hinterlassen werden.

    Themen dieses Artikels