Welcome Link Banner

awesomerobot · February 18, 2022, 10:21pm


	Summary	Welcome Link Banner 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.
	Preview	Preview on theme-creator.discourse.org
	Repository Link	https://github.com/discourse/discourse-welcome-link-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

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
layout: text-left (default) or text-top
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

PaulinaMX · February 18, 2022, 10:41pm

Thanks, This is Great!

ondrej · February 19, 2022, 11:09pm

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

keegan · February 21, 2022, 11:38pm

Awesome component!

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.

apgar · February 22, 2022, 3:55am

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!

awesomerobot · February 22, 2022, 9:30pm

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

keegan · February 22, 2022, 10:32pm

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:

apgar · February 22, 2022, 11:20pm

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.

PaulinaMX · February 23, 2022, 3:41am

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

Develcoder · February 23, 2022, 8:11am

How can I open this for visitors?

poyrazdursuncan · February 23, 2022, 8:11am

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

awesomerobot · February 25, 2022, 2:13pm

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

nathankershaw · February 26, 2022, 9:08pm

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?

PaulinaMX · February 26, 2022, 10:15pm

Great, thank you again!

Canapin · March 1, 2022, 9:30pm

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).

matt_valant · March 16, 2022, 1:34am

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:

mk0r · March 19, 2022, 5:02pm

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

Canapin · March 19, 2022, 11:37pm

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?

mk0r · March 20, 2022, 12:55am

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.

Canapin · March 20, 2022, 12:37pm

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.