Color Customization in eDirectory
Overview
The Colors & Fonts section (Site Manager > Design > Colors & Fonts) allows you to control the overall visual identity of your website.
Instead of manually styling each page, you can define up to 8 primary colors that are automatically applied across the platform to maintain a professional and consistent design.
Think of it as a centralized design system:
Choose the colors once, and eDirectory applies them throughout the site.
🎨 Brand Color
Purpose
Your primary brand color used in major visual areas and key interface elements.
Where It Appears
Headers & Backgrounds
- Listing detail page header (when no cover image exists)
- Search box with slider (when no slider image exists)
- Widget backgrounds (supported widgets only)
📸 Listing header:
📸 Search box with slider background (no slider image)
📸 Widget backgrounds
Icons
- Location icon
- Phone icon
- Email icon
- Social media icons
📸 Icons:
Search Results
- Category counters
- “List”, “Grid”, and “Map” buttons (selected state)
📸 Counters and buttons
Important Behavior: Cover Image & Search Box Slider Override
When a listing has a cover image uploaded, the image automatically replaces the Brand Color in the listing header background.
| 📸 Listing header with no cover image |
|
|
| 📸 Listing header with cover image |
|
|
The same behavior applies to the Search Box with Slider widget: if a slider image is uploaded, the image will override the Brand Color background in that section.
| 📸 Search Box with no slider image |
|
|
| 📸 Search Box with slider image |
|
|
This allows visual areas to prioritize custom imagery while still using the Brand Color as the default background whenever no image is provided.
Automatic Dark Overlay
A dark overlay is automatically applied to listing headers and the Search Box with Slider whenever a background color or image is displayed.
This overlay improves text readability by increasing contrast between the background and the content shown on top of it, such as titles, buttons, and search fields.
This behavior is intentional and built into the system design to ensure better accessibility and visual clarity. It cannot be disabled.
🎨 Neutral Color
Purpose
Main color used for text and neutral interface elements.
Where It Appears
Navigation & Titles
- Navigation menu titles
- Widget titles
- Category titles
📸 Navigation menu:
📸 Widget and category titles:
Content Areas
- Listing descriptions
- Hours
- Address information
- Contact information
📸 Listing detail page:
Search Fields
- Search placeholders
- Sponsored links text
📸 Search placeholders:
📸 Sponsored links banner text:
To learn more about adding and displaying sponsored link banners, please refer to the articles below:
Important Behavior: Automatic Background Adjustment
When Neutral Color is used as a background in a widget, the system automatically generates a lighter version of the color.
Example:
- Text → Dark Gray in Colors & Fonts
- Background → Light Gray in widget settings
| 📸 Neutral color in Colors & Font:s: |
|
|
| 📸 Neutral color in widget settings: |
|
|
Why?
- Improves readability
- Prevents low contrast
- Maintains accessibility standards
Widget note:
- Some widgets allow Neutral Color as background.
- It will always appear lighter than the selected color.
- ⚠️ This is an expected system behavior and cannot be changed.
- ⚠️ Not all widgets support selecting the brand or neutral color.
🎨 Highlight Color
Purpose
Used for actions, hover effects, and interactive elements.
Where It Appears
Buttons
- Submit
- Get Started
- Sign In
- Search button
- Search icon
- Location icon
📸 Buttons and icons:
.
Hover Effects
- Listings
- Events
- Articles
- Blogs
- Categories
📸 Mouse hover on listing titles:
Icons & Navigation
- Favorite / Share / Website icons
- Category icons (“+” and “✔” when selected)
- Navigation menu hover state
📸 Icons:
📸 Navigation menu hover:
🎨 Badge Color
Purpose
Used for compact visual indicators.
Where It Appears
- Bookmarks
- Review stars
📸 Bookmark and Review Stars:
🎨 Link Color
Purpose
Defines the appearance of clickable links.
Where It Appears
Listing & Category Links
- Categories under listing thumbnails
- Listing detail links
- “See more” links (may vary depending on your setup)
📸 Categories under listing thumbnails and “See more links
📸Listing detail links:
Slider & Sponsored Areas
- Links inside slider images
- Sponsored links banner
📸 Slider:
📸 Sponsored links banner:
To learn more about adding and displaying sponsored link banners, please refer to the articles below:
Why It Matters
Good link colors help users:
- Identify clickable elements faster
- Navigate more easily
- Improve usability
🎨 Attention Color
Purpose
Used for alerts requiring immediate attention.
Where It Appears
- Error messages
- Required fields
- Pending actions
📸 Error:
🎨 Success Color
Purpose
Indicates successful actions and confirmations.
Where It Appears
- Confirmation messages
- Successful submissions
- Completed actions
📸 Confirmation message:
🎨 Warning Color
Purpose
Used for risky or irreversible actions.
Where It Appears
- Delete buttons
- Warning alerts
- Destructive actions
📸 Delete button:
✅ Why This Matters
Consistent Branding
Your website maintains a polished and professional appearance without manual styling across multiple pages.
Better User Experience
The color system improves:
- Readability
- Navigation
- Interaction clarity
Built-in Design Protection
Certain automatic adjustments help:
- Prevent poor contrast
- Improve accessibility
- Maintain usability standards
🧾 Conclusion
The eDirectory color system was designed to simplify website customization while maintaining visual consistency and usability.
Instead of manually styling each section of the site, you only need to define a few key colors, and the platform applies them automatically across your pages.
Each color serves a specific role:
- Reinforcing branding
- Guiding user actions
- Improving readability
- Highlighting important information
Some visual adjustments—such as lighter Neutral Color backgrounds—are intentional and help maintain accessibility and clarity throughout the platform.