Customization

Adding Custom CSS

March 11, 2026 docsadmin 3 min read

The Customizer covers most things, but eventually you’ll want a small visual change it doesn’t expose: a different shade of oxblood, more space between practice tiles, a tighter line-height in the body. This is where Custom CSS comes in.

Legal is built on CSS custom properties (variables). Most overrides take one or two lines because you’re targeting a variable, not chasing component classes. Knowing the variables is the unlock.

Where to put your custom CSS

Two places, in order of preference:

  1. Customizer → Additional CSS — for site-specific tweaks. Updates instantly. Survives theme updates. Recommended for most users.
  2. A child theme — for larger overrides or template changes. See Child Themes.

Avoid editing style.css directly. Theme updates will overwrite your changes.

The CSS variables you’ll override most often

Legal defines its design tokens in :root at the top of style.css. The most common overrides:

:root {
    /* Canvas */
    --lg-bg:             #fafaf7;   /* page background — bone */
    --lg-bg-card:        #ffffff;   /* card backgrounds */
    --lg-bg-soft:        #f3efe7;   /* soft band backgrounds */
    --lg-bg-dark:        #1a1a1a;   /* footer ink */

    /* Text */
    --lg-text:           #1a1a1a;
    --lg-text-muted:     #555555;
    --lg-text-soft:      #737373;
    --lg-text-faint:     #a0a0a0;

    /* Accent — oxblood */
    --lg-accent:         #5C1A1B;
    --lg-accent-dark:    #3f1011;

    /* Gold leaf — secondary accent */
    --lg-gold:           #B8923D;

    /* Borders */
    --lg-border:         #e8e2d5;
    --lg-border-strong:  #d6cfc0;

    /* Type */
    --lg-serif:          'Fraunces', Georgia, serif;
    --lg-sans:           'Inter', sans-serif;
    --lg-mono:           'JetBrains Mono', monospace;
}

Common overrides

Change the accent color from oxblood to navy

:root {
    --lg-accent:      #1e3a5f;
    --lg-accent-dark: #142a48;
}

That’s the whole change. Every italic accent, every CTA, every focus ring updates. You don’t need to chase individual selectors.

Soften the gold leaf to copper

:root {
    --lg-gold: #a7763a;
}

Switch to a different serif

If you have Cormorant Garamond loaded (or any other serif you’ve added via a font plugin):

:root {
    --lg-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
}

Tighten or loosen body line-height

body {
    line-height: 1.65; /* default is 1.7 */
}

Add more space between sections

.lg-section {
    padding: clamp(80px, 10vw, 160px) 0; /* default is 64-128 */
}

Hide the folio strip without disabling it

.lg-folio {
    display: none;
}

Change practice tiles from 3-up to 2-up on desktop

.lg-practice-grid {
    grid-template-columns: repeat(2, 1fr); /* default is repeat(3, 1fr) */
}

Round the retainer card more aggressively

.lg-retainer {
    border-radius: 16px; /* default is 8px */
}

Targeting specific elements

If you need to style something specific, use these top-level component classes as your hooks:

Class What it targets
.lg-hero Hero section
.lg-folio Folio strip under hero
.lg-marquee Credentials marquee
.lg-practice-tile Each practice tile
.lg-counsel-card Each counsel card
.lg-ledger Ledger section
.lg-testimony Testimony pull-quote
.lg-engage Engagement section
.lg-retainer Retainer card
.lg-footer Footer

Pro features use the lgpro- class prefix. For example:

  • .lgpro-watermark — the hero watermark
  • .lgpro-ornament — the § glyph
  • .lgpro-seal — the wax seal on the retainer card
  • .lgpro-cursor-dot, .lgpro-cursor-ring — the custom cursor
  • .lgpro-foot-counsel — the footer’s counsel-direct-lines column

For example, to make the wax seal larger:

.lgpro-seal {
    width: 96px;
    height: 96px;
}

What to avoid

  • Do not use !important liberally. Legal’s CSS uses very low specificity on purpose so your overrides win without it. If you need !important, you’re probably targeting the wrong selector.
  • Don’t override variables in component selectors. Always override at :root so the change cascades everywhere.
  • Don’t fight the design system. If you find yourself writing 200 lines of CSS, you probably want a different theme — or a child theme that takes over wholesale rather than patching at the edges.

For more drastic changes

If your customizations exceed about 100 lines of CSS, consider creating a child theme. The child theme can selectively replace specific Legal templates (like template-firm.php), define its own CSS variables file, and remain update-safe forever.

See Child Themes for the setup.

Leave a comment