Personio-Karriereseite: Gestaltung mit CSS

 

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

Cascading Style Sheets, kurz CSS genannt, ist eine Programmiersprache und eine der Kernsprachen des World Wide Webs. Mit CSS werden Gestaltungsanweisungen für Webseiten erstellt, die vor allem zusammen mit der Auszeichnungssprache HTML eingesetzt werden.

 

Individuelle Anpassungen über CSS

Unter Einstellungen > Recruiting > Karriereseite > Design haben Sie die Möglichkeit, Ihre Personio Karriereseite anhand von vordefinierten Konfigurationsmöglichkeiten an Ihre CI anzupassen. Editieren Sie z. B. Farben von Buttons, Schriften und Hintergründen oder legen Sie eine Schriftart fest. Weitere Informationen zur Konfiguration Ihrer Personio Karriereseite finden Sie hier.

Sollten Sie Ihre Personio Karriereseite noch individueller gestalten wollen, bietet Ihnen Personio die Möglichkeit der Nutzung von CSS. Navigieren Sie dazu auf Einstellungen > Recruiting > Karriereseite > Design > Benutzerdefiniertes CSS. Sehen Sie nachfolgend einen Ausschnitt, welcher das Eingabefeld Benutzerdefiniertes CSS mit entsprechenden Inhalten zeigt:

careerpage-custom-css_de.png

 

Klassen, Selektoren und CSS-Eigenschaften

Die Struktur Ihrer Personio Karriereseite 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 Ihrer Personio Karriereseite betrachten Sie das oben genannte Eingabefeld Benutzerdefiniertes CSS als Stylesheet.

Um ein spezifisches Element Ihrer 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 der 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 Ihre 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.

Im Folgenden zeigen wir beispielhaft, wie Sie die Klasse für die Kategorie-Buttons ermitteln.

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 knüpfen Sie an die entsprechende Klasse über den Klassennamen einen "." davor an. In geschwungenen Klammern benennen Sie, welche Eigenschaft des HTML-Elements (property, hier z. B. color) verändert werden soll und wie genau (zum Beispiel 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-Sanitizer

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 ist nicht umgesetzt. Dies liegt am CSS-Code-Sanitizer, einer Sicherheitsvorkehrung der Personio Karriereseite, die alle nicht unterstützten HTML- und CSS-Codeelemente entfernt – und so das Codefeld bereinigt. 

Zur Sicherheit der Karriereseite trägt der CSS-Code-Sanitizer bei, indem er checkt, ob das Eingabefeld bösartige Daten enthält, die Schaden anrichten könnten, und diese ebenso 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).

 

Konkrete Ideen zur Gestaltung Ihrer Karriereseite

Finden Sie nachfolgend einige Ideen zur Gestaltung Ihrer Karriereseite. Der beigefügte Screenshot zeigt das Eingabefeld Benutzerdefiniertes CSS mit den Beispielen entsprechenden Codes pro Zeile. 

careerpage-css-example_de.png

Natürlich bietet Ihre Personio Karriereseite noch weitere Möglichkeiten zur Gestaltung über CSS. Grenzen liegen in der Änderung der Logik bzw. des Aufbaus der Seite.

  

Element: Header-Hintergrundbild

Per CSS-Styling können Sie den Graufilter entfernen, der auf dem unter Karriereseite > Layout 2.0 > Header-Hintergrundbild hinterlegten Bild systemseitig angewendet wird.

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

 

Element: Hintergrundfarbe

Sie können per CSS-Styling die gesamte Hintergrundfarbe  der Personio Karriereseite nach Ihren 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, unterschiedliche Hintergrundfarben für Karriereseite und die Stellenausschreibungen zu hinterlegen.

  

Element: Überschrift

Die Headline, die mittig auf dem Headerbild Ihrer Personio-Karriereseite erscheint, kann unter dem Punkt Überschriften 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 erscheint standardmäßig mit einem weißen Hintergrund und grauer Schrift in Ihrer Personio Karriereseite. 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 Ihrer Karriereseite zu gestalten. Hier im Beispiel, die Gestaltung des Buttons "Suchen" in der Suchleiste (Zeile 4 im Screenshot) :

.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: Stellenanzeigen-Box

Die einzelnen Stellenausschreibungen werden per default in Boxen mit weißem Hintergrund aufgelistet. Diese können Sie jedoch auch farblich 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 Link zur Stellenanzeige, dargestellt durch den Pfeil > farblich 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 vor Veröffentlichung überprü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

 

Bilder einfügen

Sehen Sie in nachfolgender Tabelle, mit welchem Code Sie Bilder und Links sowohl in den Bereich Über uns als auch direkt in den Stellenanzeigen in die Eingabefelder der Stellenbeschreibungsattribute einfügen können.

Wechseln Sie dafür in die Code-Ansicht, klicken sie dazu in den Formatierungseinstellungen des Textfelds auf das A (Mehr Text) und das <>-Symbol: 

css-code-view_de.png

 

Finden Sie hier Codebeispiele, die Sie kopieren und über die Code-Ansicht einfügen können:

Code Beschreibung
<a href="URL">Benennung des Links zu Ihrer URL</a>

Fügen Sie eine von Ihnen benannte URL in das Attribut href (hypertext reference) ein und benennen Sie den Link Ihren Vorstellungen entsprechend.

<img src="öffentlich zugängliche URL zu Ihrem Bild" alt="Beschreibung Ihres Bildes"> Fügen Sie über das Attribut src (source) ein Bild ein, welches hinter einer öffentlich zugänglichen URL liegt. Der für das Attribut alt (alternative) hinterlegte Text wird angezeigt, falls Ihr Bild nicht abgerufen werden kann.

width="100"

z.B. <img src="öffentlich zugängliche URL zu Ihrem Bild" alt="Bedeutung Ihres Bildes" width="100">

Bestimmen Sie die Größe Ihres Logos/Bildes. Ändern Sie die Weite, wird die Höhe Ihres Logos automatisch angepasst. Um Ihr Logo ausgehend von der Höhe anzupassen, verwenden Sie das Attribut height. Von Personio akzeptierte Einheiten sind px, em und %. Finden Sie hier mehr Informationen zu den Einheiten der Attribute width und height.

 

Wie Sie Videos in Ihre Karriereseite 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