ChangelogGuidesRecipesAPI ReferenceRoadmap
HomeGuidesRecipesAPI ReferenceChangelog
ChangelogGuidesRecipesAPI ReferenceRoadmapSTART FREE TRIALSCHEDULE A DEMO
Guides
START FREE TRIALSCHEDULE A DEMO

Style Overrides

ℹ️

This page applies to Pelcro's Default UI only. If you're using the Pelcro headless integration (your own components, no Pelcro-rendered modals or dashboard), this page does not apply — your styling is fully under your control. Continue here only if you're using Pelcro's out-of-the-box login modal, plan-select modal, dashboard, etc.

How it Works (in 30 seconds)

  1. Pelcro scopes all user interface Every component lives under .pelcro-root and many nodes have pelcro-… classes/IDs (e.g., .pelcro-link, .pelcro-button-solid, #pelcro-login-view).

  2. You add CSS on your site In your global CSS or a <style> tag, write more specific selectors than the defaults (e.g., #pelcro-app .pelcro-root .pelcro-link beats .pelcro-link).

  3. Prefer specificity over !important — it's cleaner, predictable, and easier to maintain.

Modal IDs

Every Pelcro modal mounts with a stable id on its root element, following the pattern:

pelcro-modal-{viewId}

The {viewId} is the kebab-case key of the modal (e.g. login, plan-select, payment-method-update, subscription-cancel, qr-code). The dashboard shell itself uses pelcro-dashboard, and its open-trigger button uses pelcro-dashboard-open-button.

Use these IDs as reliable hooks for CSS overrides and automated tests — they are preserved across releases.

Examples:

/* Restyle only the login modal */
#pelcro-app #pelcro-modal-login .pelcro-button-solid {
  background-color: #002d7f;
}

/* Tighten the plan-select modal padding */
#pelcro-app #pelcro-modal-plan-select .pelcro-modal-body {
  padding: 1rem;
}

/* Customize the dashboard shell */
#pelcro-app #pelcro-dashboard {
  font-family: "Inter", sans-serif;
}

Overriding plc: Utility Classes

If you inspect Pelcro's UI in DevTools you'll see internal utility classes prefixed with plc:, for example plc:bg-white, plc:rounded-lg, plc:text-sm. These are Pelcro's internal styling utilities — you can target them directly, but the : character is special in CSS and must be escaped with a backslash.

Pattern:

/* The colon must be escaped — note the \ before the : */
#pelcro-app .pelcro-root .plc\:bg-white {
  background-color: #f8f9fa;
}

More examples:

/* Change the default white modal background */
#pelcro-app .plc\:bg-white {
  background-color: #fafafa;
}

/* Override rounded corners on cards/buttons */
#pelcro-app .plc\:rounded-lg {
  border-radius: 2px;
}

/* Adjust small text size */
#pelcro-app .plc\:text-sm {
  font-size: 0.9rem;
}

/* Combine with a modal id to scope the override to a single modal */
#pelcro-modal-plan-select .plc\:border-gray-200 {
  border-color: #d4d4d8;
}
💡

Tip: When you copy a class name from DevTools, your browser typically gives you the raw form (plc:bg-white). When you paste it into your CSS file, add a backslash before the colon (plc\:bg-white). If you write the selector without the escape, the rule silently does nothing.

Where to Put Your CSS

Add to your site's global stylesheet or your HTML <head>:

<style>
  /* Example: site-level overrides */
  #pelcro-app .pelcro-root {
    --plc-primary-hue: 210;
    --plc-primary-saturation: 100%;
    --plc-primary-lightness: 60%;
  }
</style>

Tip: Target within a container you control (e.g., #pelcro-app …) to avoid accidental bleed into non-Pelcro UI.

Specificity Playbook (no !important)

Use one (or combine) until your rule wins:

  • Add a parent

    #pelcro-app .pelcro-root .pelcro-link

  • Use the provided IDs/classes

    #pelcro-login-view .pelcro-input-field

  • Match states

    .pelcro-button-solid:hover
.pelcro-input-field:focus

  • Attribute or nth selectors if needed

    .pelcro-input-field[type="email"]
.pelcro-modal :is(h1,h2)

Common Targets (Copy & Paste)

/* Links */
#pelcro-app .pelcro-root .pelcro-link {
  color: #3399ff;
}
#pelcro-app .pelcro-root .pelcro-link:hover {
  color: #002d7f;
}

/* Buttons */
#pelcro-app .pelcro-root .pelcro-button-solid {
  background-color: #3399ff;
  --tw-ring-color: #50a6fd; /* Tailwind ring var override */
}
#pelcro-app .pelcro-root .pelcro-button-solid:hover {
  background-color: #002d7f;
}

/* Inputs */
#pelcro-app .pelcro-root .pelcro-input-field:focus {
  --tw-ring-color: #50a6fd;
}

/* Login view only */
#pelcro-app #pelcro-login-view .pelcro-input-label {
  font-weight: 600;
}

/* Typography & font */
#pelcro-app .pelcro-root {
  font-family: "Helvetica", Arial, sans-serif;
}

Colors via CSS Variables

Pelcro exposes color tokens you can redefine at .pelcro-root:

#pelcro-app .pelcro-root {
  --plc-primary-hue: 210;
  --plc-primary-saturation: 100%;
  --plc-primary-lightness: 60%;
}

Keeps your palette centralized and consistent.

⚠️

Scope warning: the SDK writes --plc-primary-hue/saturation/lightness to :root at boot from your site's primary color configured in the Pelcro admin. To avoid your CSS overrides being clobbered, either configure the primary color in the Pelcro admin, or set your overrides on a more specific selector than :root (the #pelcro-app .pelcro-root selector above already wins by specificity).

Load Order & Caching

  • Load your CSS after Pelcro's bundle so the cascade favors your rules.
  • Bust caches when testing (add a query string to your CSS URL).
  • If you use a site builder/CMS, ensure global styles are in <head> and not lazy-loaded after the UI opens.

Debug & Verify in DevTools

  1. Inspect the element → Styles → confirm your rule is last/winning.
  2. If crossed out, increase specificity (e.g., add a parent like #pelcro-app) or move your stylesheet later.
  3. Check the Computed tab for final values (color, font, spacing).
  4. Test interactive states (:hover, :focus, :disabled) and modal layers.
  5. When targeting a plc: utility class, confirm you escaped the colon — plc\:bg-white, not plc:bg-white.

Updated about 20 hours ago