Dashboard Customization

Comprehensive guide to customizing dashboard appearance, branding, domains, and layout options for professional status communication.

Dashboard customization allows you to create professional, branded status displays that align with your organization’s visual identity and communication needs.

URL and Domain Configuration

Default Dashboard URLs

Every dashboard starts with a unique, randomly generated URL:

# Example
https://a1b2c3d4-e5f6-7890-abcd-ef1234567890.checkly-dashboards.com

You can also use a custom subdomain to make your dashboard more recognizable.

Custom subdomains must be unique across all Checkly users. Choose something specific to your organization to avoid conflicts.

Full Custom Domain Configuration

Use your own domain for maximum branding control and professional appearance:

1. Domain Configuration

   Add your custom domain in the dashboard settings

2. DNS Setup

   Create the required DNS records at your domain provider

3. Domain Verification

   Complete domain verification if required by Checkly

4. SSL Certificate

   Automatic SSL certificate provisioning and renewal

5. Go Live

   Dashboard becomes accessible at your custom domain

Required DNS Records

# CNAME Record (required)
Type: CNAME
Name: status (or your chosen subdomain)
Value: checkly-dashboards.com
TTL: 3600 (or your domain provider's default)

# TXT Record (if domain verification required)
Type: TXT
Name: _checkly-domain-verification.status
Value: [Verification code provided by Checkly]
TTL: 3600 (or your domain provider's default)

DNS changes can take up to 24-48 hours to propagate globally. Plan custom domain setup accordingly if you have time-sensitive launch requirements.

Look and Feel

Logo

Upload your brand logo to personalize the dashboard header. The logo image supports PNG, JPG, and SVG formats with a maximum size of 1024px×1024px.

Logo Link

Add a clickable destination URL for your logo. When visitors click the logo, they’ll be redirected to your specified website (typically your company homepage).

Favicon

Set a custom favicon for browser tabs and bookmarks. The favicon should be 64px×64px and in PNG, ICO, or SVG format for optimal display across browsers.

Auto Paginate

Automatically switch between dashboard pages when you have multiple pages of checks. Configure the timing interval (1 minute default) and number of checks displayed per page (15 default).

Auto Refresh

Set automatic dashboard refresh intervals to keep status information current. Choose from 1 minute, 5 minutes, or 10 minutes based on your monitoring needs.

Show Header

Control whether the dashboard displays the header section containing your title, description, and logo. Useful for clean, minimal status displays.

Show Check Run Links

Enable or disable clickable links on check results that allow viewers to see detailed check run information and logs.

Metrics

Display performance metrics on your dashboard:

• Show p99: Display 99th percentile response time metrics
• Show p95: Display 95th percentile response time metrics

Advanced CSS Customization

CSS Editor and Tools

For Team and Enterprise plans, unlock complete design control:

1. Access CSS Editor

   Navigate to the Look & Feel section and open the CSS editor

2. Edit Styles

   Modify CSS in the editor to achieve desired appearance

3. Save and Test

   Save changes and reload dashboard to preview styling

CSS Classes

The following table lists the CSS classes available for customizing your dashboard appearance:

Name	Description	Class Name
Dashboard header	Main header container with logo and title	.header
Logo	Company logo display area	.logo
Status summary	Overall status overview section	.status-summary
Status passing	Green status indicator styling	.status-summary--passing
Status failing	Red status indicator styling	.status-summary--failing
Main content	Primary dashboard content area	.main
Incidents summary	Incident overview section	.incidents-summary
Check	Individual check card container	.check
Check result	Check status result display	.check__result
Passing check	Green check status styling	.check__result--passing
Failing check	Red check status styling	.check__result--failure
Degraded check	Yellow/orange degraded status styling	.check__result--degraded
Check metrics	Performance metrics display area	.check__metrics
Check list	Container for all check cards	.check-list
Empty check list	Styling for when no checks are present	.check-list--empty
Time range	Time period selector container	.period
Active time range	Currently selected time period	.period--active
Time range selector	Time period dropdown/selector	.period-selector
Pagination	Page navigation controls	.pagination
Incident	Individual incident display	.incident
Incidents page	Full incidents listing page	.incidents-page
Incidents detail page	Detailed incident information page	.incidents-detail-page
Incident list	Container for incident listings	.incident-list
Incident list date	Date headers in incident lists	.incident-list__date
Active incident list	Currently active incidents container	.active-incident-list
Active incident card	Individual active incident display	.active-incident
Major incident	High priority incident styling	.active-incident--major
Minor incident	Low priority incident styling	.active-incident--minor
Incident header	Incident title and metadata area	.active-incident__header
Metric	Performance metric display	.metric
Metric improved	Positive metric change styling	.metric--improved
Metric worsened	Negative metric change styling	.metric--worsened
Metric badge	Metric value indicator	.metric__badge
Dashboard footer	Footer area with links and branding	.footer
Error 500	Server error page styling	.error-500
Error 400	Client error page styling	.error-400
Login background	Login page background area	.login-background
Login box	Login form container	.login-box
Login input	Login form input fields	.login-input
Login button	Primary login button	.login-button
Login social button	Social login option buttons	.login-social-button
Logout button	User logout button	.logout-button
Logout icon	Logout button icon	.logout-button__icon

Responsive Design Considerations

Ensure your dashboard works well across different screen sizes and devices:

/* Responsive design example */
/* Mobile optimization */
@media (max-width: 768px) {
  .dashboard-header {
    padding: 1rem;
    text-align: center;
  }
  
  .check-card {
    margin-bottom: 0.5rem;
    padding: 1rem;
  }
  
  .dashboard-main {
    padding: 1rem;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  .check-card {
    flex: 1 1 calc(50% - 1rem);
  }
}

/* Desktop optimization */
@media (min-width: 1025px) {
  .check-card {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

/* Large display optimization */
@media (min-width: 1440px) {
  .dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
  }
}

Extensive CSS customization can sometimes interfere with dashboard functionality. Test thoroughly after making styling changes, especially for interactive elements and responsive behavior.

Custom Theme Examples

Professional Corporate Theme

Clean, corporate styling for business environments:

/* Corporate theme example */
.dashboard-header {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dashboard-main {
  background: #f8fafc;
  padding: 2rem;
}

.check-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.check-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.status-operational {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-radius: 6px;
  padding: 0.5rem 1rem;
}

Modern Dark Theme

Sleek, modern styling for technology-focused organizations:

/* Modern dark theme example */
.dashboard-container {
  background: #0f172a;
  color: #f1f5f9;
  font-family: 'Inter', system-ui, sans-serif;
}

.dashboard-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-bottom: 1px solid #334155;
  padding: 2rem;
}

.check-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid #475569;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.check-card:hover {
  border-color: #64748b;
  transform: scale(1.02);
}

.status-operational {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 0 20px rgba(5, 150, 105, 0.3);
}

.status-failing {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
}

Start with the CSS boilerplate generator to understand the dashboard’s structure, then gradually customize elements to match your brand. Test changes frequently to ensure responsive behavior.