Theme Customization - Watchman Tower Docs

Plan Requirements

Plan Availability: Theme customization is available on Team and Stack plans only.Free and Solo plan users can view a preview but cannot save custom themes. Upgrade to Team or Stack to unlock full customization.

What’s Included by Plan

Feature	Free	Solo	Team	Stack
Default Theme	✅	✅	✅	✅
Primary Color	❌	❌	✅	✅
Background Color	❌	❌	✅	✅
Custom Logo	❌	❌	✅	✅
Typography	❌	❌	✅	✅
Advanced CSS	❌	❌	❌	✅

Color Customization

Primary Color

Controls the main accent color used throughout your status page. Where it’s used:

Header background
Button backgrounds
Link colors
Status badges (operational state)
Active navigation items
Focus states

Configuration:

Color Picker
Hex Input
Presets

Click the color swatch to open a visual color picker:

Drag to select hue
Adjust saturation and brightness
See live preview of changes

Default: #3b82f6 (Blue) Best practices:

Use your brand’s primary color
Ensure good contrast with white text
Test on both light and dark backgrounds
Avoid extremely light colors (poor readability)

Background Color

Controls the main page background. Where it’s used:

Full page background
Main content area
Card backgrounds (auto-adjusted)

Configuration: Similar to primary color:

Color picker for visual selection
Hex code input for precision
Real-time preview

Default: #ffffff (White) Contrast Validation: The system automatically checks contrast ratios:

Good Contrast

✅ Text is readableWCAG AA compliant (4.5:1 ratio)

Poor Contrast

❌ Text may be hard to readWarning shown, save still allowed

Popular combinations:

