Cet article vous explique comment personnaliser vos pages carrière Personio à l’aide de feuilles de style en cascade (CSS).
Conseil : les feuilles de style en cascade (ou 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.
Personnaliser la page avec le langage CSS
Pour utiliser le langage CSS afin de personnaliser votre page carrière Personio en fonction du design de votre entreprise, procédez comme suit :
- Accédez à Paramètres > RECRUTEMENT > 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 :
Classes, sélecteurs et propriétés CSS
La structure des pages carrière Personio se base sur le langage de programmation HTML. La mise en forme des différents éléments HTML est définie par le langage de programmation CSS. Le code CSS est généralement stocké dans une feuille de style distincte liée au code HTML correspondant par l’intermédiaire des métadonnées du site Web. Lors de la mise en forme de votre page carrière Personio, le champ de saisie CSS personnalisé présenté ci-dessus constitue votre feuille de style.
Si vous souhaitez utiliser le langage CSS pour personnaliser la mise en forme d’un élément spécifique de votre page carrière Personio (comme les boutons de catégorie), vous devez créer un lien unique entre la feuille de style et l’élément HTML correspondant. Ce lien est établi avec ce que l’on appelle des 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 : pour appliquer le style CSS sur l’ensemble d’une 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é. La liste détaillée de tous les éléments vous est présentée à la fin de cet article sous le titre Options de mise en forme et liens autorisés.
Identification des sélecteurs
Exemple
La vidéo suivante vous montre comment déterminer la classe des boutons de catégorie.
Pour trouver les sélecteurs auxquels appliquer votre mise en forme, procédez comme suit :
- Ouvrez la page carrière Personio correspondante (vous trouverez son URL dans Paramètres > RECRUTEMENT > 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.
- Ensuite, cliquez sur l’élément que vous souhaitez mettre en forme. Ce dernier sera automatiquement mis en surbrillance dans la fenêtre de la structure HTML et il vous suffira alors de copier la classe requise.
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é
Accédez à Paramètres > RECRUTEMENT > Recrutement > Page Carrière > Apparence > CSS personnalisé pour sélectionner la classe appropriée en utilisant le nom de la classe précédé d’un point « . ». Indiquez la propriété de l’élément HTML que vous souhaitez modifier (ici, la couleur) et la valeur que vous souhaitez lui attribuer (ici, #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 cette commande de mise en forme saisie, le bouton de catégorie de la page carrière sera affiché en turquoise avec le texte en blanc.
Fonction Code Sanitizer
Si l’une des modifications que vous souhaitez apporter n’est pas autorisée, vous pourrez tout de même la saisir dans le champ CSS personnalisé, mais 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.
Cet outil rationalise également le code et regroupe les propriétés similaires (p. ex. padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; devient padding: 5px 10px 10px).
Conseils pour mettre en forme vos pages carrière
Lisez la suite afin de découvrir des recommandations pour le design de vos pages carrière. L’image ci-dessous vous présente le champ de saisie CSS personnalisé avec des exemples de code pour chaque ligne.
Bien sûr, vous pouvez personnaliser davantage vos pages 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 par le système à l’adresse 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 : pour masquer l’arrière-plan de votre en-tête, sélectionnez simplement l’option correspondante dans Paramètres > RECRUTEMENT > Recrutement > Page Carrière > Apparence > Mise en page. Cette fonction vous sera particulièrement utile pour intégrer de manière fluide 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, nous avons ajouté un arrière-plan bleu clair à la page carrière :
.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 différents 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. Toutefois, si vous souhaitez le personnaliser davantage et que le champ d’édition par défaut ne vous le permet pas, vous pouvez utiliser le langage CSS pour apporter des modifications supplémentaires à la mise en forme, par exemple (ligne 1 de 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 2 de 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 en avant (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 utiliser la même méthode pour modifier le style des boutons d’une page carrière. Par exemple, pour modifier le style du bouton Rechercher 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 également définir le style que prendront les boutons lorsque les candidats passeront la souris dessus, par exemple. 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 » (survoler) 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 offres d’emploi individuelles sont répertoriées dans une case avec un fond 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
En outre, vous pouvez 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
Le pied de page peut également être personnalisé à 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. Les liens du pied de page peuvent également être personnalisés (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
Avant de publier la page personnalisée, vous pouvez vérifier 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 présente une vue d’ensemble de toutes les balises HTML pouvant être utilisées 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 :
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
Pour découvrir comment insérer des images et des vidéos dans des pages carrière Personio, cliquez ici.