Customize the appearance of the Community Posts widget using custom attributes on the <legion-community-posts> element.
🎨 Visual Customizer
For an interactive customization experience with live preview, visit:
/widgets/community-posts/customize
Quick Start
1<legion-community-posts
2 page-size="10"
3 filter="recent"
4 show-filters="true"
5 show-actions="true"
6 theme="light"
7 height="800px"
8 api-url="https://your-domain.com"
9 posts-primary-color="#228be6"
10 posts-card-radius="12px"
11>
12</legion-community-posts>
Core Attributes
| Attribute | Type | Default | Description |
|---|
page-size | number | 10 | Posts per page (5-50) |
filter | string | recent | "recent", "popular", or "unanswered" |
channel-id | string | - | Optional channel UUID to filter posts |
show-filters | boolean | true | Show filter tabs |
show-actions | boolean | true | Show Support and Start conversation buttons |
auth-token | string | - | JWT token for authenticated actions |
user-id | string | - | Current user ID for reactions |
username | string | - | Current user display name |
theme | string | light | "light" or "dark" |
height | string | 800px | Widget height |
api-url | string | origin | Your deployment URL |
CSS Theming Attributes
Container Theming
| Attribute | CSS Variable | Default | Description |
|---|
posts-primary-color | --posts-primary-color | #228be6 | Primary accent color |
posts-background-color | --posts-background-color | transparent | Container background |
posts-text-color | --posts-text-color | #1a1b1e | Primary text color |
posts-secondary-text-color | --posts-secondary-text-color | #868e96 | Secondary text |
posts-border-color | --posts-border-color | #dee2e6 | Border color |
Card Theming
| Attribute | CSS Variable | Default | Description |
|---|
posts-card-bg | --posts-card-bg | #ffffff | Card background |
posts-card-radius | --posts-card-radius | 12px | Card radius |
posts-card-shadow | --posts-card-shadow | 0 2px 8px rgba(0,0,0,0.06) | Card shadow |
posts-card-padding | --posts-card-padding | 16px | Card padding |
Avatar Theming
| Attribute | CSS Variable | Default | Description |
|---|
posts-avatar-size | --posts-avatar-size | 44px | Avatar size |
posts-avatar-radius | --posts-avatar-radius | 50% | Avatar radius |
Typography
| Attribute | CSS Variable | Default | Description |
|---|
posts-font-family | --posts-font-family | inherit | Font family |
posts-title-size | --posts-title-size | 14px | Title text size |
posts-title-weight | --posts-title-weight | 600 | Title weight |
posts-body-size | --posts-body-size | 14px | Body text size |
posts-meta-size | --posts-meta-size | 12px | Meta text size |
| Attribute | CSS Variable | Default | Description |
|---|
posts-tag-bg | --posts-tag-bg | #e7f5ff | Tag bg color |
posts-tag-color | --posts-tag-color | #1c7ed6 | Tag text |
posts-tag-radius | --posts-tag-radius | 4px | Tag radius |
Actions
| Attribute | CSS Variable | Default | Description |
|---|
posts-action-bg | --posts-action-bg | transparent | Action btn bg |
posts-action-color | --posts-action-color | #868e96 | Action btn color |
posts-action-hover-bg | --posts-action-hover-bg | #f1f3f5 | Hover background |
posts-like-color | --posts-like-color | #fa5252 | Active like color |
Animations
| Attribute | CSS Variable | Default | Description |
|---|
posts-transition-duration | --posts-transition-duration | 0.2s | Animation speed |
posts-gap | --posts-gap | 16px | Post gap |
Dark Theme Example
1<legion-community-posts
2 page-size="10"
3 theme="dark"
4 api-url="https://your-domain.com"
5 posts-card-bg="#25262b"
6 posts-text-color="#c1c2c5"
7 posts-border-color="#373a40"
8>
9</legion-community-posts>
Authenticated Example
1<legion-community-posts
2 page-size="15"
3 filter="popular"
4 theme="light"
5 api-url="https://your-domain.com"
6 auth-token="eyJhbGciOiJIUzI1NiIs..."
7 user-id="user_12345"
8 username="JaneDoe"
9>
10</legion-community-posts>
WordPress Integration
Add to your theme's header:
<script src="https://your-domain.com/js/community-posts-widget.js"></script>
Use in any Custom HTML block:
1<legion-community-posts
2 page-size="10"
3 theme="light"
4 height="600px"
5 api-url="https://your-domain.com"
6>
7</legion-community-posts>