Gestaltung der Personio Karriereseite 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. 

Unter Einstellungen > Recruiting > Karriereseite > Design haben Sie die Möglichkeit, Ihre Personio Karriereseite anhand von vorausgewählten Konfigurationsmöglichkeiten an Ihre CI anzupassen. Editieren Sie z.B. Farben von Buttons, Schriften und Hintergründen, definieren Sie eine Schriftart und laden Sie ein Logo hoch.

Weitere Informationen zur Konfiguration Ihrer Personio Karriereseite finden Sie hier

 

Individuelle Anpassungen über CSS

Zusätzlich zu den von uns vorausgewählten Konfigurationsmöglichkeiten können Sie über CSS weitere Anpassungen vornehmen. Navigieren Sie dazu auf Einstellungen > Recruiting > Karriereseite > Design > Benutzerdefiniertes CSS. 

Screen_Shot_2018-08-22_at_11.52.05.png

 

Code-Struktur der Personio Karriereseite 

Die Struktur Ihrer Personio Karriereseite ist in der Programmiersprache HTML abgebildet. Die Gestaltung der einzelnen HTML-Elemente passiert über die Programmiersprache CSS. Die Verknüpfung zwischen HTML und CSS passiert über sogenannte Class-Selectoren, welche in den HTML-Code eingebaut sind und über CSS angesprochen werden können. 

Gestaltet werden kann jedes HTML-Element, welches mit einem Class-Selector versehen ist, so z.B. <div class="container">...</div>, wobei <div></div> das HTML-Element "division" darstellt und class="container" den darin enthaltenen Class-Selector.   

Um die Class-Selectoren anzusprechen, nutzen Sie das im oberen Screenshot abgebildete Eingabefeld Benutzerdefiniertes CSS. 

Weitere Informationen zu HTML und CSS als solches finden Sie z.B. hier in einem der zahlreichen Tutorials. 

 

Identifizieren des Class-Selectors

Um zu prüfen, welche Elemente genau mit einem Class-Selector versehen sind, rufen Sie Ihre Personio Karriereseite unter https://meinaccount-jobs.personio.de/ auf. Navigieren Sie über Rechtsklick auf "Untersuchen" und gelangen Sie so in die Code-Ansicht. 

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 

Sehen Sie in nachfolgendem Ausschnitt unter anderem den Class-Selector "container". 

Screen_Shot_2018-09-03_at_13.58.52.png

Sehen Sie im unteren Teil des Ausschnitts, wie Sie über den Class-Selector "container" an das HTML-Element anknüpfen können. Eine entsprechende Syntax hat immer den folgenden Aufbau: 

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

 

Übertrag in das Eingabefeld Benutzerdefiniertes CSS

Kopieren Sie nun den Code-Ausschnitt aus der Code-Ansicht und fügen ihn unter Einstellungen > Recruiting > Karriereseite > Design > Benutzerdefiniertes CSS ein. 

Sie knüpfen 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. margin-right) verändert werden soll und wie genau (value, hier: auto).

Screen_Shot_2018-09-03_at_14.31.16.png

Löschen Sie die hier gelb markierten Eigenschaften und Werte heraus, sodass nur noch das Gerüst der Klassen-Identifizierung bleibt. Fügen Sie nun für Sie relevante Eigenschaften und Werte hinzu, um Ihre Karriereseite individuell zu gestalten. 

Hinweis: Ein Überschreiben/Hinzufügen von Eigenschaften und Werten direkt in der Code-Ansicht (vorheriger Screenshot) 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 (aktueller Screenshot). 

 

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" (grüne Markierung im Screenshot) 

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: 

Code: .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: Hier

Code: .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: Hier

 

Element: Suchleiste (gelbe Markierung im Screenshot)

Ü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: 

Code: .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" (rote und dunkelrote Markierung im Screenshot) 

Analog dazu haben Sie die Möglichkeit, die Buttons auf Ihrer Karriereseite zu gestalten. Hier im Beispiel, die Gestaltung des Buttons "zur Stelle":  

Code: .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: 

Code: .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: Hier

 

Element: Icon (blaue Markierung im Screenshot) 

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. 

Code: .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

 

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. 

 

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.  

 

Haben Sie Fragen? Anfrage einreichen

0 Kommentare

Zu diesem Beitrag können keine Kommentare hinterlassen werden.