Ein Karriereportal mit benutzerdefiniertem CSS gestalten

Fügen Sie einem Karriereportal Ihr eigenes CSS hinzu, damit es zu den Schriften und Farben Ihrer Marke passt. Das CSS gilt für alle Seiten des Portals, einschließlich der Stellenseiten und des Bewerbungsformulars. Das ist hilfreich, wenn Sie Ihre eigene Karriereseite betreiben und Kandidaten nur auf das flair Bewerbungsformular verlinken.

Wer kann diese Funktion verwenden?

HR-Admins und Salesforce-Admins mit Zugriff auf den Karriereportal-Datensatz in Salesforce. Kandidaten sehen das gestaltete Karriereportal.

Bevor Sie beginnen

• Sie haben Zugriff auf den Karriereportal-Datensatz des Portals in Salesforce.
• Sie legen Ihre Markenfarbe in Primärfarbe und die Form Ihrer Buttons in Eckenradius des Buttons fest. Buttons und Akzente verwenden diese Einstellungen, nicht Ihr CSS.
• Jemand in Ihrem Team kann CSS schreiben, oder Sie beginnen mit einem der Beispiel-Themes.

Fügen Sie einem Karriereportal benutzerdefiniertes CSS hinzu

1. Öffnen Sie in Einstellungen Karriereportal den Tab Details des Portals.
2. Scrollen Sie zu Benutzerdefiniertes CSS. Das Feld folgt auf Erlaubte IP-Bereiche.
3. Fügen Sie Ihr CSS in Benutzerdefiniertes CSS ein.
4. Klicken Sie auf Speichern. flair wendet das CSS auf alle Seiten des Portals an.
5. Laden Sie das Karriereportal neu, um das Ergebnis zu prüfen.

Da das Portal zwischengespeichert wird, kann es bis zu einigen Minuten dauern, bis Änderungen sichtbar sind.

Um eine Webschrift wie eine Google Font zu laden, verwenden Sie @import. Die @import-Zeile muss die erste Zeile Ihres CSS sein:

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

Entfernen Sie benutzerdefiniertes CSS

• Um zum Standard-Aussehen zurückzukehren, leeren Sie Benutzerdefiniertes CSS und klicken Sie auf Speichern.

Ändern Sie Schriften und Farben mit Variablen

Variablen sind der einfachste Weg, das Portal neu zu gestalten. Setzen Sie sie auf :root. Sie brauchen kein !important.

Variable	Was sie ändert	Standard
--cp-font-family	Fließtext, Formulareingaben und Buttons	Systemschrift
--cp-heading-font-family	Überschriften, z. B. den Stellentitel	Wie --cp-font-family
--cp-color-text	Haupttextfarbe, einschließlich des Stellentitels. Sekundäre graue Texte, z. B. die Beschriftungen über den Stellendetails und Für diesen Job bewerben, behalten ihre Farbe. Verwenden Sie dafür Hooks.	Schwarz
--cp-color-background	Seitenhintergrund	Weiß
--cp-input-background	Hintergrund von Eingabefeldern, Dropdowns und Dateiauswahlen	Weiß
--cp-input-border-color	Rahmen von Eingabefeldern, Dropdowns und Dateiauswahlen	Hellgrau
--cp-input-radius	Eckenradius von Eingabefeldern, Dropdowns und Dateiauswahlen	0.25rem (4px)

Verwenden Sie die schreibgeschützten Variablen

Diese Variablen werden aus den Einstellungen des Portals befüllt. Verwenden Sie sie in Ihren eigenen Regeln, zum Beispiel color: var(--cp-color-primary);:

Variable	Wert
--cp-color-primary	Die Einstellung Primärfarbe
--cp-button-radius	Die Einstellung Eckenradius des Buttons

Wenn Sie diese Variablen in Ihrem CSS ändern, ändern sich Farbe und Form der Buttons nicht. Um die Button-Farbe zu ändern, passen Sie Primärfarbe an. Ihr CSS kann die Hintergrundfarbe der Buttons nicht überschreiben.

Gestalten Sie bestimmte Elemente mit Hooks

Hooks markieren die Bereiche des Portals, die Sie gezielt ansprechen können. Wählen Sie sie mit Attributselektoren aus, zum Beispiel [data-cp="form-label"] { font-weight: 700; }:

Hook	Element
header	Obere Leiste mit dem Logo und dem Button zur Unternehmenswebsite
footer	Fußzeile „Wir stellen ein mit flair“
position-list	Liste der offenen Stellen
position-card	Eine Stelle in der Liste
job-title	Stellentitel auf der Stellenseite
job-meta	Zeile mit Standort, Beschäftigungsart und Bewerbungsfrist unter dem Stellentitel
job-description	Spalte mit der Stellenbeschreibung
apply-form	Das Bewerbungsformular, einschließlich des zweiten Fragebogen-Schritts
form-title	Überschrift Für diesen Job bewerben
form-section	Eine Gruppe von Feldern
form-section-title	Die Überschrift einer Feldgruppe, z. B. Personal information
form-field	Ein Feld: Beschriftung, Eingabe, Hinweis und Fehlermeldung
form-label	Die Beschriftung eines Felds
button	Buttons

