How to customize the CSS in the employee profile widgets
Summary
The SureCritic Employee Widget allows you to embed a list of your employees, highlighting their recent successes and accomplishments within your organization. It will include their name, photo, average rating, recent social media posts, 5-star reviews, and a bio. The list will be responsive using the Bootstrap framework.
Formats
The SureCritic Employee Widget will be available as an iframe-capable webpage, a script that will inject a responsive iframe, and as JSON content that you can format yourself. The HTML versions will allow for CSS selectors that allow you to add your own custom styling.
Layout CSS Selectors
| Selector | Description |
| .sc-employee-plugin-container | The primary container for all employee cards |
| .employee-card | An individual card |
| .employee-image-column | The column containing the employee’s image or gravatar |
| .employee-info-column | The column containing the employee’s name and contact information. |
| .employee-content-column | The column containing the carousel of biography, recent 5-star reviews, and recent social posts about the employee. |
| .employee-review | The carousel container for a recent employee review. |
| .employee-review-card | The card for the review. |
| .employee-post | The carousel container for a recent social media post |
| .employee-post-card | The card for the post. |
| .employee-bio | The carousel container for the employee’s bio section |
Employee Info CSS Selectors
| Selector | Description |
| .employee-name | The employee’s Name |
| .employee-job-title | The employee’s job title |
| .employee-rating-container | The exterior div containing the stars and average |
| .employee-star-rating | The interior div containing the stars and average |
| .employee-stars | The stars representing the average rating (as img tags) |
| .employee-avg-rating | The text average rating. |
| .employee-contact-container | Container div for the contact buttons |
| .employee-email | An anchor tag for the email button |
| .employee-telephone | An anchor tag for the telephone button |
Employee Content CSS Selectors
| Selector | Description |
| .employee-review-star-rating | The stars for the review |
| .employee-review-source | The logo for the review source |
| .employee-review-title | The title/headline for the review |
| .employee-review-comments | The body of the review. |
| .employee-review-author | The author of the review. |
| .employee-headline | The headline for the employee bio. |
| .employee-about | The about section for the employee. |
Referencing the CSS
Two options for referencing your CSS to style the widget the way you want to. Options are located in
Settings>Plugins>Employees
1. You can reference your own stylesheet
2. You can paste in your own style
