Customize the appearance of the Community Sidebar widget using custom attributes on the <legion-community-sidebar> element.
For an interactive customization experience with live preview, visit:
/widgets/community-sidebar/customize
1<legion-community-sidebar
2 title="Getting Started"
3 show-guidelines="true"
4 show-faqs="true"
5 show-tutorials="true"
6 show-search-links="true"
7 community-url="/community"
8 guidelines-url="/guidelines"
9 faqs-url="/faqs"
10 theme="light"
11 api-url="https://your-domain.com"
12>
13</legion-community-sidebar>| Attribute | Type | Default | Description |
|---|---|---|---|
title | string | Getting Started | Widget title |
show-guidelines | boolean | true | Show community guidelines link |
show-faqs | boolean | true | Show FAQs link |
show-tutorials | boolean | true | Show video tutorial links |
show-search-links | boolean | true | Show member/group search links |
community-url | string | /community | Base URL for community pages |
guidelines-url | string | /guidelines | URL for guidelines page |
faqs-url | string | /faqs | URL for FAQs page |
theme | string | light | "light" or "dark" |
api-url | string | origin | Your deployment URL |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
sidebar-primary-color | --sidebar-primary-color | #228be6 | Primary accent color |
sidebar-background-color | --sidebar-background-color | transparent | Container background |
sidebar-text-color | --sidebar-text-color | #1a1b1e | Primary text color |
sidebar-secondary-text-color | --sidebar-secondary-text-color | #868e96 | Secondary text |
sidebar-border-color | --sidebar-border-color | #dee2e6 | Border color |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
sidebar-card-bg | --sidebar-card-bg | #ffffff | Card background |
sidebar-card-radius | --sidebar-card-radius | 12px | Card radius |
sidebar-card-shadow | --sidebar-card-shadow | 0 2px 8px rgba(0,0,0,0.06) | Card shadow |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
sidebar-link-color | --sidebar-link-color | #1a1b1e | Link text color |
sidebar-link-hover-color | --sidebar-link-hover-color | #228be6 | Link hover color |
sidebar-icon-color | --sidebar-icon-color | #228be6 | Icon color |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
sidebar-section-bg | --sidebar-section-bg | #f8f9fa | Section bg hover |
sidebar-section-radius | --sidebar-section-radius | 8px | Section radius |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
sidebar-font-family | --sidebar-font-family | inherit | Font family |
sidebar-title-size | --sidebar-title-size | 18px | Title size |
sidebar-title-weight | --sidebar-title-weight | 700 | Title weight |
sidebar-link-size | --sidebar-link-size | 14px | Link text size |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
sidebar-padding | --sidebar-padding | 16px | Container pad |
sidebar-gap | --sidebar-gap | 8px | Element gap |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
sidebar-transition-duration | --sidebar-transition-duration | 0.2s | Animation speed |
The sidebar includes these default links (configurable via URLs):
Getting Started Section:
Video Tutorials Section:
Looking for Something? Section:
1<legion-community-sidebar
2 title="Getting Started"
3 theme="dark"
4 api-url="https://your-domain.com"
5 sidebar-card-bg="#25262b"
6 sidebar-text-color="#c1c2c5"
7 sidebar-link-hover-color="#74c0fc"
8 sidebar-section-bg="#373a40"
9>
10</legion-community-sidebar>Add to your theme's header:
<script src="https://your-domain.com/js/community-sidebar-widget.js"></script>Use in any Custom HTML block:
1<legion-community-sidebar
2 title="Getting Started"
3 show-guidelines="true"
4 show-tutorials="true"
5 api-url="https://your-domain.com"
6 community-url="https://your-domain.com/community"
7>
8</legion-community-sidebar>