### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [May 21, 2018, 12:15pm UTC](https://meta.discourse.org/t/how-to-make-a-theme-component-for-tl-based-banner/88014/1 "2018-05-21T12:15:31Z")
it should be possible to write the banner-topic in different ``'s and then use the condition for trust level mentioned [here](https://meta.discourse.org/t/how-to-create-a-new-topic-button-with-category-and-topic-template/85775/7) to show-hide the corresponding div to user, i.e.:
` if (Discourse.User.current() && trust >= "2") {`
for e.g. show the first div to the TL0, the second to TL1, … .
`#banner-content div:nth-of-type(1) { display: none; }`
is it possible? if yes, does anyone know how to make the theme?
* * *
I’m trying something like this, but it doesn’t work. I appreciate hints:
**header** :
```plaintext
```
**css** :
```plaintext
#banner-content {display: none; }
#banner-content .TL-selected {display: block;}
```
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [May 21, 2018, 2:30pm UTC](https://meta.discourse.org/t/how-to-make-a-theme-component-for-tl-based-banner/88014/2 "2018-05-21T14:30:30Z")
This will depend on your desired goal. If there’s no problem with using CSS, then yeah, this is pretty straightforward.
The reason why the code you added in the header doesn’t work is because `trust` is not defined. First you need to define what `trust` is. You can do it with something like this:
```plaintext
const container = Discourse. __container__ ,
controller = container.lookup("controller:application"),
trust = controller.get("currentUser.trust_level");
```
In the context of the code you tried it would look like this:
```plaintext
```
Now this works, but is not ideal. `onPageChange` fires on everypage change and if you do that and navigate a few pages on your site then check `#banner-content div:nth-child(1)` it would look like this:
```plaintext
```
Because the class would get added with every page change.
Perhaps a better way is to add the current user’s trust level to the `` tag. This is of course only one option as this component can be as simple or as complex as you need it to be. However, let’s keep things simple for now.
So you can use something like this:
```plaintext
```
All this does is find out what the trust\_level is like I mentioned before, then constructs a CSS class name and adds it to the `` tag. I wrapped it around in document ready for good measure.
This runs only once on initial page load. The result looks like this:
So, now you have a class in place that you can target with CSS. For a basic example you can do something like this:
```plaintext
.tl1-content,
.tl2-content,
.tl1-content,
.tl4-content {
display: none;
}
.trust-level-1 .tl1-content,
.trust-level-2 .tl2-content,
.trust-level-3 .tl3-content,
.trust-level-4 .tl4-content {
display: block;
}
```
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [May 21, 2018, 5:56pm UTC](https://meta.discourse.org/t/how-to-make-a-theme-component-for-tl-based-banner/88014/3 "2018-05-21T17:56:46Z")
thanks for the clear guide 🍀 as well as the solution.
I’m not sure if people like css solutions, but using these simple css tweaks, forums can make useful habits in their new-users; without disrupting high level ones.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 8, 2024, 12:37pm UTC](https://meta.discourse.org/t/how-to-make-a-theme-component-for-tl-based-banner/88014/4 "2024-06-08T12:37:29Z")
This topic was automatically closed after 2210 days. New replies are no longer allowed.