Style Overrides: Add CSS Specificity

You can restyle Pelcro’s UI by loading your own CSS on your site and targeting the same elements with more specific selectors. Pelcro scopes all UI under .pelcro-root and exposes stable classes/IDs so you can override safely without !important.

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.

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 Tailwind-compatible.


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.

Example

516

overriding default styles