133 lines
4.8 KiB
Markdown
133 lines
4.8 KiB
Markdown
# Nyíltvilág Welcome Banner - Discourse Theme Component
|
|
|
|
A customizable welcome banner theme component for Discourse forums, designed for the Nyíltvilág Hungarian tech community.
|
|
|
|
## Features
|
|
|
|
- 🎨 **Fully Customizable** - All content editable from admin panel
|
|
- 📱 **Responsive Design** - Works on desktop, tablet, and mobile
|
|
- 🔍 **Integrated Search** - Custom search input synced with Discourse SearchMenu
|
|
- 🎯 **4 CTA Cards** - Call-to-action cards with icons, titles, descriptions, and links
|
|
- 🌐 **HTML Support** - Use HTML in hero title and content
|
|
- ♿ **Accessible** - ARIA labels and semantic HTML
|
|
- 🎛️ **Toggle Options** - Enable/disable banner, search, and individual cards
|
|
- 🎨 **Color Customization** - Change all colors from admin panel
|
|
- 🔣 **Font Awesome Support** - Choose from free Font Awesome icons or use emoji
|
|
- 📍 **Position Control** - Place banner after navigation or before content
|
|
- 📄 **Page Visibility** - Show on homepage only or all pages
|
|
|
|
## Installation
|
|
|
|
1. Go to your Discourse Admin Panel
|
|
2. Navigate to **Customize** → **Themes**
|
|
3. Click **Install** → **From a git repository**
|
|
4. Enter the repository URL
|
|
5. Click **Install**
|
|
|
|
Alternatively, you can upload this as a theme component:
|
|
1. Zip the entire theme directory
|
|
2. Go to **Customize** → **Themes** → **Install** → **Upload**
|
|
3. Upload the zip file
|
|
|
|
## Configuration
|
|
|
|
After installation, go to **Customize** → **Themes** → Select this theme → **Settings**
|
|
|
|
### General Settings
|
|
- **enable_welcome_banner** - Enable/disable the entire banner
|
|
- **banner_position** - Choose banner position:
|
|
- `below_header` - Display after navigation menu (below site header)
|
|
- `above_content` - Display before main content (above main container)
|
|
- **show_on_pages** - Choose where to display the banner:
|
|
- `homepage_only` - Display only on homepage (default)
|
|
- `all_pages` - Display on all pages of the forum
|
|
|
|
### Color Settings
|
|
- **primary_color** - Primary accent color (hex format, e.g., #e81f2d)
|
|
- **page_background** - Page background color (hex format)
|
|
- **card_background** - Card background color (hex format)
|
|
- **text_color** - Text color (hex format)
|
|
|
|
### Hero Section
|
|
- **hero_title_html** - Main title (HTML allowed)
|
|
- **hero_content_html** - Hero content/description (HTML allowed)
|
|
|
|
### Search Settings
|
|
- **enable_hero_search** - Enable/disable search input (desktop only)
|
|
- **search_placeholder** - Placeholder text for search input
|
|
|
|
### CTA Cards (4 cards available)
|
|
Each card has these settings:
|
|
- **cta_card_X_enabled** - Enable/disable the card
|
|
- **cta_card_X_icon_type** - Choose between "emoji" or "font_awesome"
|
|
- **cta_card_X_icon_emoji** - Emoji icon (e.g., 📚)
|
|
- **cta_card_X_icon_font_awesome** - Font Awesome icon name (e.g., "book", "rocket", "shield")
|
|
- **cta_card_X_title** - Card title
|
|
- **cta_card_X_description** - Card description
|
|
- **cta_card_X_cta_text** - Call-to-action button text
|
|
- **cta_card_X_url** - Link URL
|
|
|
|
**Font Awesome Icons:** Browse available icons at https://fontawesome.com/icons?d=gallery&m=free
|
|
Use only the icon name without prefixes (e.g., use "book" not "fa-book")
|
|
|
|
## File Structure
|
|
|
|
```
|
|
Welcome_banner/
|
|
├── about.json # Theme metadata
|
|
├── settings.yml # Admin settings configuration
|
|
├── common/
|
|
│ └── common.scss # Styles
|
|
├── javascripts/
|
|
│ └── discourse/
|
|
│ ├── api-initializers/
|
|
│ │ └── welcome-banner.js # Main JavaScript logic
|
|
│ └── connectors/
|
|
│ ├── above-main-container-outlet/
|
|
│ │ └── welcome-banner.hbs # Template (above content)
|
|
│ └── below-site-header/
|
|
│ └── welcome-banner-header.hbs # Template (below header)
|
|
├── CLAUDE.md # Developer documentation
|
|
└── README.md # This file
|
|
```
|
|
|
|
## Customization
|
|
|
|
### Changing Colors
|
|
Colors can be changed directly from the admin panel in the theme settings. The following colors are customizable:
|
|
- Primary color (accent color for CTAs and highlights)
|
|
- Page background
|
|
- Card background
|
|
- Text color
|
|
|
|
No code editing required!
|
|
|
|
### Adding More CTA Cards
|
|
1. Add new settings in `settings.yml`
|
|
2. Update the Handlebars template in `welcome-banner.hbs`
|
|
3. Optionally adjust grid layout in SCSS
|
|
|
|
### Changing Breakpoints
|
|
Edit the media queries in `common/common.scss`:
|
|
- Desktop: 1100px+
|
|
- Tablet: 900-1099px
|
|
- Mobile: <900px
|
|
|
|
## Browser Support
|
|
|
|
- Modern browsers (Chrome, Firefox, Safari, Edge)
|
|
- IE11 not supported
|
|
|
|
## License
|
|
|
|
MIT License
|
|
|
|
## Credits
|
|
|
|
Created for the Nyíltvilág community
|
|
- Website: https://www.nyiltvilag.hu
|
|
- Component version: 1.0.0
|
|
|
|
## Support
|
|
|
|
For issues or questions, please visit the Nyíltvilág forum or create an issue in the repository.
|