Um nur den Absende-Button des Bewerbungsformulars anzusprechen, verwenden Sie [data-cp="apply-form"] [data-cp="button"][type="submit"].

Beginnen Sie mit einem Beispiel-Theme

Kopieren Sie ein Beispiel in Benutzerdefiniertes CSS und passen Sie die Werte an Ihre Marke an. So sieht das Bewerbungsformular im Standard-Aussehen aus:

Übernehmen Sie Schriften und Farben Ihrer Marke

Verwenden Sie dieses Beispiel, wenn Sie nur die Schriften und Farben Ihrer Marke brauchen. Es verwendet ausschließlich Variablen.

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap');

:root {
  --cp-font-family: 'Source Sans 3', Arial, sans-serif;
  --cp-heading-font-family: 'Playfair Display', Georgia, serif;
  --cp-color-text: #1f3a2e;
  --cp-color-background: #f4efe6;
  --cp-input-background: #fffdf8;
  --cp-input-border-color: #1f3a2e;
  --cp-input-radius: 0;
}

Was die einzelnen Teile bewirken:

• @import lädt die Schriften Playfair Display und Source Sans 3 von Google Fonts. Es steht in der ersten Zeile.
• --cp-font-family setzt Source Sans 3 für Fließtext, Eingabefelder und Buttons, mit Arial als Ausweichschrift.
• --cp-heading-font-family setzt Playfair Display für Überschriften wie den Stellentitel.
• --cp-color-text setzt ein dunkles Grün für den Haupttext.
• --cp-color-background setzt einen warmen beigen Seitenhintergrund.
• --cp-input-background und --cp-input-border-color geben Eingabefeldern eine cremeweiße Füllung und einen dunkelgrünen Rahmen.
• --cp-input-radius: 0 gibt Eingabefeldern eckige Ecken.

Gestalten Sie das Formular weich und abgerundet

Verwenden Sie dieses Beispiel für einen freundlicheren Look mit abgerundeten Eingabefeldern und Buttons. Es kombiniert Variablen und Hooks.

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

:root {
  --cp-font-family: 'Nunito', Arial, sans-serif;
  --cp-color-background: #f5f7fb;
  --cp-input-border-color: #d5dbe7;
  --cp-input-radius: 12px;
}

[data-cp="form-label"] {
  font-weight: 700;
}

[data-cp="button"] {
  border-radius: 999px;
}

Was die einzelnen Teile bewirken:

• @import lädt die Schrift Nunito von Google Fonts.
• --cp-font-family setzt Nunito für Fließtext, Eingabefelder und Buttons.
• --cp-color-background setzt einen hellen blaugrauen Seitenhintergrund.
• --cp-input-border-color setzt einen sanften graublauen Rahmen für Eingabefelder.
• --cp-input-radius: 12px rundet die Ecken von Eingabefeldern, Dropdowns und Dateiauswahlen ab.
• Die Regel für form-label stellt Feldbeschriftungen fett dar.
• Die Regel für button macht Buttons pillenförmig.

Setzen Sie Akzente in Ihrer Primärfarbe

Verwenden Sie dieses Beispiel, um Ihre Markenfarbe auf der Seite zu wiederholen, ohne die Schriften zu ändern. Es kombiniert Hooks mit der schreibgeschützten Variable --cp-color-primary.

[data-cp="header"] {
  border-bottom: 4px solid var(--cp-color-primary);
}

[data-cp="job-title"] {
  color: var(--cp-color-primary);
}

[data-cp="form-section-title"] {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  border-bottom: 2px solid var(--cp-color-primary);
  padding-bottom: 4px;
}

Was die einzelnen Teile bewirken:

• Die Regel für header fügt unter der oberen Leiste eine Linie in Ihrer Primärfarbe hinzu.
• Die Regel für job-title färbt den Stellentitel in Ihrer Primärfarbe.
• Die Regel für form-section-title macht Gruppenüberschriften wie Personal information zu kleinen Großbuchstaben-Beschriftungen mit größerem Buchstabenabstand und einer Unterstreichung in Ihrer Primärfarbe.

Da jede Farbe aus var(--cp-color-primary) stammt, folgen die Akzente der Einstellung Primärfarbe, wenn Sie sie ändern.

Halten Sie Ihr CSS nach Updates funktionsfähig

Nur die Variablen und Hooks aus dieser Anleitung werden unterstützt. Wir halten sie stabil und kündigen Änderungen an. Beachten Sie diese Einschränkungen:

• Andere Selektoren, z. B. die Klassennamen von flair oder die Elementstruktur, sind intern und können sich ohne Ankündigung ändern. CSS, das darauf aufbaut, kann nach einem Update nicht mehr funktionieren.
• CSS ändert nur die Gestaltung. Es kann keine Texte und nicht die Layout-Struktur des Portals ändern.
• Jedes Karriereportal hat ein Feld Benutzerdefiniertes CSS. Um mehrere Portale zu gestalten, fügen Sie das CSS jedem Portal hinzu.

Verwandte Artikel

• Ein Career Portal erstellen und verwalten
• Erweiterte Career-Portal-Einstellungen konfigurieren
• Ein Karriereportal auf freigegebene Netzwerke beschränken