Customizing Employee Profile Styles

You can easily change the look and feel of employee profile pages by adjusting the CSS rules. For example, the labels and icons such as Job Title, Company, Department can be styled using this rule:

div.emd-container .fronteditable div.segment-block .fa,
div.emd-container .fronteditable .segtitle {
    color: #708192;
    font-weight: 500;
}

This controls:

• Icons (📞, ✉️, etc.) next to contact details
• Labels such as Job Title, Company, Manager, Department

🎨 Example Customizations

1. Dark & Professional

div.emd-container .fronteditable div.segment-block .fa,
div.emd-container .fronteditable .segtitle {
    color: #2c3e50;
    font-weight: 600;
    font-size: 15px;
}

2. Brand Accent

div.emd-container .fronteditable div.segment-block .fa,
div.emd-container .fronteditable .segtitle {
    color: #1a73e8; /* Replace with your brand color */
    font-weight: 600;
    font-size: 15px;
}

3. Subtle & Modern

div.emd-container .fronteditable div.segment-block .fa,
div.emd-container .fronteditable .segtitle {
    color: #555;
    font-weight: 500;
    font-size: 14px;
}

🔍 How to Preview Changes

1. Open an employee profile (for example, Jennifer Lawrence).
2. Right-click → Inspect to open developer tools.
3. Paste the CSS snippet into the browser dev tools to preview instantly.
4. When happy, save the CSS permanently using one of the options below.

💾 Saving Your Custom CSS

• Plugin Settings (recommended): Go to DOMAIN/wp-admin/admin.php?page=empd_pro_settings&tab=tools and paste your CSS in the Custom CSS field there. This applies only to Employee Directory frontend pages.
• Theme Settings: Alternatively, add it under Appearance → Customize → Additional CSS. This affects the entire site.

✅ We recommend using the plugin’s Custom CSS setting for Employee Directory styles, as it keeps changes isolated and upgrade-safe.