Custom banner for discourse channel

Support

AI-generated summary

The discussion is about adding a custom banner to a Discourse channel. Dhruvi_Butti is having issues with the banner not being full-width due to a containing element and images not displaying despite being uploaded to the site.

awesomerobot suggests adding a script to the theme’s head file using a plugin outlet to place the content below the header and outside the content container. They also suspect that the image issue might be due to the image being an SVG without a viewbox or dimensions, or a caching issue on a local development install.

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.