Dieser Artikel beschreibt, wie Sie Ihre Personio Karriereseite mit CSS individuell anpassen können. Wenn Sie Ihre Personio Karriereseite einrichten, müssen Sie sie an Ihr Corporate Design anpassen. Mit CSS haben Sie mehr Anpassungsmöglichkeiten.

CSS steht für Cascading Style Sheets (Kaskadierende Stylesheets). Es wird zum Erstellen von Gestaltungsanweisungen für Webseiten, meistens zusammen mit der Auszeichnungssprache HTML.

Bitte beachten Sie, dass wir keinen individuellen Support für CSS-Code anbieten können. Die Informationen und Beispiele in diesem Artikel dienen lediglich der Orientierung.

Bevor Sie beginnen

• Um die Personio Karriereseite anzupassen, benötigen Sie Berechtigungen für die Recruiting App und deren Einstellungen.
• Sie sollten bereits Erfahrung mit CSS haben. Alternativ können Sie ein Mitglied Ihres IT-Teams um Unterstützung bitten.
• Beachten Sie, dass Sie mit CSS weder die Logik noch die Seitenstruktur Ihrer Personio Karriereseite ändern können.

Auf das Eingabefeld für „Individuelles CSS“ (Stylesheet) zugreifen

Um Ihre Personio Karriereseite mit CSS zu gestalten, verwenden Sie ein integriertes Stylesheet. So können Sie darauf zugreifen:

1. Gehen Sie zu Einstellungen > Recruiting > Karriereseite.
2. Scrollen Sie nach unten zu Design. 
3. Unter Individuelles CSS sehen Sie ein Eingabefeld. Das ist Ihr Stylesheet.

Design eines bestimmten Elements anpassen

Um ein bestimmtes Element Ihrer Personio Karriereseite anzupassen (z. B. die Kategorie-Buttons), müssen Sie es mit einem Selektor mit Ihrem CSS-Code verknüpfen. Selektoren teilen dem CSS mit, welche HTML-Elemente formatiert werden sollen. Sie können Selektoren verwenden, um das Design für mehrere Elemente zu ändern. Beim Anwenden von CSS auf Ihre Personio Karriereseite verwenden Sie hauptsächlich Klassenselektoren.

Sie verwenden Eigenschaften, um ein bestimmtes Design anzuwenden und z. B. die Farbe oder Ausrichtung eines Texts zu ändern.
 

Zulässige Selektoren und Eigenschaften prüfen

Aus Sicherheitsgründen können Sie nur bestimmte HTML-Elemente anpassen. Bitte beachten Sie die nachstehende Liste der zulässigen Elemente.

• 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, color, background, background-color, text-align, text-transform, text-decoration, width, height, padding-left, padding-right, padding-top, padding-bottom, margin-left, margin-right, margin-top, margin-bottom, border, border-radius

Wenn Sie nicht zulässigen Code hinzufügen, funktioniert er nicht. Wenn Sie Ihre Änderungen speichern, entfernt Personio automatisch jeglichen nicht unterstützten Code aus dem Eingabefeld Individuelles CSS.

Das geschieht aufgrund einer eingebauten Sicherheitsfunktion namens CSS-Code-Korrektur. Sie überprüft Ihren CSS-Code, kennzeichnet alles Unerwartete oder falsch Formatierte und entfernt alles, was Sicherheitsprobleme verursachen könnte. Außerdem sorgt sie für mehr Übersichtlichkeit im Code, indem sie ähnliche Eigenschaften zusammen gruppiert. 

Selektoren finden

Gehen Sie folgendermaßen vor, um Selektoren zu finden:

1. Öffnen Sie Ihre Personio-Karriereseite. Die URL finden Sie in den Einstellungen unter Recruiting > Karriereseite.
2. Navigieren Sie über Rechtsklick auf „Untersuchen“, um die Code-Ansicht aufzurufen.
3. Klicken Sie auf das Symbol links oben in der Code-Ansicht und aktivieren Sie so die Möglichkeit, Elemente im Code auszuwählen.
4. Klicken Sie auf das Element, das Sie stylen möchten. Dadurch wird das Element in der HTML-Ansicht automatisch hervorgehoben. Anschließend können Sie die gewünschte Klasse kopieren. Die Kategorie-Buttons gehören beispielsweise zur Klasse „.category-btn“.

Änderungen, die Sie direkt in der Codeansicht vornehmen, sind vorübergehend und nur für Sie sichtbar. Um dauerhafte Änderungen vorzunehmen, verwenden Sie das Eingabefeld Individuelles CSS (nächster Schritt).

