Cet article vous explique comment personnaliser votre page carrière Personio à l’aide du langage CSS.

Conseil :
les feuilles de style en cascade (CSS) sont l’un des principaux langages de programmation du Web. Elles vous permettent de mettre en forme des pages Web en utilisant principalement le langage de balisage HTML.

Personnalisez votre page carrière Personio à l’aide du langage CSS

La structure de votre page carrière Personio est basée sur HTML. La mise en forme des différents éléments HTML est définie à l’aide du langage CSS. En général, le code CSS est stocké dans une feuille de style distincte liée au code HTML correspondant à l’aide des métadonnées du site Web. Lors de la mise en forme de votre page carrière Personio, le champde saisie CSS personnalisé constitue votre feuille de style.

Le champ de saisie CSS personnalisé

Pour personnaliser votre page carrière Personio en fonction du design de votre entreprise, procédez comme suit :

Dans les paramètres, accédez à Recrutement > Page Carrière.
Faites défiler la page vers le bas jusqu’à CSS personnalisé dans la section Apparence.

L’image suivante vous montre le champ de saisie CSS personnalisé avec un exemple de contenu :

Personnaliser la mise en forme d’un élément spécifique

Pour personnaliser la mise en forme d’un élément spécifique de votre page carrière Personio (comme les boutons de catégorie) à l’aide du langage CSS, vous devez créer un lien unique entre la feuille de style et l’élément HTML correspondant. Ce lien est établi avec les sélecteurs.

Vous définissez les éléments HTML que vous souhaitez mettre en forme en incluant les critères de sélection pertinents dans votre feuille de style. Il existe différents types de sélecteurs : lorsque vous appliquez le style CSS sur votre page carrière Personio, vous utiliserez le plus souvent des sélecteurs de classe.

Remarque :
pour des raisons de sécurité, vous ne pourrez pas personnaliser tous les éléments HTML à l’aide du champ de saisie CSS personnalisé. Une liste détaillée de tous les éléments vous est présentée à la fin de cet article sous la rubrique Options de mise en forme et liens autorisés.

Trouver des sélecteurs

Pour trouver les sélecteurs correspondants, procédez comme suit :

Ouvrez votre page carrière Personio. Vous trouverez l’URL dans les paramètres via Recrutement > Page Carrière.
Faites un clic droit sur la page, puis sélectionnez Inspecter pour ouvrir le panneau du code.
Cliquez sur le symbole dans le coin supérieur gauche du panneau du code pour activer la sélection des éléments de code.
Cliquez sur l’élément que vous souhaitez mettre en forme. L'élément est automatiquement mis en surbrillance dans la fenêtre de la structure HTML. Vous pouvez ensuite copier la classe requise. Par exemple, les boutons de catégorie appartiennent à la classe ".category-btn".

Remarque
Le fait de remplacer ou d’ajouter des propriétés et des valeurs directement dans le panneau du code modifie uniquement l’affichage dans le front-end. Ces modifications ne sont pas permanentes et vous seul pouvez les voir. Pour modifier définitivement la mise en forme du back-end, vous devez utiliser le champ de saisie CSS personnalisé.

Saisir des propriétés dans le champ CSS personnalisé

