# Versatile Banner

**URL:** <https://meta.discourse.org/t/versatile-banner/109133>\
**Category:** Theme component\
**Tags:** official, versatile-banner\
**Created:** [February 14, 2019, 10:05am UTC](https://meta.discourse.org/t/versatile-banner/109133 "2019-02-14T10:05:24Z")\
**Posts on this page:** 1\
**Showing post:** 248

<div class="post-metadata">

**Author:** ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)\
**Post date:** [April 2, 2021, 9:49pm UTC](https://meta.discourse.org/t/versatile-banner/109133/248 "2021-04-02T21:49:43Z")

</div>

You might be able to do something like:

```plaintext
<script type="text/discourse-plugin" version="0.10.0">
  // Add the link to the heading
  api.reopenWidget("banner-box-widget", {
    html(attrs) {
      let bannerBox = this._super();
      bannerBox[0].children[1].tagName = "A";
      bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
      return bannerBox;
    }
  });
  
  // Add the link to the rest of the content
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

```

And add a CSS rule to adjust the link color

```scss
.banner-box a {
    color: var(--primary);
}

```

Unless there’s specific functionality you need that the Versatile Banner offers, I wonder if you would be better off just making your own simple HTML banner in a new component. Rough example:

Add the following to the Common “After Header” section:

```plaintext
<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>This is a customer banner!</h2>
  </div>
</a>

```

and the following to the Common “CSS” section:

```plaintext
 .custom-banner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $large-width; // 1110px
   height: 200px;
   margin-bottom: 15px;
   background: grey;
   color: white;
 }

```

That would give you a simple banner that’s fully clickable:

 ![Screen Shot 2021-04-02 at 1.17.48 PM](https://global.discourse-cdn.com/meta/original/3X/0/7/07577b21ee4abde2786512e0f72b162a70b9fd13.png)

---

_[View the full topic](https://meta.discourse.org/t/versatile-banner/109133)._