Widget custom CSS theming

Custom CSS theming for widget

Advanced customisation of widget appearance using CSS variables. Available on Pro and Business plans.

CSS variables you can override

--certorix-primary: #1a3a5c;
--certorix-primary-hover: #0f2a45;
--certorix-text-header: #ffffff;
--certorix-text-body: #1a1a1a;
--certorix-text-muted: #666666;
--certorix-border: #e8e8e8;
--certorix-background: #ffffff;
--certorix-success: #1a5c3a;
--certorix-error: #7a1a1a;
--certorix-warning: #c8960c;
--certorix-font-family: system-ui, -apple-system, sans-serif;
--certorix-border-radius: 8px;
--certorix-box-shadow: 0 4px 12px rgba(0,0,0,0.1);

Applying custom CSS

Add a <style> block after the widget embed snippet:

<style>
  .certorix-widget {
    --certorix-primary: #ff6600;
    --certorix-border-radius: 12px;
    --certorix-font-family: 'Inter', sans-serif;
  }
</style>

Deep customisation with CSS classes

The widget DOM uses stable class names for advanced theming:

• .certorix-widget – Root container
• .certorix-header – Header bar (logo, title, close button)
• .certorix-node-question – Question node container
• .certorix-node-input – Input node container
• .certorix-node-solution – Solution node container
• .certorix-node-result – Result node with fact card
• .certorix-answers – List of answer options
• .certorix-continue – Continue button
• .certorix-contact-form – Contact form
• .certorix-vnt-seal – VNT verification seal

Example: custom button styling

.certorix-widget .certorix-continue {
  background: linear-gradient(135deg, #ff6600, #ff3300);
  border: none;
  text-transform: uppercase;
  font-weight: bold;
}

Responsive overrides

@media (max-width: 600px) {
  .certorix-widget {
    --certorix-border-radius: 4px;
  }
  .certorix-header {
    padding: 8px;
  }
}

Important notes

• Custom CSS applies only after the widget loads (no flash of unstyled content if you put CSS before widget script).
• Class names may change in future updates. Test after each update.
• For major rebranding, use the built‑in theming options first (primary color, logo, etc.). Use custom CSS for fine‑tuning only.