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

# Customization

> Make your changelog match your brand

# Portal Customization

Customize your changelog portal to match your brand identity.

## Basic customization

Navigate to **Settings → Portal → Customize** to access these options:

### Logo

Upload your company logo to display in the portal header.

* **Recommended size:** 200x200px minimum
* **Formats:** PNG, JPG, SVG
* **Tips:** Use a square logo or one with transparent background

### Colors

| Setting               | Description                          |
| --------------------- | ------------------------------------ |
| **Primary color**     | Used for buttons, links, and accents |
| **Background color**  | Main page background                 |
| **Header background** | Portal header area                   |

<Tip>
  Use your brand's primary color for the best recognition. Make sure there's enough contrast for readability.
</Tip>

### Header content

Customize what appears in your portal header:

* **Title** — Main headline (e.g., "What's New" or "Changelog")
* **Description** — Subtitle text explaining your changelog
* **Show logo** — Toggle logo visibility
* **Show subscribe button** — Let users subscribe for email updates

## Advanced customization

### Custom CSS

For complete control, add custom CSS in **Settings → Portal → Customize → Custom CSS**.

```css theme={null}
/* Example: Change the post title font */
.post-title {
  font-family: 'Georgia', serif;
  font-size: 28px;
}

/* Example: Add a border to category badges */
.category-badge {
  border: 2px solid currentColor;
}

/* Example: Customize the header */
.portal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
```

<Warning>
  Custom CSS can break your portal if used incorrectly. Test changes carefully.
</Warning>

### Available CSS classes

| Class             | Element                |
| ----------------- | ---------------------- |
| `.portal-header`  | Header container       |
| `.portal-nav`     | Navigation area        |
| `.post-card`      | Post list item         |
| `.post-title`     | Post title             |
| `.post-content`   | Post body              |
| `.category-badge` | Category tag           |
| `.author-info`    | Author name and avatar |
| `.powered-by`     | Footer branding        |

## Preview changes

Use the **Preview** button to see your changes before saving. The preview opens in a new tab showing your live portal with unsaved changes applied.

## Examples

<CardGroup cols={2}>
  <Card title="Minimal">
    Clean white background, single accent color, hidden header description
  </Card>

  <Card title="Bold">
    Gradient header, large logo, vibrant category colors
  </Card>

  <Card title="Dark mode">
    Dark background with light text (via custom CSS)
  </Card>

  <Card title="On-brand">
    Full brand colors, custom fonts, matching your main site
  </Card>
</CardGroup>