How to add beautiful banner like discourse home page

Product Support

AI-generated summary

The discussion revolves around adding a custom banner to a Discourse forum, similar to the one on the Discourse homepage. Phenix1997 seeks help to customize the banner, including changing text, links, and icons. Don directs them to a related topic on Meta Discourse. Zup provides specific file paths for modifying the banner’s text and links. Ondrej mentions that Discourse uses Font Awesome for icons, and Phenix1997 shares their attempts to replace icons with PNG files, which are not working. Banjo asks about changing Font Awesome icons, and Critical_DevX reports that the banner doesn’t appear on their site.

1

I want to add some additions that allow placing a banner to welcome visitors,

home
home1389×270 20.9 KB

I check all themes
any plugins or extras

3

Hi @Phenix1997,
Check this topic :arrow_down:

4

can you help modify the links!
check

links
links1541×473 34.6 KB

5

Change the text:

Change the links & icons:
https://github.com/discourse/discourse-meta-banner/blob/main/javascripts/discourse/templates/components/meta-banner.hbs

6

any icon providers ?

7

Discourse uses Version 5 Icons | Font Awesome for icons if that is what you mean?

8

I tried to replace the old icons with a new one and upload them but nothing happen
check

icons
icons1477×719 48.1 KB

{{#if (and shouldShow discoveryRoute)}}
  <div class="custom-homepage-wrapper">
    <div class="wrap custom-homepage">
      <div class="welcome-wrapper">
        <div class="welcome-content">
          <h2>{{theme-i18n "meta_banner.welcome"}}</h2>
          <p>{{theme-i18n "meta_banner.subtitle"}}</p>
        </div>
        <div class="featured-todo">
          <div>
            <a href="https://forum.ongurutips.com/search?expanded=true">
              <h3>{{d-icon "info-circle"}}
                {{theme-i18n "meta_banner.docs"}}</h3>
            </a>
          </div>
          <div>
            <a href="https://www.fiverr.com/phenix1997">
              <h3>{{d-icon "fab-discourse"}}
                {{theme-i18n "meta_banner.themes"}}</h3>
            </a>
          </div>
          <div>
            <a href="https://ongurutips.com">
              <h3>
                {{d-icon "fab-discourse"}}
                {{theme-i18n "meta_banner.hosting"}}</h3>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
{{/if}}

my new icons ! png format

blogging
blogging512×512 19.7 KB

check https://forum.ongurutips.com

9

How do we change our font awesome icons for the banner

~ a admin on forum.ongurutips.com

10

Just change these for your preferred icon

sketch-1634892929852
sketch-16348929298521080×1487 171 KB

11

I try, no one work. can you suggest other options

12

Bro how r u using it it won’t show for me