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)
-
Pelcro scopes all user interface Every component lives under
.pelcro-root
and many nodes havepelcro-…
classes/IDs (e.g.,.pelcro-link
,.pelcro-button-solid
,#pelcro-login-view
). -
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
). -
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
)
!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
- Inspect the element → Styles → confirm your rule is last/winning.
- If crossed out, increase specificity (e.g., add a parent like
#pelcro-app
) or move your stylesheet later. - Check the Computed tab for final values (color, font, spacing).
- Test interactive states (
:hover
,:focus
,:disabled
) and modal layers.
Example

overriding default styles
Updated 9 days ago