CSS Customization Guide

Introduction

Every element in VeriSelf has a stable veriself-* CSS class for admin customization. Add custom CSS via Appearance → Customize → Additional CSS or your theme’s custom CSS panel.

Gate Popup Classes

  • .veriself-gate-wrapper — outer overlay container
  • .veriself-gate-wrapper.in_content — inline mode (no backdrop)
  • .veriself-gate-card — the main card (has data-mode and data-ai-first attributes)
  • .veriself-gate-error — error banner (hidden by default)
  • .veriself-gate-icon / .veriself-gate-logo — top icon
  • .veriself-gate-headline — h2 title
  • .veriself-gate-subtext — subtitle paragraph
  • .veriself-gate-secure — “Secure & Private” line
  • .veriself-gate-content — main content wrapper
  • .veriself-gate-dob-section — DOB input area
  • .veriself-gate-dob-month / .veriself-gate-dob-day / .veriself-gate-dob-year — individual inputs
  • .veriself-gate-ai-section — AI verification container
  • .veriself-gate-verify-btn — main verify button
  • .veriself-gate-age-req — age requirement text
  • .veriself-gate-not-stored — “not stored” disclaimer
  • .veriself-gate-consent — consent checkbox
  • .veriself-gate-remember — remember me checkbox
  • .veriself-gate-btn-ai — AI alternative toggle button
  • .veriself-gate-footer — privacy policy link

Camera Widget Classes

  • .veriself-verify — widget container
  • .veriself-container — inner wrapper
  • .veriself-video-wrapper — video + overlay wrapper
  • .veriself-video — the <video> element
  • .veriself-overlay — face outline overlay
  • .veriself-outline-img — the SVG outline image
  • .veriself-hint — instruction text
  • .veriself-btn-capture — capture button
  • .veriself-result — result container
  • .veriself-result-success / .veriself-result-fail — state classes

Verified Card Classes

  • .veriself-verified — verified status card
  • .veriself-verified-icon — checkmark icon
  • .veriself-verified-title — “Identity Verified” text
  • .veriself-verified-details — age/gender/location list
  • .veriself-verified-date — verification date
  • .veriself-verified-lockout — re-verification countdown
  • .veriself-verified-lockout-active — when lockout is active

Customizer CSS Variables

Override these variables in Additional CSS to theme the widget and gate popup:

.veriself-verify, .veriself-gate-wrapper {
  --veriself-accent: #059669;
  --veriself-overlay-bg: #0F2B46;
  --veriself-overlay-opacity: 0.7;
  --veriself-text: #ffffff;
  --veriself-btn-bg: #059669;
  --veriself-btn-text: #ffffff;
  --veriself-timer: #F59E0B;
  --veriself-success: #059669;
  --veriself-error: #dc2626;
  --veriself-headline-size: 1.5rem;
  --veriself-subtext-size: 1rem;
  --veriself-body-size: 0.9rem;
  --veriself-button-size: 1rem;
  --veriself-card-padding: 2rem;
  --veriself-card-radius: 12px;
  --veriself-btn-padding: 12px 24px;
  --veriself-dob-gap: 8px;
}

Example Customizations

  • Change accent color to red: --veriself-accent: #dc2626;
  • Remove border radius: --veriself-card-radius: 0;
  • Make card smaller on mobile: add a media query
  • Hide “Remember me”: .veriself-gate-remember { display: none; }
  • Hide watermark: .veriself-gate-footer { display: none; }