No way to click on a 'Banner' topic

[Bathinda (Bathinda Helper)]

There is 1 banner at the top of my website. (I don’t have the habit of pinning topics much, just 1 banner and 1 global pin).

But there is no way to click on the banner if any user wants to go to that topic/post.
But since the first post in that topic is a YouTube video link, the visitor can view that video without going to that topic. But there is no way to click and go to that topic from that banner (I’ve tried another topic without youtube video).
I’ve also tried visiting that topic as a non-logged in user and another user.

Also, once I removed the banner by clicking on the ‘X’ for myself, I’m not able to make it re-appear, even when I removed it as a banner (un-bannered it) and then made it a banner again. Kindly tell how can I make it show as a banner again for myself.

(Excuse me, for the site and the topic/post is in Hindi).

[downey (Michael Downey)]

I’ve gotten around this in the past, by using a hyperlink in the post that refers back to the same topic. For example, click here to go to this same topic. Read more.

[Bathinda (Bathinda Helper)]

That’s a good work around.
Though, for that I’d have to include the link at almost the top of the post (to make it easily viewable/clickable by the user) and that WOULD seem a bit odd once someone is reading the post and he happens to click on that link and going back to that post.

Still, till this is resolved, that’s a very good suggestion.

[downey (Michael Downey)]

@Bathinda

WOULD seem a bit odd once someone is reading the post and he happens to click on that link and going back to that post

If you have several posts/replies in the topic, you could write the hyperlink in the 1st post of the topic to link to the 2nd post with a /2 at the end. In other words, it would skip ahead to the 2nd post and not link back to the top/intro post of the topic. It might still seem a little bit strange, but would have the effect of just moving down the page. Not perfect, but not bad, I guess.

[smrtey]

@Bathinda You can do something like this

Here is the content of the post:

This is going to be a banner topic with a link that displays in the banner but not in the actual post.

[Visit thread](https://forums.example.com/t/test-thread/26?banner-topic)

The trick is to add a query string at the end of your link that Discourse will ignore but you can use in your css. So https://forums.example.com/t/test-thread/26?banner-topic will take you to https://forums.example.com/t/test-thread/26, and you can use the ?banner-topic query in your css to identify links that you want to hide.

a[href$="?banner-topic"] {
    display:none;
}
#banner-content a[href$="?banner-topic"] {
    display:block;
}

[Bathinda (Bathinda Helper)]

Not so user friendly, but a good work around.

Btw, if I wanted to create a theme component with this code, where do I add the code, ‘head’, ‘body’ or somewhere else?

[smrtey]

Forget about my last solution. I think this should do it automatically. Put this in your Common </head>

<script type="text/x-handlebars" data-template-name="components/discourse-banner">
{{#if visible}}
  <div class="row">
    <div id="banner" class={{overlay}}>
      {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
      <div id="banner-content">
        {{{content}}}
        <p><a href="{{banner.url}}">Go to thread</a></p>
        {{#if currentUser.staff}}
          <p><a href="{{banner.url}}">{{{i18n "banner.edit"}}}</a></p>
        {{/if}}
      </div>
    </div>
  </div>
{{/if}}
</script>

The line <a href="{{banner.url}}">Go to thread</a> adds the link, and you can replace “Go to thread” with whatever text you want. You can add a class to the link <a href="{{banner.url}}" class="banner-link">Go to thread</a> and then style .banner-link in your common CSS.

Below makes the whole banner clickable instead of adding a link

<script type="text/x-handlebars" data-template-name="components/discourse-banner">
{{#if visible}}
  <div class="row">
    <a href="{{banner.url}}" class="banner-link">
      <div id="banner" class={{overlay}}>
        {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
        <div id="banner-content">
          {{{content}}}
            {{#if currentUser.staff}}
          <p><a href="{{banner.url}}">{{{i18n "banner.edit"}}}</a></p>
        {{/if}}
      </div>
     </div>
    </a>
  </div>
{{/if}}
</script>

[Bathinda (Bathinda Helper)]

Thank you very much for taking time.

I’d appreciate, if you could tell/italicize/segregate those words in this code, which are customizable by me. Perhaps write/copy those words separately or in diff color.

As I’ve understood, in your last answer, you’ve provided 2 diff (but not too diff) ways of creating a link inside banner (or make the whole banner clickable). In the later case, I think I don’t have to include/embed any link in the topic/post itself.
Thanks.

[smrtey]

Here’s what it looks like

Only staff can see the “Edit this banner” link, but it links to the same spot as “Go to thread” so I should rid of it altogether. So then we have this instead

<script type="text/x-handlebars" data-template-name="components/discourse-banner">
{{#if visible}}
  <div class="row">
    <div id="banner" class={{overlay}}>
      {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
      <div id="banner-content">
        {{{content}}}
        <p><a href="{{banner.url}}">Go to thread</a></p>
      </div>
    </div>
  </div>
{{/if}}
</script>

The line you can edit is
<p><a href="{{banner.url}}">Go to thread</a></p> You can replace Go to thread with whatever text you want. You can also add anything you want anywhere before or after the {{{content}}} of the banner post.