Customize stage colors to create a visual pipeline that matches your workflow and branding.
Overview #
Assign custom colors to each contact stage for easy visual identification throughout PloverCRM. Colors appear in contact lists, filters, and the admin interface.
Prerequisites: Admin permissions and at least one stage created.
Accessing Stage Colors #
Navigate to PloverCRM > Settings > PloverCRM and find the Stages section. Each stage has a color picker next to its name.
Customizing Colors #
- Click the color picker next to a stage name
- Choose a color using:
- Predefined palette
- Custom color picker
- Hex code (e.g.,
#FF5733) - RGB values
- Click outside or press Enter to save (auto-saves)
Recommended Color Schemes #
Professional Pipeline:
- New:
#3498db(Blue) | Contacted:#9b59b6(Purple) | Qualified:#f39c12(Orange) - Proposal:
#e67e22(Dark Orange) | Won:#27ae60(Green) | Lost:#95a5a6(Gray)
Sales Funnel:
- Lead:
#3498db| Opportunity:#2980b9| Negotiation:#f39c12 - Closed Won:
#27ae60| Closed Lost:#c0392b
Best Practices #
Visual Hierarchy:
- Cooler colors (blue, purple) for early stages
- Warmer colors (orange, yellow) for middle stages
- Green for success, red/gray for negative outcomes
Accessibility:
- Ensure sufficient contrast
- Use distinct, easily distinguishable colors
- Test with colorblind simulation tools
Consistency:
- Document your color scheme for team reference
- Align with brand colors where appropriate
Where Colors Appear #
- Contact List: Stage badges and indicators
- Contact Edit Screen: Stage selector and history timeline
- Dashboard: Charts, pipeline visualizations, and reports
- Mobile App: Contact cards and filters
Advanced Customization #
Custom CSS Styling #
<span class="hljs-comment">/* Make stage badges rounded */</span>
<span class="hljs-selector-class">.plover-crm-stage-badge</span> {
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">20px</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">4px</span> <span class="hljs-number">12px</span>;
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">2px</span> <span class="hljs-number">4px</span> <span class="hljs-built_in">rgba</span>(0, 0, 0, 0.1);
}
Programmatic Management #
// Get <span class="hljs-literal">and</span> update stage colors
$stage_colors = get_option(<span class="hljs-string">'plover_crm_stage_colors'</span>, [])<span class="hljs-comment">;</span>
$stage_colors[<span class="hljs-string">'new'</span>] = <span class="hljs-string">'#3498db'</span><span class="hljs-comment">;</span>
update_option(<span class="hljs-string">'plover_crm_stage_colors'</span>, $stage_colors)<span class="hljs-comment">;</span>
Troubleshooting #
Colors not saving: Check browser console for errors, verify permissions, try different browser, clear cache.
Colors not appearing: Refresh page (Ctrl+F5), clear WordPress cache, check for CSS conflicts.
Color picker not working: Check JavaScript errors, disable conflicting extensions, update PloverCRM.
Related Articles #
Last Updated: February 3, 2026
Applies To: PloverCRM 2.0+
