Gestaltung der Personio Karriereseite mit CSS

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

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, legen Sie eine Schriftart fest und laden Sie ein Logo hoch. 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: 

Screen_Shot_2018-08-22_at_11.52.05.png

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. 

 

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. das Icon über der Suchleiste) ü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 > URL zu Ihrer Karriereseite). Navigieren Sie über Rechtsklick auf "Untersuchen" und gelangen Sie so in die Code-Ansicht.

Im Folgenden zeigen wir beispielhaft, wie Sie den Selektor für das Aktentaschen-Icon ermitteln.

Screenshot__4_.png

Klicken Sie auf folgendes Symbol links oben in der Code-Ansicht und aktivieren Sie so die Möglichkeit, Elemente im Code auszuwählen. 

Screen_Shot_2018-08-23_at_13.55.01.png 

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. Das Aktentaschen-Icon hat die Klassen ".glyphicon.glyphicon-briefcase". 

Screen_Shot_2018-11-02_at_14.57.49.png

 

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 und 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 (value, hier: #ff0 = gelb).

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:

.glyphicon.glyphicon-briefcase {color:ff0;}

Nach Eingabe dieses Styling-Befehls wird das Aktentaschen-Icon auf der Karriereseite in Gelb dargestellt.

Screenshot__5_.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 in das Backend zu gelangen nutzen Sie das Eingabefeld Benutzerdefiniertes CSS.

 

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 farblichen Markierungen des den Beispielen entsprechenden Codes. 

 

Element: das "Über uns Feld"

Per default erscheint das Feld "Über uns" mit hellgrauem Hintergrund auf Ihrer Karriereseite. Hinterlegen Sie eine andere Farbe sowie z.B. eine Umrandung mit folgendem Code (grüne Markierung im Screenshot): 

.well {background-color:#fff; color:#088A85}
  • Klasse um das Element anzusprechen: .well 
  • Eigenschaft: background-color / color
  • Beispielwerte der Eigenschaft: #fff bestimmt die Hintergrundfarbe des Felds / #088A85 bestimmt die Farbe des Textes in dem Feld 
  • Weitere Farb-Werte zu den Eigenschaften finden Sie auf Internetseiten mit CSS-Tutorials 
.well {border:2px solid #05eefa}
  • Klasse um das Element anzusprechen: .well 
  • Eigenschaft: border
  • Beispielwerte der Eigenschaft: width 2px, style solid, color #05eefa
  • Weitere Werte zu dieser Eigenschaft finden Sie auf Internetseiten mit CSS-Tutorials 

 

Element: Suchleiste

Über das voreingestellte Farbfeld "Hintergrund" bestimmen Sie die Hintergrundfarbe der oberen Suchleiste und des Footers. Via benutzerdefiniertem CSS haben Sie die Möglichkeit, die beiden Elemente einzeln anzusprechen. Hier im Beispiel wird die obere Suchleiste weiß gefärbt (gelbe Markierung im Screenshot): 

.job-finder {background-color:#fff}
  • Klasse um das Element anzusprechen: .job-finder
  • Eigenschaften: background-color
  • Beispielwerte der Eigenschaft: #fff - hier weiß

 

Element: Button "zur Stelle"

Analog dazu haben Sie die Möglichkeit, die Buttons auf Ihrer Karriereseite zu gestalten. Hier im Beispiel, die Gestaltung des Buttons "zur Stelle" (rote und dunkelrote Markierung im Screenshot):  

.btn-view-job {color:#708281; background-color:#05eefa; border:2px solid #d5f0f5}
  • Klasse um das Element anzusprechen: .btn-view-job
  • Eigenschaften: color, background-color, border

Eine Besonderheit der Buttons ist, dass Sie auch bestimmen können, wie diese aussehen sollen, wenn der Bewerber z.B. 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: 

.btn-view-job:hover {color:#05eefa; background-color:#708281; border:2px dotted #d5f0f5}
  • Klasse um das Element anzusprechen: .btn-view-job:hover
  • Syntax: .class-selector:pseudo-class {property:value;}
  • Weitere Informationen zu Pseudo-Klassen finden Sie auf Internetseiten mit CSS-Tutorials 

 

Element: Icons

Per default zeigt Ihre Karriereseite ein Icon (kleine Aktentasche, Beispiel hier) vor "Offene Positionen" und eines (kleine Lupe) vor "Positionen durchsuchen" an. Es ist nicht möglich, diese zu löschen, jedoch können Sie das Icon in der Farbe des Hintergrunds einfärben und somit unsichtbar machen (blaue Markierung im Screenshot). 

.glyphicon.glyphicon-briefcase {color:#fff}
  • Klasse um das Element anzusprechen:.glyphicon.glyphicon-briefcase
  • Eigenschaft: color
  • Beispielwert der Eigenschaft: #fff (weiß) - passend zum Hintergrund um die Aktentasche unsichtbar zu machen

 

Screen_Shot_2018-09-03_at_14.39.10.png

 

Element: Logo zentrieren

Via benutzerdefiniertem CSS haben Sie die Möglichkeit, das Logo Ihrer Personio Karriereseite zu zentrieren. Sprechen Sie die id="header" via Hashtag an: 

#header {width:100%; text-align:center}
  • id um das Element anzusprechen: #header
  • Eigenschaften: width und text:align
  • Beispielwerte der Eigenschaften: 100% und center

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. 

 

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[style], table[style], tbody[style], tr[style], td[style], b[style], strong[style], i[style], em[style], a[href|title|style], ul[style], ol[style], li[style], p[style], br[style], span[style], img[width|height|alt|src|style], iframe[src|width|height|frameborder|style], u[style]

Eigenschaften: 

line-height, font, font-size, font-weight, font-style, font-family, frameborder, text-decoration, padding-left, color, background, background-color, text-align, width, height, display, text-transform, padding, padding-right, padding-top, padding-bottom, margin, margin-left, margin-right, margin-top, margin-bottom, border

Sollte eine Anpassung welche 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. 

 

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: 

Screen_Shot_2018-08-24_at_16.50.07.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.  

Hinweis: Besuchen Sie https://csdemodesiree-jobs.personio.de/, um eine mit CSS gestaltete Karriereseite zu sehen.  

 

War dieser Beitrag hilfreich?

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