Welcome link banner

This is a simple banner, similar to the one in use here on Meta, that allows you to add some custom text and 1-4 links.

This component comes with a variety of settings!

  • show_on: choose to show your banner on the homepage, topic lists, or all pages
  • banner_links: add 1-4 links with font awesome icons and text (you might also need to add icons that aren’t included in Discourse by default to the svg_icons setting)
  • max_trust_level: only show the banner to users at specific trust levels
  • hide_for_staff
  • hide_on_mobile
  • hide_for_anon: hides the banner from logged-out users
  • banner_background_image: choose an image to display behind the banner
  • banner_background_repeat: configure background image repeat behavior
  • banner_background_size: adjust your background image size using CSS (more info)
  • banner_background_color: no background image? use a solid color!
  • banner_box_background_color
  • banner_text_color
  • banner_icon_color
  • banner_link_color
45 Likes

Thanks, This is Great! :tada: :star_struck:

7 Likes

Oh wow! This looks very clean. Exactly what i need. Thanks for this Kris :heart_eyes:

6 Likes

Awesome component! :tada:

Wow, I’m really excited about seeing this:


I’ll definitely be implementing this technique in my components now to avoid having users type comma separated strings.

9 Likes

This is wonderful! You’re truly awesome @awesomerobot!

I do have a question regarding svg_icons. I tried to add the regular and solid ones on the list (e.g. far-user-group and fas-user-group), but whenever I hit preview, it doesn’t seem to appear on the banner. Am I missing a step here? Thanks!

2 Likes

A few things that may help:

  • the theme includes a svg_icons setting, if the icon does not appear you may need to add the name here (Discourse doesn’t include every font awesome icon by default, but this setting will add them)
  • you don’t need to include the prefix for the standard icons, just user-group should work
  • make sure you’re only looking at free icons (there’s a filter for free on their site), we don’t include pro icons by default because they require a license. Pro icons can be added with a plugin, if you purchase a license: FontAwesome Pro icons
7 Likes

A small point to add onto @awesomerobot’s comments,

FontAwesome recently updated their icon set to version 6.0.0 and as a result there were new icons added and some icons had their names slightly changed.

I believe Discourse is still using version 5.15.4, which is why you may be seeing the issue as the user-group icon does not exist in that version. Perhaps you might want to use user-friends as its a similar icon.

You can filter by v5 by using this link:

6 Likes

Aha! This did the trick. It’s the version not being compatible. Thanks @keegan!

And of course, thank you again for this theme component @awesomerobot. I was debating on whether to get this or the versatile banner, but ultimately decided to go with the minimalistic view on the former.

3 Likes

@awesomerobot Hi, I would like to know how I can give this box a background color.

1 Like

How can I open this for visitors?

2 Likes

It is not visible to visitors. Can you add option for this?

2 Likes

Thanks for the feedback! I’ve updated this to be visible to logged out users by default, and I’ve also added a setting to hide it from logged-out users, if desired.

I’ve also added some additional settings for controlling the styles…

If you update the component there’s a new setting called banner_box_background_color

7 Likes

Thank you Kris - this is awesome and makes it easy to have a really professional looking welcome banner. And the tweaks are making it better!

I’d like to have slightly different content for anon vs trust_level_0/1. Maybe just one link to be different I think.

Can you suggest the best way to achieve that?

2 Likes

Great, thank you again! :heart:

2 Likes

That’s a very well-designed theme component and a great alternative to the “regular” banners (as pinned posts) to welcome new people, whether the forum is new or after a migration. Great theme component. We use it on our migrated forum and are very happy with it.

Note: since it’s in the context of a forum migration, a lot of users are trust level 1, but because the forum engine is very different from phpBB, we decided to downgrade all the existing users to trust level 0 so they see the banner and its information and set the welcome banner to disappear when they reach the trust level 1 (waiting for level 2 would be too long).

3 Likes

Great component!

Any input on how to modify the placement of this component on a page? For instance, I’d rather have this component located above my footer, as opposed to below the header. Any thoughts here? See example below:

3 Likes

Question: Do the banner colors by default respect the theme colors e.g. if forum is in dark mode?

Also, two feature requests:

  • It would be great to be able to change the alignment to be left-aligned instead of centered (although I imagine this is simple with css)
  • I would love to be able to use emojis instead of font awesome icons
1 Like

From my experience, yes: see my screenshots here: Third migration, once again for a niche forum (Volkswagen Campers vans)

A bit hacky… But you can make it with CSS only:

.featured-todo div {
    h3 {
        background: no-repeat top center;
        background-size: 30px 30px; // emoji width and height
        padding-top: 45px; // emoji height + 15 px margin down
        svg {
            display: none !important;
        }
    }
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

Which part are you talking about?

2 Likes

Thank you for your help @Canapin

The three links and their icons, I would like the text and icons to be all left-aligned rather than center-aligned, on both desktop and mobile. I have basic knowledge of css/html and couldn’t figure out how to change it using developer tools.

With icons:

.featured-todo div h3 {
    display: flex;
    align-items: center;
    svg {
        margin: 0 10px 0 0 !important;
    }
}

With emojis:

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // emoji width and height
        padding-left: 45px; // emoji width + 15 px margin left
        svg {
            display: none !important;
        }
    }
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}


Note: I didn’t test any of these customizations on mobile.

2 Likes