Custom CSS

Basic Usage

Custom CSS lets you inject stylesheets that modify any page element. Use this for advanced styling changes that go beyond color and image branding.

Create a custom CSS rule:

  1. Select Custom from the toolbox
  2. Choose Custom Stylesheet as the rule type
  3. Enter your CSS code in the editor
  4. Optionally add a URL Filter to limit the rule to specific pages
  5. Save the rule

CSS Scoping

All custom CSS is automatically scoped to pages where demo mode is enabled. The extension adds [data-demohacks="true"] to the <html> element, ensuring your styles only apply during demos.

Example:

/* This will only apply when demo mode is active */
.header {
  background-color: #ff0000;
}

.button {
  border-radius: 8px;
}

Override Existing Styles

Use !important to override existing page styles:

.navbar {
  background-color: #155DFC !important;
  padding: 20px !important;
}

Advanced Examples

Hide elements with CSS:

.ads, .sidebar, .promo {
  display: none !important;
}

Modify typography:

body {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

Custom animations:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero {
  animation: fadeIn 0.5s ease-in;
}

Responsive adjustments:

@media (max-width: 768px) {
  .container {
    padding: 10px !important;
  }
}

Override CSS variables:

:root {
  --primary-color: #155DFC !important;
  --secondary-color: #00ff00 !important;
}

Multiple CSS Rules

You can create multiple custom CSS rules. All enabled rules are combined into a single stylesheet, so later rules can override earlier ones. Use URL filters to apply different styles to different pages.

Example setup:

  • Rule 1: Global styles (no URL filter)
  • Rule 2: Dashboard-specific styles (example.com/dashboard)
  • Rule 3: Settings page styles (example.com/settings)

Security

The extension validates CSS for security. Malicious patterns like keyloggers targeting password fields are blocked. Your CSS is sanitized before injection to prevent security issues.

How It Works

Custom CSS is injected as a <style> element in the page <head>. All enabled CSS rules are combined and normalized before injection. When demo mode is disabled, the stylesheet is removed.

Tips

  • Use browser DevTools to inspect elements and find the right selectors
  • Test CSS changes incrementally—start with simple rules and build up
  • Combine custom CSS with color branding rules for comprehensive styling
  • Use URL filters to create page-specific style variations
  • Toggle rules on/off to test different styling combinations
  • Remember that !important may be needed to override existing styles