Dans les paramètres, accédez à Recrutement > Page Carrière. Faites défiler l’écran vers le bas jusqu’à Apparence > CSS personnalisé pour sélectionner la classe appropriée en utilisant le nom de la classe précédé d’un jour. Indiquez la propriété de l’élément HTML que vous souhaitez modifier (par exemple, la couleur) et la valeur à lui attribuer (par exemple, #ffffff = blanc) entre crochets.

Une commande CSS avec un sélecteur de classe inclut donc par défaut les éléments suivants :

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

Le code CSS pour l’exemple présenté ci-dessus serait donc le suivant :

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

Une fois que vous avez saisi cette commande de mise en forme, le bouton de catégorie de la page carrière sera affiché en turquoise avec le texte en blanc.

Conseils pour mettre en forme votre page carrière

Vous trouverez ci-dessous des suggestions pour le design de votre page carrière. L’image ci-dessous vous présente le champ de saisie CSS personnalisé avec des exemples de code pour chaque ligne.

Exemple de code

Vous pouvez personnaliser davantage votre page carrière Personio à l’aide du langage CSS. Toutefois, les options de personnalisation n’incluent pas les modifications apportées à la logique ou à la structure de la page.

Élément : arrière-plan de l’en-tête

Utilisez la mise en forme CSS pour supprimer le filtre gris appliqué à l’image stockée sous Page carrière > Apparence > Arrière-plan de l’en-tête.

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

Classe pour l’élément : .background-image-wrapper
Propriété : background-image : aucune

Conseil
Si vous souhaitez masquer l’arrière-plan de votre en-tête, sélectionnez l’option correspondante dans Page carrière > Apparence > Mise en page. Cette fonction est utile pour intégrer votre page carrière Personio via iframe dans la page carrière de votre entreprise.

Élément : couleur d’arrière-plan

Vous pouvez utiliser la mise en forme CSS pour modifier la couleur d’arrière-plan de votre page carrière Personio afin de l’adapter aux couleurs de votre entreprise. Dans cet exemple de code, la page carrière a un arrière-plan bleu clair :

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

Classe pour modifier l’élément : .body-container, .footer, .background-image-wrapper.container-fluid
Propriété : couleur d’arrière-plan
Exemple de valeur pour la propriété : #d5f0f7 – bleu clair

Remarque :
vous ne pouvez pas créer des arrière-plans de couleur différente pour la page carrière et les postes.

Élément : titre

Le titre, qui apparaît au centre de l’image d’en-tête d’une page carrière Personio, peut être mis en forme dans la section Titres. Si vous souhaitez le personnaliser au-delà du champ de modification par défaut, vous pouvez utiliser le langage CSS pour apporter d’autres modifications de mise en forme, par exemple (ligne 1de l’image) :

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

Classe pour sélectionner l’élément : .recruiting-phrase
Propriétés : couleur, taille de la police
Exemple de valeur pour la propriété : #d5f0f7 – bleu clair, 40px

Élément : barre de recherche

Par défaut, la barre de recherche d’une page carrière Personio est grise sur fond blanc. Vous pouvez utiliser le langage CSS pour personnaliser cet élément. Dans l’exemple présenté, la barre de recherche supérieure est bleu ciel (ligne 2de l’image) :

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

Classe pour sélectionner l’élément : .search-bar-wrapper, #search-job
Propriété : couleur d’arrière-plan
Exemple de valeur pour la propriété : #d5f0f7 – bleu clair

Élément : icônes

Par défaut, une icône grise (une petite loupe) s’affiche dans la barre de recherche Saisir un mot-clé pour l’intitulé du poste de votre page carrière. Vous ne pouvez pas supprimer cette icône, mais vous pouvez en modifier la couleur afin de la masquer ou de la mettre enavant (ligne 3 de l’image).

.fas.fa-search {color:#fff}

Classe pour sélectionner l’élément : .fas.fa-search
Propriété : couleur
Exemple de valeur pour la propriété : #fff – blanc

Élément : bouton Rechercher

Vous pouvez également modifier le style des boutons de votre page carrière. Par exemple, pour modifier le style du bouton de recherche de la barre de recherche (ligne 4 de l’image) :

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

Classe pour sélectionner l’élément : career-btn-primary
Propriétés : couleur, couleur d’arrière-plan

Vous pouvez en outre définir la manière dont les boutons apparaissent lorsqu’un candidat passe la souris dessus. Pour cela, utilisez les pseudo-classes pour redéfinir les propriétés du bouton. Les pseudo-classes sont signalées par deux points suivis d’un élément tel que le mot « hover » après la classe actuelle (ligne 5 de l’image) :

.career-btn-primary:hover {color:#05eefa; background-color:#708281; 
border:2px dotted #d5f0f5}

Classe pour sélectionner l’élément : .career-btn-primary:hover
Syntaxe : .class-selector:pseudo-class {property:value;}
Pour plus d’informations sur les pseudo-classes, veuillez consulter les tutoriels CSS disponibles en ligne

Élément : case Offres d’emploi

Par défaut, les postes sont répertoriés dans des cases avec un arrière-plan blanc. mais vous pouvez modifier cette couleur (ligne 6 de l’image) :

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

Classe pour sélectionner l’élément : .job-box
Propriété : couleur d’arrière-plan

Vous pouvez également personnaliser la flèche > qui redirige le candidat vers l’offre d’emploi (ligne 7 de l’image) :

 .jb-link {color: #23b6dd}

Classe pour sélectionner l’élément : .jb-link
Propriétés : couleur

Élément : pied de page

Vous pouvez également personnaliser le pied de page à l’aide du langage CSS. Dans cet exemple, la couleur du pied de page est définie en turquoise et la taille de la police du texte par défaut Powered by Personio a été réduite. Vous pouvez également personnaliser les liens du pied depage (ligne 8 de l’image) :

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

Classe pour sélectionner l’élément : .footer, .footer a (liens)
Propriétés : couleur d’arrière-plan, taille de la police, couleur
Exemple de valeur pour la propriété : #23b6dd – turquoise, 12px

Vérifiez les modifications que vous apportez à la mise en forme en cliquant sur le bouton Aperçu. Par exemple, les modifications CSS présentées ci-dessus ressemblent à ceci :

Options de mise en forme et liens autorisés

La section suivante contient une vue d’ensemble de tous les tags HTML qui peuvent être utilisés comme sélecteurs et de toutes les propriétés CSS que vous pouvez modifier à l’aide de la fonction CSS personnalisé.

Sélecteurs

h1/h2/h3/h4/div, b, strong, i, em, a, ul, ol, li, p, br, span

Propriétés

Ligne-height, police, police-size, police-weight, style-police, famille de la police, text-decoration, padding-left, couleur, arrière-plan, couleur d’arrière-plan, background-image, text-align, width, height, text-transform, padding, padding-right, padding-top, padding-bottom, Planning, uniquement, frame-right, frame-root

Pour découvrir comment insérer des images et des vidéos dans des pages carrière Personio, cliquez ici.

Fonction Code Sanitizer

Si vous souhaitez apporter une modification qui n'est pas autorisée, vous pouvez la saisir dans le champ CSS personnalisé. Toutefois, votre saisie sera supprimée après l’enregistrement et ne sera pas prise en compte. Ceci est dû à la fonction de sécurité Code Sanitizer des pages carrière Personio, qui supprime tous les éléments HTML et CSS non pris en charge afin de nettoyer le champ du code.

La fonction Code Sanitizer améliore la sécurité de la page carrière en analysant le champ de saisie afin de détecter et de supprimer les données malveillantes susceptibles de causer des problèmes.

L’outil simplifie également le code et regroupe les propriétés similaires (par exemple, padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; padding: 5px 10px 10px).

Comment pouvons-nous vous aider ?

Mise en forme de votre page carrière Personio avec CSS