Theme Customization

Make your church website uniquely yours by customizing colors and visual style. Your theme affects how your public website looks and feels to visitors.

What is a Theme?

Your theme controls:

Visual Style: The overall design approach (modern, classic, or minimal)
Primary Color: Your main brand color (used for headers, buttons, accents)
Accent Color: A complementary color (used for highlights and hover effects)

All changes apply to your public church website automatically. Your dashboard always uses the standard ChapelWebsites.com design.

Accessing Theme Settings

Log in to your dashboard
Click Theme in the left navigation menu
You'll see the Theme Customization page with preview

Choosing Your Style

ChapelWebsites.com offers three built-in design styles:

Modern (Glassmorphic)

Best For:

Contemporary or non-denominational churches
Churches emphasizing innovation and community
Younger congregations

Visual Features:

Frosted glass effect with subtle transparency
Soft shadows and depth
Clean, contemporary typography
Smooth animations

When to Choose:

You want a fresh, forward-thinking appearance
Your church values creativity and modern worship
You have high-quality photography to showcase

Classic (Clean)

Best For:

Traditional churches with established history
Liturgical or denominational congregations
Multi-generational churches

Visual Features:

Clean, crisp backgrounds
Traditional layout with clear sections
Timeless design that ages well
Easy-to-read typography

When to Choose:

You want a professional, trustworthy appearance
Your church values tradition and stability
You prefer simplicity and clarity

Minimal

Best For:

Churches emphasizing simplicity and focus
Smaller congregations or house churches
Ministries focused on teaching and discipleship

Visual Features:

Maximum whitespace
Minimal decorative elements
Focus on content over design
Extremely fast loading

When to Choose:

You want content to be the star
Your church emphasizes "less is more"
You prefer understated elegance

Selecting Your Style

On the Theme page, you'll see three style options
Click on any style card to select it
The preview updates automatically
You can switch between styles to compare

Tip: There's no wrong choice! Pick the style that best reflects your church's personality.

Customizing Colors

After choosing a style, personalize it with your church's colors.

Primary Color

Your primary color is your main brand color. It appears on:

Navigation menu background
Section headers
Main buttons ("Learn More", "Give", etc.)
Event cards
Important highlights

Choosing a Primary Color:

Questions to Ask:

Does our church have existing brand colors? (Use those!)
What emotion do we want to convey?
- Blue: Trust, peace, stability
- Green: Growth, renewal, nature
- Purple: Royalty, spirituality, creativity
- Red: Energy, passion, urgency
- Orange: Warmth, community, enthusiasm

Examples:

