Custom banner for discourse channel

support
#1

Hey! We are trying to set up our own discourse channel and we need to implement a banner (After header) that should look like this -

TaxQnA Banner (1)
TaxQnA Banner (1)5745×1654 249 KB

But we are facing two major issues -

  1. We are not able to get full width of the banner. Discourse adds a container so the whole component comes inside that container.
  2. We are not able to see images even if they are in the dome - We uploaded those images and used it as - background-image: url($discourse_vector); background-position: bottom; background-size: cover; height: 100%; display: block; width: 100%;
    but it does not work.

Any help will be appreciated.
Thanks in advance.

#2

In your theme’s head file you can add this:

<script type="text/x-handlebars" data-template-name="/connectors/below-site-header/custom-banner">

// Your custom HTML here

</script>

This utilizes a plugin outlet to put the content directly below the header and outside our content container (more details here: Developer’s guide to Discourse Themes)

Based on the variable name… is this an SVG image? If it is you may need to make sure the SVG file has a viewbox and/or dimensions in its markup… I’ve occasionally run into this problem.

Otherwise, I’d expect your image to appear… is this happening on a live site, or on a local development install? I’ve occasionally had issues with uploaded images on dev installs, usually clearing the cache or restarting the server fixes it.

3 Likes