Skip to main content
Make your portal uniquely yours with custom branding, colors, and styling. Create a seamless experience that matches your product. [image]

​
Quick Customization

​
Brand Assets

Upload in Portal → Settings → Branding: Logo
  • Format: PNG or SVG recommended
  • Size: 200x200px minimum
  • Appears in header and meta tags
Favicon
  • Format: PNG or ICO
  • Size: 32x32px
  • Shows in browser tabs
Cover Image
  • Format: JPG or PNG
  • Size: 1200x630px (social share size)
  • Used for social media previews
[image]

​
Color Scheme

Customize your portal colors: Primary Color
  • Buttons and links
  • Category badges
  • Hover states
Background Colors
  • Main background
  • Card backgrounds
  • Header/footer areas
Text Colors
  • Headings
  • Body text
  • Muted text
/* Example color values */
--primary: #5850ec;
--background: #ffffff;
--card-bg: #f9fafb;
--text-primary: #111827;
--text-secondary: #6b7280;
[image]

​
Advanced Styling

​
Custom CSS

Add custom styles in Portal → Settings → Custom CSS: 
/* Customize fonts */
.portal-content {
  font-family: 'Inter', sans-serif;
}

/* Round corners more */
.announcement-card {
  border-radius: 16px;
}

/* Custom header style */
.portal-header {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
}

/* Category badge colors */
.category-new {
  background-color: #10b981;
  color: white;
}
Use browser DevTools to inspect element classes and test styles before applying.

​
Typography

Font Options
  • System fonts (fastest)
  • Google Fonts via CSS
  • Custom fonts via CSS
/* Google Fonts example */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.portal-content {
  font-family: 'Inter', -apple-system, sans-serif;
}
[image]

​
Layout Options

​
Header Styles

Minimal
  • Logo only
  • Clean and simple
  • More content space
Standard
  • Logo + navigation
  • Subscribe button
  • Search bar
Custom
  • Add via Custom CSS
  • Sticky headers
  • Mega menus

​
Content Width

/* Wider content area */
.portal-container {
  max-width: 1200px;
}

/* Narrow, focused reading */
.announcement-content {
  max-width: 680px;
  margin: 0 auto;
}
[image]

​
Component Styling

​
Announcement Cards

/* Card hover effects */
.announcement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Custom card borders */
.announcement-card {
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--primary);
}

​
Category Badges

/* Pill-style badges */
.category-badge {
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

​
Subscribe Form

/* Custom subscribe button */
.subscribe-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  font-weight: 600;
}
[image]

​
Dark Mode

​
Automatic Dark Mode

Enable in settings for system-based switching: 
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  .portal-content {
    --background: #0f172a;
    --text-primary: #f1f5f9;
    --card-bg: #1e293b;
  }
}

​
Manual Toggle

Add custom toggle with JavaScript: 
[data-theme="dark"] {
  --background: #0f172a;
  --text-primary: #f1f5f9;
}
[image]

​
Mobile Optimization

​
Responsive Design

/* Mobile-first adjustments */
@media (max-width: 640px) {
  .portal-header {
    padding: 16px;
  }
  
  .announcement-card {
    padding: 20px;
  }
  
  /* Stack elements on mobile */
  .announcement-meta {
    flex-direction: column;
    gap: 8px;
  }
}
Test your customizations on multiple devices. Use browser DevTools device emulation for quick testing.

​
Best Practices

Performance
  • Optimize images before upload
  • Use system fonts when possible
  • Minimize custom CSS
Accessibility
  • Maintain color contrast ratios
  • Don’t remove focus indicators
  • Test with keyboard navigation
Brand Consistency
  • Match your main website
  • Use brand color palette
  • Consistent typography
[image]

​
Examples & Inspiration

​
Minimal Tech

/* Clean, technical look */
--primary: #0969da;
--background: #ffffff;
--font-family: 'SF Mono', monospace;
border-radius: 0;

​
Playful SaaS

/* Friendly, colorful */
--primary: #8b5cf6;
--background: #faf5ff;
border-radius: 24px;
font-family: 'Poppins', sans-serif;

​
Enterprise

/* Professional, trustworthy */
--primary: #0f172a;
--background: #f8fafc;
font-family: -apple-system, sans-serif;
Always test customizations before publishing. Use preview mode to see changes without affecting live visitors.

​
Quick Tips

  1. Start small - Change colors first
  2. Use variables - Easier to maintain
  3. Preview often - Check all pages
  4. Get feedback - Ask teammates
  5. Keep it simple - Less is often more
Ready to make your portal beautiful? Start with colors and work your way up to advanced customizations.