Custom CSS and advanced styling for coaching sites

Your coaching site is often the first impression a potential client gets of your brand. If the built-in design options aren't quite matching your vision — wrong font weight, button color that's slightly off, spacing that feels cramped — custom CSS gives you surgical control without touching a single template file. This guide covers everything you need to know about custom CSS and advanced styling for coaching sites built on Coachful.

TL;DR

• Custom CSS in Coachful is added through the Website → Settings → Custom Code panel.
• Use browser DevTools to identify the correct selectors before writing your rules.
• Target Coachful-specific class names and CSS custom properties (variables) for the most stable overrides.
• Test on mobile and desktop — coaching sites get significant mobile traffic from clients checking in on the go.
• Keep your CSS organized and commented so future edits don't break anything.

Where to Add Custom CSS in Coachful

Coachful's website builder gives you a dedicated place for custom code so your styles survive template updates. Here's how to get there:

1. Sign in to your Coachful dashboard at app.coachful.co/sign-in.
2. In the left sidebar, go to Website.
3. Click the Settings tab at the top of the website editor.
4. Scroll to the Custom Code section.
5. Paste your CSS inside the Head CSS field (wrapped in <style>...</style> tags) or the dedicated Custom CSS input if it exists for your tier.
6. Click Save and then Publish to push changes live.

Changes in the Custom Code panel are injected into every page of your coaching site automatically. If you want page-specific styles, use the per-page embed block instead — available in the page editor by adding a Code block to any section.

Finding the Right CSS Selectors

The hardest part of custom CSS isn't writing the rules — it's finding the correct selectors. Coachful pages are rendered with a combination of utility classes and scoped component classes. Here's the fastest workflow:

Using Chrome or Edge DevTools

1. Open your published coaching site (or preview mode) in Chrome or Edge.
2. Right-click the element you want to style — a button, heading, card, nav link — and choose Inspect.
3. In the Elements panel, look at the class names on the highlighted element. You'll see something like btn btn-primary or a longer scoped class such as hero-section__cta.
4. Copy the most specific class. Switch to the Styles panel to see what's already applied so you know which property to override.
5. Test your rule live in the Styles panel by clicking the + icon or editing an existing rule, then copy it to your Coachful Custom CSS field once it looks right.

CSS Custom Properties (Variables)

Coachful's design system uses CSS custom properties for brand colors, font stacks, spacing, and border radii. Overriding a variable cascades the change across every component that references it — far more efficient than targeting each element individually. Look for declarations on the :root selector in DevTools (filter the Styles panel by "var" to find them quickly).

A common pattern looks like this:

:root {
  --color-primary: #2563eb;       /* brand accent */
  --color-primary-hover: #1d4ed8;
  --font-heading: 'Playfair Display', serif;
  --radius-card: 12px;
}

Overriding just --color-primary will update every button, link, and highlight across your whole coaching site in one line. That's the power of working with the design system rather than against it.

Common Styling Customizations for Coaches

These are the tweaks coaches ask about most often. Each snippet is a starting point — adjust values to match your brand.

Changing the Primary Brand Color

:root {
  --color-primary: #d97706;
  --color-primary-hover: #b45309;
}

Custom Google Font

First, load the font in the Head HTML field:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&display=swap" rel="stylesheet">

Then apply it via a CSS variable override:

:root {
  --font-body: 'DM Sans', sans-serif;
  --font-heading: 'DM Sans', sans-serif;
}

Adjusting Button Styles

.btn-primary {
  border-radius: 50px;        /* pill-shaped */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 700;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

Hero Section Text Sizing

.hero-section h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.15;
}

.hero-section .hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.375rem);
  opacity: 0.85;
}

Card and Section Spacing

.program-card {
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s ease;
}

.program-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}

Tip: Coaches using Coachful's website builder can pair custom CSS with the drag-and-drop editor — no need to choose one or the other. Build your layout visually, then refine details with code.

Advanced Techniques: Animations and Interactions

Once your base styles are locked in, animations add polish and increase perceived quality. Keep motion subtle — coaching clients are often in a focused, professional headspace.

Fade-in on Scroll

Coachful pages support standard CSS animation. For a lightweight scroll-reveal effect without JavaScript, you can use the animation-timeline approach in modern browsers, or add a small <script> in your Custom Code that toggles an .is-visible class using an IntersectionObserver:

/* Default hidden state */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Triggered by JS adding .is-visible */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

Then in the Body JS field:

<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('is-visible'); });
  }, { threshold: 0.15 });
  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>

