Page Carrière Personio : Mise en Forme avec CSS

 

Cet article vous explique comment personnaliser vos pages carrière Personio à l’aide de feuilles de style en cascade (CSS).

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.

 

Personnalisez votre page avec le langage CSS

Accédez à Paramètres > Recrutement > Page Carrière > Apparence pour personnaliser une page carrière Personio aux couleurs de votre entreprise en utilisant des options de configuration prédéfinies. Pour plus d’informations sur la configuration d’une page carrière Personio, cliquez ici.

Pour personnaliser davantage la mise en forme de votre page carrière Personio, vous pouvez également utiliser le langage CSS. Pour cela, accédez à Paramètres > Recrutement > Page carrière > Apparence > CSS personnalisé. L’image suivante vous montre le champ de saisie CSS personnalisé avec un exemple de contenu :

careerpage-custom-css_fr.png

 

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.

Veuillez noter que, 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 le titre Options de mise en forme et liens autorisés.

 

Identification des sélecteurs

Pour trouver les sélecteurs auxquels appliquer votre mise en forme, ouvrez d’abord la page carrière Personio correspondante (vous trouverez son URL dans Paramètres > Recrutement > Page carrière). Faites un clic droit sur la page, puis sélectionnez « Inspecter » pour ouvrir le panneau du code.

La vidéo suivante vous montre comment déterminer la classe des boutons de catégorie.

careerpage-css-inspect_fr.gif

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, il vous suffira alors de copier la classe requise. Les boutons de catégorie appartiennent à la classe « .category-btn ».

careerpage-css-identifying-selectors-class_en-us.png

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

careerpage-custom-css_fr.png

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

Si vous souhaitez masquer l’arrière-plan de votre en-tête, sélectionnez simplement l’option correspondante dans Paramètres > 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

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

careerpage-css-preview_fr.gif

 

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

Cliquez ici pour savoir comment insérer des images et des vidéos dans vos pages carrière Personio.

 

Vous ne trouvez pas ce que vous cherchez ?

Nous sommes ravis de vous apporter notre aide ! Envoyez-nous simplement un message avec vos questions et nous vous répondrons dès que possible.

Envoyer une demande

Commentaires

0 commentaire

Cet article n'accepte pas de commentaires.

    Sujets de cet article