> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usestellar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing Look & Feel

> Match your portal design to your brand

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

```css theme={null}
/* 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**:

```css theme={null}
/* 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;
}
```

<Info>
  Use browser DevTools to inspect element classes and test styles before applying.
</Info>

### Typography

**Font Options**

* System fonts (fastest)
* Google Fonts via CSS
* Custom fonts via CSS

```css theme={null}
/* 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

```css theme={null}
/* Wider content area */
.portal-container {
  max-width: 1200px;
}

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

\[image]

## Component Styling

### Announcement Cards

```css theme={null}
/* 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

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

### Subscribe Form

```css theme={null}
/* 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:

```css theme={null}
/* 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:

```css theme={null}
[data-theme="dark"] {
  --background: #0f172a;
  --text-primary: #f1f5f9;
}
```

\[image]

## Mobile Optimization

### Responsive Design

```css theme={null}
/* 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;
  }
}
```

<Tip>
  Test your customizations on multiple devices. Use browser DevTools device emulation for quick testing.
</Tip>

## 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

```css theme={null}
/* Clean, technical look */
--primary: #0969da;
--background: #ffffff;
--font-family: 'SF Mono', monospace;
border-radius: 0;
```

### Playful SaaS

```css theme={null}
/* Friendly, colorful */
--primary: #8b5cf6;
--background: #faf5ff;
border-radius: 24px;
font-family: 'Poppins', sans-serif;
```

### Enterprise

```css theme={null}
/* Professional, trustworthy */
--primary: #0f172a;
--background: #f8fafc;
font-family: -apple-system, sans-serif;
```

<Warning>
  Always test customizations before publishing. Use preview mode to see changes without affecting live visitors.
</Warning>

## 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.