Welcome Link Banner

Yes, it’s in the Welcome Link Banner settings:

Do you mean, if they set a custom page (latest, categories, whatever) as their homepage in their own profile?
Then this arbitrary page is considered as the “homepage” for the user, and thus the welcome banner will appear to them in their new homepage.

If the default homepage of your site is /categories and you want the welcome banner appears only on /categories, regardless of users’ interface preferences, maybe you could set show on to “discovery” or “all” and use javascript to hide the welcome banner on other pages than the one you want to show it on.

But I currently don’t know how to reliably identify the current page we’re on (including when we load a page the first time and when we change the page) to dynamically hide the Welcome Banner.

I’d be happy to try this later (:sleeping:), but maybe this could be a start:

2 Likes

Ah, many thanks, yes, some of my community leaders who have default layout set to latest, would prefer for the banner to only show up on the categories page for example. I’ll review the link you shared.

2 Likes

Okay, here’s a working solution. In my example, the Welcome Banner will be displayed on the /latest page only, regardless of users’ interface settings. I’ll let you customize it to display it for the /categories page only. :slight_smile:

  1. Set the Welcome Link Banner show on setting to “all” or “discovery”, depending on the page(s) you want the banner to be displayed.

  2. Add this script in your theme:

    <script type="text/discourse-plugin" version="1.4.0">
        //shows the welcome banner only on the /latest page
        api.onPageChange(() => {
            const router = api.container.lookup('service:router');
    
            if (router.currentRoute.name === 'discovery.latest') {
                document.body.classList.add('route-discovery-latest');
            } else {
                document.body.classList.remove('route-discovery-latest');
            }
        });
    </script>
    
  3. Add this CSS to your theme:

    body:not(.route-discovery-latest) .welcome-link-banner-connector {
       display: none;
    }
    

Reference used:

6 Likes

Thanks for this, many many thanks! :raised_hands:

3 Likes

Can others reproduce this low resolution banner? I only see it in Chrome. Firefox doesn’t do this. I’ve uploaded an SVG, so it should resize just fine, as it does in Firefox. Using Discourse 3.0.0.beta15. It only shows with high resolution monitors (4K).

This is how it looks in Firefox.

2 Likes

I’m not 100% sure, but this might be due to how Chrome downscales images? I’ve run into a similar issue from time to time. If you resize the image being used so it doesn’t have to be downscaled, that may help.

1 Like

As a test I made the SVG 25% the size of the original, but it still has the same effect on Chrome. It’s a recent change (maybe 2 months). The SVG repeats itself, even at the size of 300px it has this strange effect. I personally don’t use Chrome. But since it’s the most popular browser some people might think I made a crappy image :nerd_face: I guess I’ll ignore it for now.

1 Like

This is as your name awesome! If I might suggest to add an option to only show in a particular category or categories.

This could be handy say for support forums with different products with different support teams.

So for example an Atv forum might have some dedicated Support members whom help with Suzuki bikes. So when your in the Atv Suzuki category links to suzuki experts and links for suzuki related sales. This component can be installed a 2nd instance that does the same when your browsing the polaris category.

Each category could have a unique welcome banner where tjis could be an asset.

Other themes like custom header dropdown links.and similar components with an options of in main bar or above or below.

Nice! But the problem with vertical icons also occurs on tablets, so just using the mobile custom CSS starts at too low a screen size. Unfortunately Discourse custom CSS doesn’t let you target tablets. My solution was to put the following text in the common custom CSS tab.

It also includes fixes for unwanted spacing on the right in the tablet view, and I also chose to increase the font size for the links to 1em.

@media (max-width: 768px) {
  .below-site-header-outlet.welcome-link-banner-connector {
    .welcome-link-banner-wrapper {
        background-size: cover;
        .welcome-wrapper {
            .welcome-content {
                &>p {
                    max-width: initial;
                }
            }
            .featured-banner-link {
                flex-direction: row;
                padding-bottom: 0.5em;
                &>div a {
                    padding: 0 5px;
                    h3 {
                        font-size: 1em;
                        white-space: normal;
                        }
                    }
                }
            }
        }
    }
}
2 Likes

Thanks for this info!
I didn’t do a pull request to the theme component with my mobile version because I didn’t test it in various configurations. And your message shows that the mobile code would need indeed additional work :slight_smile:

2 Likes

To summarize, because I’m not sure I fully understood your needs, you’d like a different banner with different content on different categories? That may require a lot of work and adds a layer of complexity to a simple, easy-to-use component.

If you need arbitrary content displayed under the header for each category, I think it can be done fairly easily, and I encourage you to create a dedicated topic for this question on dev :slight_smile:

2 Likes

I have made a new topic as suggested. Thank you.

2 Likes

If the answer is that there are settings to remove the banner based on trust level (and also for staff) then fine. Still, it would be useful to know, if possible, please. :slight_smile:

it’s possible to add this functionality, but it has not been added yet

2 Likes