Comment personnaliser le CSS dans les widgets du profil de l'employé
Résumé
Le widget SureCritic Employee Widget vous permet d'intégrer une liste de vos employés, en soulignant leurs récents succès et réalisations au sein de votre organisation. La liste comprendra le nom, la photo, la note moyenne, les publications récentes sur les médias sociaux, les évaluations 5 étoiles et une biographie. La liste sera réactive en utilisant le cadre Bootstrap.
Formats
Le widget SureCritic pour les employés sera disponible sous la forme d'une page web compatible avec les iframes, d'un script qui injectera une iframe réactive et d'un contenu JSON que vous pourrez formater vous-même. Les versions HTML comporteront des sélecteurs CSS qui vous permettront d'ajouter votre propre style personnalisé.
Sélecteurs CSS de mise en page
| Sélecteur | Description |
| .sc-employee-plugin-container | Le contenant principal de toutes les cartes d'employé |
| .employee-card | Une carte individuelle |
| .employee-image-column | La colonne contenant l'image ou le gravatar de l'employé |
| .employee-info-column | Colonne contenant le nom et les coordonnées de l'employé. |
| .employee-content-column | La colonne contenant le carrousel de biographies, d'avis 5 étoiles récents et de messages sociaux récents concernant l'employé. |
| .employee-review | Le conteneur carrousel d'une évaluation récente d'un employé. |
| .employee-review-card | La carte pour l'examen. |
| .employee-post | Le conteneur carrousel d'une publication récente sur les médias sociaux |
| .employee-post-card | La carte pour le poste. |
| .employee-bio | Le conteneur du carrousel pour la section bio de l'employé |
Sélecteurs CSS pour les informations sur les employés
| Sélecteur | Description |
| .nom-de-l'employé | Nom de l'employé |
| .employee-job-title | L'intitulé du poste de l'employé |
| .employee-rating-container | La partie extérieure contenant les étoiles et les moyennes |
| .employee-star-rating | La division intérieure contenant les étoiles et la moyenne |
| .employés-étoiles | Les étoiles représentant la note moyenne (sous forme de balises img) |
| .employee-avg-rating | La note moyenne du texte. |
| .employee-contact-container | Div Container pour les boutons de contact |
| .employee-email | Une balise d'ancrage pour le bouton e-mail |
| .employee-telephone | Une balise d'ancrage pour le bouton téléphone |
Sélecteurs CSS pour le contenu des employés
| Sélecteur | Description |
| .employee-review-star-rating | Les étoiles de la revue |
| .employee-review-source | Le logo de la source d'examen |
| .employee-review-title | Le titre de l'article |
| .employee-review-comments | Le corps de l'examen. |
| .employee-review-author | L'auteur de la revue. |
| .employee-headline | Le titre de la biographie de l'employé. |
| .employee-about | La section "à propos" de l'employé. |
Référencement du CSS
Deux options pour référencer votre CSS afin de styliser le widget comme vous le souhaitez. Les options se trouvent dans
Paramètres>Plugins>Salariés
1. Vous pouvez faire référence à votre propre feuille de style
2. Vous pouvez coller votre propre style
