Customize the appearance of the Community Header widget using custom attributes on the <legion-community-header> element.
🎨 Visual Customizer
For an interactive customization experience with live preview, visit:
/widgets/community-header/customize
Quick Start
1<legion-community-header
2 title="Beauty Insider Community"
3 show-search="true"
4 show-stats="true"
5 show-online="true"
6 community-url="/community"
7 theme="light"
8 api-url="https://your-domain.com"
9 header-primary-color="#228be6"
10>
11</legion-community-header>
Core Attributes
| Attribute | Type | Default | Description |
|---|
title | string | Community | Community title text |
show-search | boolean | true | Show search input |
show-stats | boolean | true | Show member/post count stats |
show-online | boolean | true | Show "Online now" indicator |
community-url | string | - | URL for search redirect |
theme | string | light | "light" or "dark" |
api-url | string | origin | Your deployment URL |
CSS Theming Attributes
Container Theming
| Attribute | CSS Variable | Default | Description |
|---|
header-primary-color | --header-primary-color | #228be6 | Primary accent color |
header-background-color | --header-background-color | #ffffff | Container background |
header-text-color | --header-text-color | #1a1b1e | Primary text color |
header-secondary-text-color | --header-secondary-text-color | #868e96 | Secondary text |
header-border-color | --header-border-color | #dee2e6 | Border color |
Search Theming
| Attribute | CSS Variable | Default | Description |
|---|
header-search-bg | --header-search-bg | #f8f9fa | Search input bg |
header-search-border | --header-search-border | #dee2e6 | Search border |
header-search-radius | --header-search-radius | 8px | Search radius |
Stat Badges
| Attribute | CSS Variable | Default | Description |
|---|
header-stat-bg | --header-stat-bg | #f8f9fa | Stat badge bg |
header-stat-radius | --header-stat-radius | 8px | Stat badge radius |
Typography
| Attribute | CSS Variable | Default | Description |
|---|
header-font-family | --header-font-family | inherit | Font family |
header-title-size | --header-title-size | 24px | Title size |
header-title-weight | --header-title-weight | 700 | Title weight |
header-stat-size | --header-stat-size | 14px | Stat text size |
header-stat-label-size | --header-stat-label-size | 12px | Stat label size |
Layout
| Attribute | CSS Variable | Default | Description |
|---|
header-padding | --header-padding | 16px | Container pad |
header-gap | --header-gap | 16px | Element gap |
Animations
| Attribute | CSS Variable | Default | Description |
|---|
header-transition-duration | --header-transition-duration | 0.2s | Animation speed |
Search Behavior
When a user enters a search query and presses Enter, the widget opens community-url with a search query parameter:
https://your-domain.com/community?search=user+query
Dark Theme Example
1<legion-community-header
2 title="Community"
3 theme="dark"
4 api-url="https://your-domain.com"
5 header-background-color="#1a1b1e"
6 header-text-color="#c1c2c5"
7 header-search-bg="#25262b"
8 header-stat-bg="#25262b"
9>
10</legion-community-header>
Branded Example
1<legion-community-header
2 title="Our Community"
3 theme="light"
4 api-url="https://your-domain.com"
5 header-primary-color="#e91e63"
6 header-title-size="28px"
7 header-background-color="#fce4ec"
8>
9</legion-community-header>
WordPress Integration
Add to your theme's header:
<script src="https://your-domain.com/js/community-header-widget.js"></script>
Use in any Custom HTML block:
1<legion-community-header
2 title="Community"
3 show-search="true"
4 show-stats="true"
5 api-url="https://your-domain.com"
6>
7</legion-community-header>