Background	Primary	Use Case
White (#ffffff)	Blue (#3b82f6)	Clean, professional
Light Gray (#f3f4f6)	Purple (#8b5cf6)	Soft, modern
Dark Gray (#1f2937)	Cyan (#06b6d4)	Dark mode style
Off-White (#fafafa)	Green (#10b981)	Subtle, friendly

Logo Settings

Replace the default “Status Page” text with your company logo.

Logo URL

Enter a direct link to your logo image. Requirements:

Format: PNG, JPG, SVG, WebP, or GIF
Recommended size: 200x60 pixels
Max file size: 2 MB
Aspect ratio: Horizontal logos work best

Where to host:

CDN Services
Cloud Storage
GitHub

Cloudinary:

https://res.cloudinary.com/your-account/image/upload/logo.png

Imgix:

https://your-domain.imgix.net/logo.png

CloudFront:

https://d1a2b3c4.cloudfront.net/logo.png

Testing your logo URL: Paste the URL in a browser to verify:

✅ Image loads correctly
✅ No authentication required
✅ HTTPS enabled (HTTP will show warnings)
✅ Correct dimensions and appearance

Logo Placement

Your logo appears in the top-left corner of your status page: Behavior:

Replaces default “Status Page” text
Links to your status page homepage
Scales automatically to fit header
Maintains aspect ratio (no stretching)

Preview: The theme settings show a live preview of how your logo will appear.

Logo Best Practices

Use Transparent Backgrounds

PNG or SVG with transparency works best:

Adapts to any background color
No white/colored box around logo
Professional appearance

Avoid: JPG with white background (looks bad on colored headers)

Optimize File Size

Keep logo file small for fast loading:

Use image compression tools
SVG is ideal (scales perfectly, small size)
Target < 100 KB for PNG/JPG

Tools:

TinyPNG (tinypng.com)
ImageOptim (imageoptim.com)
SVGO for SVG optimization

Horizontal Logos Work Best

Status page headers are horizontal:

200x60 px is ideal ratio
Avoid tall/vertical logos (they’ll be scaled down)
Consider creating a horizontal variant if needed

Test Contrast

Ensure logo is visible against your colors:

Light logo on dark primary color ✅
Dark logo on light primary color ✅
Medium logo on medium color ❌

Typography

Choose the font family for your entire status page.

Font Family

Select from professionally paired Google Fonts:

Available Fonts
Font Characteristics

Inter (Default) - Modern, excellent readability
Roboto - Clean, widely used
Open Sans - Friendly, approachable
Lato - Warm, professional
Montserrat - Geometric, contemporary
Poppins - Playful, rounded

How it’s applied: The selected font applies to:

All headings (H1-H6)
Body text and paragraphs
Buttons and navigation
Tables and lists
Timestamps and labels

Font Loading: Google Fonts are loaded automatically:

No manual configuration needed
Cached by browsers for performance
Fallback to system fonts if load fails

Choosing the Right Font

Corporate/Enterprise

Recommended:

Inter
Lato
Open Sans

Professional and trustworthy

Startup/Tech

Recommended:

Poppins
Montserrat
Inter

Modern and innovative

SaaS Products

Recommended:

Inter
Roboto
Open Sans

Clean and functional

Creative/Agency

Recommended:

Montserrat
Poppins
Lato

Unique and expressive

Preview & Testing

Real-Time Preview

As you customize, see changes instantly: Preview panel shows:

Your logo in header
Primary color applied to buttons
Background color on page
Typography in headings and text
Sample status items

Test in preview:

Click buttons to see hover states
Check text readability
Verify logo visibility
Ensure colors work together

View on Live Page

Click View Live Page to see your theme on the actual status page:

Make Changes

Adjust colors, logo, or font in theme settings

Save Changes

Click Save to apply theme

Open Live Page

Click “View Live Page” button or visit your status page URL

Test on Devices

Check appearance on desktop, tablet, and mobile

Saving Changes

Save Behavior

When you save:

Theme applies immediately to live status page
No rebuild or redeployment needed
Changes cached for 5 minutes
Visitors may see old theme briefly (cache expiry)

Force refresh for visitors: If urgent, visitors can force refresh:

Windows/Linux: Ctrl + Shift + R
Mac: Cmd + Shift + R

Validation

Before saving, the system validates:

Color Format

Valid hex codes (#RRGGBB)

Logo URL

Valid HTTPS URL format

Contrast Ratio

Warns if text hard to read

Font Selection

Valid font family chosen

Advanced CSS (Stack Plan Only)

Stack Plan Exclusive: Custom CSS is only available on Stack plan. Upgrade to Stack for full control.

Custom CSS Editor

Write custom CSS to completely customize your status page appearance: What you can customize:

Any element styling
Responsive breakpoints
Hover/focus states
Animations and transitions
Layout modifications

CSS editor features:

Syntax highlighting
Auto-completion
Error detection
Live preview

Example CSS:

/* Custom header styling */
.status-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

/* Rounded status indicators */
.status-indicator {
  border-radius: 50%;
  width: 16px;
  height: 16px;
}

/* Custom card shadows */
.status-card {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.status-card:hover {
  transform: translateY(-2px);
}

Custom CSS can break your status page if not written carefully. Test thoroughly before deploying.

Troubleshooting

Logo not showing

Possible causes:

URL is incorrect or image moved
Image requires authentication
CORS policy blocking image
Image format not supported

Solutions:

Test URL in browser (should load image directly)
Ensure public read access
Use CDN that allows cross-origin requests
Try different image host

Colors not saving

Issue: Color changes don’t persist after save.Solutions:

Check if you have Team/Stack plan
Verify valid hex codes (6 characters)
Clear browser cache
Try different browser
Contact support if issue persists

Theme looks different on mobile

Issue: Colors or layout don’t match desktop.Explanation: This is normal - responsive design adjusts for mobile screens.To verify:

Use browser dev tools mobile view
Test on actual mobile device
Check if specific CSS needed (Stack plan)

Font not loading

Issue: Selected font doesn’t appear, shows system font instead.Possible causes:

Google Fonts blocked (corporate firewall)
Browser extension blocking fonts
Slow internet connection

Solutions:

Test on different network
Disable browser extensions
Wait for font to load (usually < 1 second)
Font fallback to system font is normal behavior

Best Practices

Match Your Brand

Use colors and fonts consistent with your main website

Test Readability

Ensure text is easy to read on all devices

Keep It Simple

Avoid too many colors or complex designs

Optimize Logo

Small file size for fast loading

Check Contrast

WCAG AA compliance for accessibility

Test on Mobile

Verify appearance on small screens

Next Steps

Display Settings

Configure refresh intervals and data visibility

Custom Domain

Use your own domain for professional branding

Getting Started

Monitoring

Alerts

WordPress Agent

Troubleshooting

​Plan Requirements

​What’s Included by Plan

​Color Customization

​Primary Color

​Background Color

Good Contrast

Poor Contrast

​Logo Settings

​Logo URL

​Logo Placement

​Logo Best Practices

​Typography

​Font Family

​Choosing the Right Font

Corporate/Enterprise

Startup/Tech

SaaS Products

Creative/Agency

​Preview & Testing

​Real-Time Preview

​View on Live Page

​Saving Changes

​Save Behavior

​Validation

Color Format

Logo URL

Contrast Ratio

Font Selection

​Advanced CSS (Stack Plan Only)

​Custom CSS Editor

​Troubleshooting

​Best Practices

Match Your Brand

Test Readability

Keep It Simple

Optimize Logo

Check Contrast

Test on Mobile

​Next Steps

Display Settings

Custom Domain

Plan Requirements

What’s Included by Plan

Color Customization

Primary Color

Background Color

Logo Settings

Logo URL

Logo Placement

Logo Best Practices

Typography

Font Family

Choosing the Right Font

Preview & Testing

Real-Time Preview

View on Live Page

Saving Changes

Save Behavior

Validation

Advanced CSS (Stack Plan Only)

Custom CSS Editor

Troubleshooting

Best Practices

Next Steps