Color Scheme Settings

BuddyX Pro provides comprehensive color customization options to match your brand identity. Configure primary colors, secondary colors, backgrounds, and component-specific colors through the Skin panel in the Customizer.

The Site Skin panel in the WordPress Customizer showing color scheme options

Accessing Color Settings

1. Go to Appearance > Customize
2. Navigate to Skin > Color Scheme

Primary Color Settings

The primary color is used throughout your site for buttons, links, accents, and interactive elements.

Primary Color

Setting	Description	Default
Primary Color	Main brand color	#4267B2
Primary Hover Color	Hover state for primary elements	Darkened primary

Where Primary Color Appears:

• Buttons and call-to-action elements
• Links (text and menu items)
• Active/selected states
• Progress bars and indicators
• Form focus states
• Navigation underlines
• BuddyPress accent elements

Secondary Color

Setting	Description	Default
Secondary Color	Supporting brand color	#03A9F4
Secondary Hover Color	Hover state for secondary elements	Darkened secondary

Where Secondary Color Appears:

• Secondary buttons
• Alternative link colors
• Accent elements
• Badges and tags
• Alternate hover states

Background Colors

Site Background

Setting	Description	Default
Site Background Color	Main body background	#f5f5f5
Site Background Image	Optional background image	None
Background Repeat	Image repeat behavior	No Repeat
Background Position	Image positioning	Center Center
Background Size	Image sizing (Cover, Contain, Auto)	Cover
Background Attachment	Fixed or scroll with page	Scroll

Content Background

Setting	Description	Default
Content Background	Post/page content area	#ffffff
Content Border	Border around content areas	Transparent

Header Background

Setting	Description	Default
Header Background	Header area color	#ffffff
Header Text Color	Text/icon color in header	#333333
Header Link Color	Navigation link color	#333333
Header Link Hover	Navigation hover color	Primary color

Footer Background

Setting	Description	Default
Footer Background	Footer area color	#222222
Footer Text Color	Footer text color	#aaaaaa
Footer Link Color	Footer link color	#ffffff
Footer Link Hover	Footer link hover	Primary color

Text Colors

Body Text

Setting	Description	Default
Body Text Color	Paragraph and general text	#333333
Heading Color	H1-H6 headings	#222222
Link Color	Text links	Primary color
Link Hover Color	Link hover state	Primary hover

Meta Text

Setting	Description	Default
Meta Text Color	Post meta, dates, etc.	#666666
Muted Text Color	Secondary/helper text	#999999

Component Colors

Buttons

Setting	Description	Default
Button Background	Default button background	Primary color
Button Text	Button text color	#ffffff
Button Hover Background	Hover state background	Primary hover
Button Hover Text	Hover state text	#ffffff

Forms

Setting	Description	Default
Input Background	Form field background	#ffffff
Input Border	Form field border	#dddddd
Input Text	Form field text	#333333
Input Focus Border	Focus state border	Primary color

Sidebar/Widgets

Setting	Description	Default
Widget Background	Widget container background	#ffffff
Widget Title Color	Widget heading color	Heading color
Widget Text Color	Widget content text	Body text

Color Presets

BuddyX Pro includes several pre-designed color schemes for quick setup. Here’s what different presets look like when applied:

Dark Mode Preset

The Legacy Dark preset creates a dark header and inverted color palette

Ocean Blue Preset

The Ocean Blue preset applies blue accent colors throughout the site

Available Presets

Preset	Primary	Secondary	Style
Default Blue	#4267B2	#03A9F4	Professional
Fresh Green	#28a745	#20c997	Natural
Warm Orange	#fd7e14	#ffc107	Energetic
Royal Purple	#6f42c1	#e83e8c	Creative
Modern Teal	#20c997	#17a2b8	Contemporary
Classic Red	#dc3545	#fd7e14	Bold
Dark Theme	#2c3e50	#3498db	Professional
Light Minimal	#333333	#666666	Clean

Applying a Preset:

1. Open Skin > Color Presets in Customizer
2. Click on desired preset thumbnail
3. Colors update automatically
4. Customize individual colors as needed
5. Publish changes

Color Application Examples

Example 1: Corporate Brand

Primary Color: #003366 (Navy Blue)
Secondary Color: #CC9900 (Gold)
Site Background: #F8F9FA
Content Background: #FFFFFF
Text Color: #333333

Example 2: Community Platform

Primary Color: #5C6BC0 (Indigo)
Secondary Color: #26A69A (Teal)
Site Background: #ECEFF1
Header Background: #FFFFFF
Footer Background: #37474F

Example 3: E-Learning Site

Primary Color: #43A047 (Green)
Secondary Color: #FB8C00 (Orange)
Site Background: #FAFAFA
Content Background: #FFFFFF
Link Color: #1B5E20

Color Accessibility

Ensure your color choices meet accessibility standards:

Contrast Ratios (WCAG 2.1)

Text Type	Minimum Ratio	Recommended
Normal Text	4.5:1	7:1
Large Text (18px+)	3:1	4.5:1
UI Components	3:1	4.5:1

Tools for Checking Contrast:

• WebAIM Contrast Checker
• Colour Contrast Analyser
• Browser DevTools accessibility audit

Color Blindness Considerations

• Don’t rely solely on color to convey information
• Use icons or text alongside color indicators
• Test with color blindness simulation tools
• Ensure sufficient contrast for all users

Dynamic CSS Generation

BuddyX Pro generates optimized CSS based on your color settings:

Performance Features:

• CSS is generated only when colors change
• Cached in WordPress transients
• Minified for production
• Only includes rules for active features

Cache Clearing: After changing colors, the theme automatically:

1. Generates new dynamic CSS
2. Clears transient cache
3. Applies new styles site-wide

If colors don’t update immediately:

1. Clear browser cache
2. Clear any caching plugin
3. Purge CDN cache if applicable

Troubleshooting

Colors Not Applying

Problem: Changed colors don’t appear on frontend.

Solutions:

1. Click “Publish” in Customizer (changes aren’t saved until published)
2. Clear browser cache (Ctrl+F5 / Cmd+Shift+R)
3. Disable caching plugins temporarily
4. Check for custom CSS overriding theme styles

Colors Look Different Than Picker

Problem: Selected color looks different on the site.

Solutions:

1. Monitor color calibration may differ
2. Check if transparency/opacity is applied
3. Verify no color filters in browser extensions
4. Compare in multiple browsers

Preset Doesn’t Apply Completely

Problem: Color preset doesn’t change all elements.

Solutions:

1. Some elements may have custom overrides
2. Check plugin-specific color settings
3. Clear all caches after applying preset
4. Some colors may need manual adjustment

Dark Mode Colors Conflicting

Problem: Colors look wrong when dark mode is active.

Solutions:

1. Configure dark mode specific colors
2. Check Dark Mode Settings
3. Some colors auto-invert, others need manual setting
4. Test both light and dark modes after changes

Related Documentation

• Color Presets – Pre-designed color schemes
• Dark Mode – Dark color scheme settings
• Border Radius & Styling – Element styling options
• Typography Settings – Font colors

---

Need Help?

• Visit our Documentation Portal
• Contact Support at support@wbcomdesigns.com