gabeszm/weclome-banner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
weclome-banner/README.md

4.8 KiB
Raw Permalink Blame History

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

Support

For issues or questions, please visit the Nyíltvilág forum or create an issue in the repository.