Theme Customization

Your church's link page should reflect your unique identity and brand. Linked.Church provides extensive customization options to ensure your page looks exactly how you want it, from colors and fonts to backgrounds and button styles.

Accessing Theme Settings

1. Sign in to your dashboard
2. Navigate to "Customize" or "Theme" in the menu
3. You'll see the Theme Customization panel
4. Changes preview in real-time
5. Save when you're happy with the design

Color Customization

Colors are the foundation of your page's visual identity. Choose colors that match your church's brand and create the right atmosphere.

Primary Colors

Background Color

• Sets the main page background
• Can be solid color or gradient start
• Consider readability and mood
• Popular choices: White, soft pastels, deep blues

Text Color

• Main text including headers
• Must contrast with background
• Typically black or white
• Test readability on mobile

Accent Color

• Used for highlights and emphasis
• Often your church's primary brand color
• Applied to active states
• Should stand out but not clash

Button Colors

Button Background

• The fill color of link buttons
• Should stand out from page background
• Consider your church's brand colors
• Test with different link states

Button Text

• Text color on buttons
• Must be highly readable
• Usually white or dark gray/black
• Check contrast ratio

Button Hover

• Color when mouse hovers
• Slightly darker or lighter than base
• Provides visual feedback
• Can include transitions

Using the Color Picker

1. Click the color field to open picker
2. Choose from presets or create custom
3. Enter hex codes for exact matches
4. Use the eyedropper to sample colors
5. Preview immediately in the preview pane

Color Scheme Best Practices

Monochromatic

• Variations of a single color
• Creates cohesive, professional look
• Easy to implement
• Example: Different shades of blue

Complementary

• Colors opposite on color wheel
• High contrast and vibrant
• Use sparingly for impact
• Example: Blue and orange

Triadic

• Three evenly spaced colors
• Balanced and harmonious
• One dominant, two accents
• Example: Blue, yellow, red

Brand Consistency

• Match your church's logo colors
• Use existing brand guidelines
• Maintain consistency across platforms
• Consider accessibility standards

Typography Settings

Fonts convey personality and affect readability. Choose fonts that reflect your church's character while ensuring text is easy to read.

Font Families

Heading Font

• Used for church name and headers
• Can be more decorative
• Should be readable at all sizes
• Examples: Playfair Display, Montserrat

Body Font

• Used for link titles and descriptions
• Prioritize readability
• Avoid overly decorative fonts
• Examples: Open Sans, Roboto, Lato

Font Selection Tips

Serif Fonts

• Traditional, trustworthy feel
• Good for established churches
• Examples: Georgia, Merriweather
• Best for headings

Sans-Serif Fonts

• Modern, clean appearance
• Excellent readability
• Examples: Arial, Helvetica
• Great for body text

Display Fonts

• Decorative, attention-grabbing
• Use sparingly
• Only for main heading
• Ensure mobile readability

Font Pairing Guidelines

Classic Combination

Heading: Playfair Display (Serif)
Body: Open Sans (Sans-serif)
Creates: Elegant, readable design

Modern Combination

Heading: Montserrat (Sans-serif)
Body: Roboto (Sans-serif)
Creates: Clean, contemporary look

Friendly Combination

Heading: Quicksand (Rounded)
Body: Source Sans Pro (Sans-serif)
Creates: Approachable, warm feeling

Background Options

Backgrounds set the overall mood and can make your page truly unique.

Solid Colors

When to Use

• Clean, professional look
• Fast loading
• Focus on content
• Easy to implement

Best Practices

• Light colors for daytime feel
• Dark for dramatic effect
• Consider text contrast
• Test on different screens

Gradient Backgrounds

Types of Gradients

• Linear: Top to bottom or diagonal
• Radial: Center outward
• Conic: Circular sweep

Creating Gradients

1. Choose gradient type
2. Select start color
3. Select end color
4. Adjust angle/position
5. Preview effect

Popular Church Gradients

Sunrise: #FFE5B4 → #FF8C69
Ocean: #00C9FF → #92FE9D
Sunset: #FC466B → #3F5EFB
Forest: #134E5E → #71B280

Image Backgrounds

Choosing Images

• High resolution (min 1920x1080)
• Relevant to your church
• Not too busy or distracting
• Consider text overlay readability