Traditional church: Navy blue (#1e3a8a) or forest green (#166534)
Contemporary church: Vibrant blue (#2563eb) or teal (#0d9488)
Community-focused: Warm orange (#ea580c) or golden yellow (#ca8a04)

Tips:

Avoid overly bright colors that strain eyes
Test readability - white text should be readable on your primary color
Consider your hero image colors for harmony

Accent Color

Your accent color complements your primary color. It appears on:

Hover effects on buttons
Secondary highlights
Decorative elements
Links and interactive elements

Choosing an Accent Color:

Relationship to Primary:

Complementary: Opposite on color wheel (blue + orange)
Analogous: Next to each other (blue + purple)
Monochromatic: Lighter or darker shade of primary (navy + light blue)

Safe Choices:

If primary is cool (blue, green, purple) → warm accent (orange, gold)
If primary is warm (red, orange, yellow) → cool accent (blue, teal)
If unsure → use a lighter or darker version of your primary

Examples:

Primary: Navy blue (#1e3a8a) → Accent: Gold (#ca8a04)
Primary: Forest green (#166534) → Accent: Light blue (#3b82f6)
Primary: Deep purple (#7c3aed) → Accent: Coral (#f97316)

Tips:

Keep good contrast with white backgrounds
Test both colors together before saving
When in doubt, a lighter version of your primary works great

Using the Color Picker

Click the color box next to "Primary Color" or "Accent Color"
A color picker appears
You can:
- Drag the selector to choose a color
- Enter a hex code (like #1e3a8a) if you know it
- Use the slider to adjust brightness
Click outside the picker to close it
Your preview updates immediately

Finding Hex Codes:

Use a color picker tool online (Google "color picker")
Get colors from your logo with a design tool
Ask your designer for your brand colors
Use pre-made church color palettes (search "church website color schemes")

Preview Your Changes

The Theme page includes a live preview showing:

How your homepage will look
Your selected style
Your chosen colors applied
How text appears on colored backgrounds

Using the Preview:

Make changes to style or colors
Preview updates automatically
Scroll through the preview to see different sections
Toggle between desktop and mobile views (if available)

Tip: The preview is close to your actual site but may not show custom content like your specific events or sermons.

Saving Your Theme

When you're happy with your choices:

Review the style and colors in the preview
Scroll to the bottom of the page
Click Save Theme
You'll see a success message

Your changes are live immediately! Visit your public website to see the new theme in action.

Viewing Your Website with New Theme

After saving:

Click View Website in the top navigation
Your public site opens in a new tab with your new theme
Check different pages (events, sermons, home)
Test on mobile if possible
Return to Theme page if you want to adjust

Best Practices

Color Accessibility

Ensure Good Contrast:

White text should be easily readable on your primary color
Dark text should be readable on light backgrounds
Test with the preview before saving

Resources:

WebAIM Contrast Checker (Google it) tests color combinations
Aim for a contrast ratio of at least 4.5:1

Consistency with Existing Branding

Use Your Logo Colors:

Extract colors from your church logo
Match your printed materials
Maintain brand recognition across platforms

Don't Have Brand Colors?

Choose based on your church's personality
Ask your congregation what colors they associate with your church
Look at successful churches in your denomination for inspiration

Mobile Considerations

Remember:

Many visitors view on phones
Colors appear differently on various screens
Test your theme on your own phone before finalizing

Seasonal Updates

Consider Changing Themes:

Christmas: Red and gold
Easter: Purple and white
Summer: Bright, cheerful colors
Fall: Warm orange and brown tones

Or Stay Consistent:

Many churches keep the same theme year-round
This builds brand recognition
Less maintenance required

Common Questions

Can I change my theme later? Yes! Return to the Theme page anytime to update your style or colors. Changes apply immediately.

Will changing my theme affect my content? No. Your events, sermons, and settings remain unchanged. Only the visual appearance updates.

Can I use custom fonts? Currently, we use optimized fonts for each style. Custom font uploads are coming in a future update!

What if I don't like any of the three styles? We're adding more styles regularly! For now, choose the closest match and customize with your colors. Contact us if you have specific needs.

Can I see examples of other churches' themes? Yes! Browse our showcase at chapelwebsites.com/showcase (coming soon) to see real examples.

How do I match my logo exactly? Use a color picker tool to extract hex codes from your logo image, then enter those codes in the color fields.

Troubleshooting

Colors Look Different on My Phone

Cause: Different screens display colors with slight variations

Solution:

Choose colors with enough contrast
Test on multiple devices if possible
Trust the preview as the average experience

Text is Hard to Read

Cause: Primary color and text don't have enough contrast

Solution:

Choose a darker primary color
Or choose the Classic style which optimizes for readability

Changes Aren't Showing Up

Cause: Your browser cached the old theme

Solution:

Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
Clear browser cache
Try viewing in an incognito/private window

Saved the Wrong Color by Accident

Cause: Clicked Save before reviewing

Solution:

Return to Theme page
Select the correct color
Save again - it overwrites immediately

Advanced Tips

Professional Color Combinations

Classic Traditional:

Primary: Navy Blue (#1e40af)
Accent: Gold (#d97706)
Style: Classic

Modern Contemporary:

Primary: Deep Teal (#0f766e)
Accent: Coral (#f97316)
Style: Modern

Warm Community:

Primary: Warm Orange (#ea580c)
Accent: Sky Blue (#0ea5e9)
Style: Modern

Simple & Clear:

Primary: Forest Green (#166534)
Accent: Light Green (#84cc16)
Style: Minimal

Matching Your Denomination

Catholic/Anglican/Orthodox:

Consider Classic style with deep purple or gold

Baptist/Methodist/Presbyterian:

Classic or Modern styles work well
Traditional blue or green colors

Pentecostal/Charismatic:

Modern style with vibrant colors
Red, purple, or bright blue

Non-denominational:

Any style works - choose what fits your culture
Contemporary churches often choose Modern with bold colors

Next Steps

With your theme customized:

Create Events - Add content to your beautiful site
Add Sermons - Share your messages
Set Up Giving - Enable donations

Need inspiration? Email [email protected] to see examples, or check our FAQ for more tips!