Eigenschaften ins Eingabefeld „Individuelles CSS“ eingeben

Geben Sie im Eingabefeld Individuelles CSS einen Punkt gefolgt vom Klassennamen ein. Verwenden Sie geschweifte Klammern, um Folgendes zu anzugeben: 

• Die Eigenschaft des HTML-Elements, die Sie ändern möchten (z. B. die Farbe) und 
• Den Wert, der ihm zugewiesen werden soll (zum Beispiel #ffffff = weiß)

Somit besteht ein CSS-Befehl mit Klassenselektor standardmäßig aus den folgenden Komponenten:

.class-name {property:value; property:value; property:value;}

Beispiel: CSS-Code für einen türkisfarbenen Kategorie-Button mit weißem Text

.category-btn {color: #ffffff; background-color: #23b6dd}

Sie können den Vorschau-Button verwenden, um Ihre Änderungen zu überprüfen.
 

Beispiele

Element: Header-Hintergrundbild

Sie können CSS verwenden, um den auf das Header-Hintergrundbild angewendeten Graufilter zu entfernen. Sie finden dies unter Karriereseite > Design > Header-Hintergrundbild.

• Klasse, um das Element anzusprechen: .background-image-wrapper
• Eigenschaft: background-image: none

.background-image-wrapper {background-image: none;}

Element: Hintergrundfarbe

Sie können CSS verwenden, um die Hintergrundfarbe einer Personio Karriereseite an Ihre Unternehmensfarben anzupassen. 

• Klasse, um das Element anzusprechen: .body-container, .footer, .background-image-wrapper
• Eigenschaften: background-color
• Wert für die Eigenschaft

Im folgenden Code-Beispiel ist die Karriereseite in hellblau gefärbt: 

.body-container, .footer, .background-image-wrapper
{background-color: #d5f0f7}

Beachten Sie, dass Sie die Karriereseite und die Stellenanzeigen nicht mit unterschiedlichen Hintergrundfarben hinterlegen können.

Element: Überschrift

Die Überschrift erscheint in der Mitte des Headerbildes. Sie können CSS verwenden, um sie über die im Bearbeitungsfeld enthaltenen Standardeinstellungen hinaus anzupassen.

• Klasse, um das Element anzusprechen: .recruiting-phrase
• Eigenschaften: color, font-size
• Werte für die Eigenschaften

Im folgenden Code-Beispiel hat die Überschrift einen hellblauen Hintergrund und die Schriftgröße 40px.

.recruiting-phrase {color: #d5f0f7; font-size: 40px}

Element: Suchleiste

Standardmäßig enthält die Suchleiste der Personio Karriereseite graue Schrift auf weißem Hintergrund. Sie können dieses Element über individuelles CSS anpassen.

• Klasse, um das Element anzusprechen: .search-bar-wrapper
• Eigenschaften: background-color
• Wert für die Eigenschaft: #d5f0f7 – hier hellblau

Im folgenden Code-Beispiel ist die Suchleiste hellblau.

.search-bar-wrapper {background-color: #d5f0f7}

Element: Button „Suchen“

Sie können das Design der Buttons auf Ihrer Karriereseite anpassen. Das folgende Beispiel zeigt ein Design des Buttons „Suchen“ in der Suchleiste.

• Klasse, um das Element anzusprechen: .career-btn-primary
• Eigenschaften: color, background-color

.career-btn-primary { background-color:#FF0; color:#242424 }

Element: Stellenfeld

Standardmäßig werden auf der Karriereseite alle Stellen in einem Feld mit weißem Hintergrund angezeigt. Sie können diese Hintergrundfarbe anpassen.

• Klasse, um das Element anzusprechen: .job-box
• Eigenschaften: background-color

.job-box {background-color: #d5f0f7}

Sie können auch den Pfeil anpassen, der zur Stelle führt.

• Klasse, um das Element anzusprechen: .jb-link
• Eigenschaften: color

.jb-link {color: #23b6dd}

Element: Fußzeile

Sie können die Fußzeile der Karriereseite mithilfe von CSS anpassen. Sie können auch die Links in der Fußzeile anpassen.

• Klasse, um das Element anzusprechen: .footer, .footer a, .footer-links
• Eigenschaften: background-color, font-size, color
• Werte für Eigenschaften

Im folgenden Code-Beispiel ist die Farbe der Fußzeile auf Türkis eingestellt. Die Schriftgröße des Standardtextes Powered by Personio wurde ebenfalls auf 12px reduziert. 

.footer {background-color: #23b6dd; font-size: 12px;}
.footer a {color: #d5f0f7}