How to insert static "welcome" text block on "categories" page

(Jesse Grosjean) #1

I’ve setup my forum so that “categories” is the landing page instead of “Latest”. I love the result, except for the fact that there’s no longer a pinned “welcome” post at the top of the page to welcome new users.

What would be a good way to modify that categories page to display a block of welcome text above the list controls? Unfortunately I’m on a hosting plan that doesn’t allow plugins. Is there some built in way to do this, cleaver style rules, or even a small script that I can put in the html header to insert the text?

Recommendations / links welcome.


(Jesse Grosjean) #2

Here’s how I’ve solved my problem.

  1. Added my “welcome” text using the “Top of pages” Admin content override.

  2. Add the included styling, script using the “HTML head” Admin content override.

The idea is make the welcome block hidden by default. Add a script that determines if user is on categories page. And if so adjust styling to show the welcome text. It’s quite likely I’m doing this all in a very dump and wrong way, but it seems to work for me. Please advise if you see ways to improve my approach. Thanks!

You can see an example of what I’ve done here:

.welcome-block {
    display: none;
    font-size: 1.3em;

body[currentpath="/"] .welcome-block,
body[currentpath="/categories"] .welcome-block{
    display: block;

window.onload = function() {
    var currentPath;
    window.setInterval(function() {
        var newPath = window.location.pathname;
        if (newPath != currentPath) {
            currentPath = newPath;
            if (currentPath) {
                try {
                    document.body.setAttribute('currentpath', newPath);
                } catch (e) {
    }, 100);

(Kane York) #3

Instead of using setInterval, use setTimeout for a run-once or hook into Ember. You don’t want to wake up the page every .1 seconds to check the page URL.

(Jesse Grosjean) #4

I don’t think setTimeout will work, since I need the welcome text to go away when the user navigates to a different page. And for it to come back when they go back to categories. And from what I can tell the javascript won’t be reloaded… I think because the discourse app is dynamically reloading content instead of doing full page refreshes.

Hooking into Ember sounds ideal, but I don’t know ember and haven’t had much luck. I’ve put this into my HTML head admin content, but my “got transition callback” is never run.

window.onload = function() {
        didTransition: function (infos) {
            console.log('got transition callback');

(Sam Saffron) #5

The general approach would be adding something like this to the header (from site customisations):

        activate: function() {
        deactivate: function() {


Customizing the Home Screen to show Tiles for Topics
How do you force a script to refire on every page load in Discourse?
(Jesse Grosjean) #6

A very late thanks!

I’ve been using this code, but I think it’s now out of date. There doesn’t seem to be any Discourse.DiscoveryCategoriesRoute value anymore.

Instead I found that I can get notified of page changes through:

<script type="text/javascript">
    activate: function() {
        // my code here

That seems to work well when I click links to navigate my site. But it doesn’t seem to get called when I change the current category through the categories popup:

Is there a way to get notified when I change pages using that popup too?


(system) #7