Add the reveal class to any section wrapper using the element's CSS Class field in the page editor.

Sticky Navigation Styling

nav.site-nav.is-sticky {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

Mobile-First Responsive Overrides

Coaching clients book sessions, check program progress, and message you from their phones constantly. Any custom CSS that looks great on a 1440px monitor needs to work at 390px too. Use min-width media queries (mobile-first) rather than overriding desktop styles downward:

/* Base styles (mobile) */
.pricing-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .pricing-grid {
    flex-direction: row;
    gap: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .pricing-grid {
    gap: 2.5rem;
  }
}

To preview your coaching site on mobile without leaving your desk, use Chrome DevTools' device toolbar (Ctrl+Shift+M / Cmd+Shift+M) or Coachful's built-in Preview → Mobile toggle in the website editor.

Pro tip: Coachful's platform is also available as a progressive web app and native mobile app for clients. Styles you apply to your public-facing coaching site are separate from the in-app client experience, so you can go bold on the marketing site without worrying about the session interface.

Working with Custom Domains and SSL

If you've connected a custom domain (e.g., coach.yourbrand.com), your CSS applies identically — Coachful handles SSL automatically so there are no mixed-content issues with fonts or external stylesheet imports. Keep external font and icon imports on HTTPS URLs and you're good.

One edge case: if your custom domain uses a proxy (Cloudflare in proxy mode, for example), aggressive HTML minification can occasionally strip whitespace inside <style> blocks. If your CSS stops working after a DNS change, temporarily pause Cloudflare's proxy ("DNS only" mode) to isolate the issue.

Troubleshooting Common CSS Issues

My styles aren't applying — specificity war

Coachful's component styles are sometimes scoped or have higher specificity than a single class selector. If your rule is being overridden, increase specificity by chaining a parent selector: .site-wrapper .btn-primary { ... }. Avoid !important except as a last resort — it makes future debugging painful.

Fonts aren't loading

Check that your <link> tag is in the Head HTML field, not the CSS field. CSS fields only accept valid CSS — an HTML tag placed there will silently fail. Also verify the font family name matches exactly, including capitalization: 'DM Sans' not 'dm sans'.

Changes appear in preview but not on the live site

You must click Publish after saving. Preview mode renders your saved draft; the live site reflects the last published version. If you've published and still see the old styles, hard-refresh the browser (Ctrl+Shift+R / Cmd+Shift+R) to bypass the cache.

CSS breaks the mobile layout

Fixed widths are the most common culprit. Replace width: 600px with width: min(600px, 100%) or max-width: 600px; width: 100% so elements shrink gracefully on small screens.

Animations cause layout shift

Only animate transform and opacity. Animating margin, padding, height, or width triggers layout recalculations and can make your coaching site feel janky, especially on lower-end Android devices.

Custom CSS conflicts with website builder updates

When Coachful updates the website builder, class names occasionally change. Use the most semantic, stable selectors available (CSS variables and element + BEM class combinations) rather than deeply nested or auto-generated utility classes. Adding a comment like /* Last verified: 2024-Q4 */ helps you audit styles periodically.

Organizing Your CSS for Long-Term Maintainability

A coaching site evolves — you'll add landing pages, new programs, and seasonal offers. Keep your Custom CSS field readable with a simple structure:

/* =====================
   1. CSS Variables
   ===================== */

/* =====================
   2. Typography
   ===================== */

/* =====================
   3. Buttons & CTAs
   ===================== */

/* =====================
   4. Layout & Sections
   ===================== */

/* =====================
   5. Cards & Components
   ===================== */

/* =====================
   6. Animations
   ===================== */

/* =====================
   7. Responsive overrides
   ===================== */

Keep a local backup of your CSS in a .css file in a private GitHub repo or even a Google Doc. The Custom Code field doesn't have version history, so if you accidentally delete something, you'll thank yourself for having a copy.

Ready to Build a Coaching Site That Stands Out?

Custom CSS transforms a good coaching site into a remarkable one — it's the difference between "built on a template" and "this coach means business." Combined with Coachful's website builder, scheduling, programs, and Stripe-powered billing, you have everything you need to attract, convert, and retain clients from a single platform. No patchwork of tools, no dev agency required.

If you're not on Coachful yet, start your free trial and have a branded coaching site live today. Already have a workspace? Sign in and head to Website → Settings → Custom Code to put these techniques to work right now. For more guides on getting the most from your Coachful site, browse the full knowledge base.