Custom CSS

For advanced customization beyond branding settings, add custom CSS to your portal.

Adding Custom CSS

1. Go to Settings → Branding
2. Scroll to Custom CSS
3. Enter your CSS
4. Save changes

CSS applies immediately to your portal.

What You Can Customize

Custom CSS can modify:

• Colors and gradients
• Fonts and typography
• Spacing and layout
• Borders and shadows
• Animations

Example: Custom Accent Color

:root {
  --primary: #8b5cf6;
  --primary-hover: #7c3aed;
}

Example: Custom Fonts

body {
  font-family: 'IBM Plex Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'IBM Plex Serif', serif;
}

Example: Rounded Corners

.card {
  border-radius: 1rem;
}

button {
  border-radius: 9999px;
}

Example: Custom Button Style

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

Finding CSS Selectors

Use your browser's developer tools:

1. Right-click an element
2. Select "Inspect"
3. Find the class names
4. Target in your CSS

CSS Best Practices

Be Specific

Use specific selectors to avoid unintended changes:

/* Good */
.portal-header .logo { ... }

/* Too broad */
img { ... }

Test Thoroughly

Check your changes on:

• Homepage
• Post detail pages
• Roadmap
• Changelog
• Mobile views

Don't Break Functionality

Avoid hiding important UI elements or breaking interactive components.

Keep It Maintainable

Comment your CSS for future reference:

/* Custom brand gradient for CTA buttons */
.btn-primary { ... }

Limitations

Some limitations apply:

• Can't modify JavaScript behavior
• Can't add new HTML elements
• Changes only affect public portal (not admin dashboard)
• Very complex overrides may break with updates

Resetting Styles

To remove all custom CSS:

1. Go to Settings → Branding
2. Clear the Custom CSS field
3. Save

Portal returns to default styling.

Next: Team & Permissions