Image Types

• Church building exterior
• Stained glass windows
• Nature scenes
• Abstract patterns
• Worship moments

Upload Best Practices

• Optimize file size (<2MB)
• Use JPEG for photos
• Test on mobile devices
• Add overlay for text contrast

Video Backgrounds

Considerations

• File size and loading time
• Mobile data usage
• Autoplay policies
• Fallback image needed

Best Use Cases

• Special campaigns
• Easter/Christmas themes
• Church highlights reel
• Worship atmosphere

Button Styles

Buttons are the primary interactive elements on your page. Their style affects both aesthetics and usability.

Button Shapes

Rounded Corners

• Soft, friendly appearance
• Modern web standard
• Various radius options
• Most popular choice

Square Corners

• Clean, structured look
• Professional feeling
• Sharp, defined edges
• Good for minimalist design

Pill Shape

• Fully rounded ends
• Playful, approachable
• Popular for CTAs
• Space-efficient

Button Effects

Shadow Effects

• Adds depth and dimension
• Light shadow for subtle lift
• Heavy shadow for dramatic effect
• Can indicate clickability

Border Styles

• Outline only (no fill)
• Solid borders
• Gradient borders
• Hover state changes

Animation Options

• Subtle hover effects
• Scale on hover
• Color transitions
• Shadow changes

Button Sizing

Padding Options

• Compact: Less white space
• Normal: Balanced spacing
• Spacious: More breathing room
• Custom: Set exact pixels

Width Settings

• Auto: Fit to content
• Full: Edge to edge
• Fixed: Specific width
• Responsive: Adapts to screen

Advanced Customization

Custom CSS

For advanced users, add custom CSS:

/* Custom link hover effect */
.link-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Custom header styling */
.section-header {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #gold;
}

Theme Presets

Available Presets

• Classic Church
• Modern Ministry
• Youth Focus
• Christmas Theme
• Easter Theme
• Minimalist

Using Presets

1. Browse preset gallery
2. Click to preview
3. Customize if needed
4. Save as your theme

Creating Your Own Preset

1. Design your perfect theme
2. Save as custom preset
3. Name your preset
4. Reuse across seasons
5. Share with other campuses

Mobile Optimization

All customizations are mobile-responsive, but consider:

Mobile-Specific Settings

Font Size Scaling

• Headers scale down appropriately
• Body text remains readable
• Button text stays clear
• Test on actual devices

Background Adjustments

• Images crop smartly
• Gradients adapt
• Videos may not autoplay
• Consider mobile data usage

Button Considerations

• Minimum 44px touch targets
• Adequate spacing between buttons
• Readable text size
• Clear hover/tap states

Seasonal Themes

Quickly switch themes for different seasons:

Christmas Theme

Background: Deep red gradient
Accent: Gold
Fonts: Elegant serif
Special: Snow animation

Easter Theme

Background: Soft pastels
Accent: Fresh green
Fonts: Light, airy
Special: Sunrise gradient

Summer Theme

Background: Bright blue
Accent: Sunny yellow
Fonts: Casual, friendly
Special: Wave pattern

Accessibility Considerations

Color Contrast

• WCAG AA compliance (4.5:1 ratio)
• Test with contrast checkers
• Consider color blindness
• Provide alternatives

Font Readability

• Minimum 16px for body text
• Clear letter spacing
• Avoid thin font weights
• Test with screen readers

Visual Indicators

• Don't rely on color alone
• Clear focus states
• Obvious clickable elements
• Consistent styling

Theme Testing

Preview Options

• Real-time preview
• Mobile/tablet views
• Different link types
• Various content lengths

Testing Checklist

• [ ] All text is readable
• [ ] Links are clearly clickable
• [ ] Colors work in all lighting
• [ ] Mobile experience is smooth
• [ ] Page loads quickly
• [ ] Accessibility standards met

Saving and Managing Themes

Save Options

• Save: Updates current theme
• Save As: Creates new version
• Reset: Returns to defaults
• Export: Download theme code

Theme History

• Automatic backups
• Revert to previous versions
• Compare changes
• Seasonal theme storage

Next Steps

Complete your customization:

• Set up your profile details
• Add your church logo
• Configure social previews
• Test on multiple devices

Remember: Your theme should enhance, not distract from, your content!