# Banner Featured Links
**URL:** https://meta.discourse.org/t/banner-featured-links/327497
**Category:** Theme component
**Created:** [September 21, 2024, 7:57am UTC](https://meta.discourse.org/t/banner-featured-links/327497 "2024-09-21T07:57:13Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [September 21, 2024, 7:57am UTC](https://meta.discourse.org/t/banner-featured-links/327497/1 "2024-09-21T07:57:13Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Banner Featured Links allows you to create a banner of links. |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/Arkshine/banner-featured-links) |
| 🛠 | **Repository** | [GitHub - Arkshine/discourse-banner-featured-links · GitHub](https://github.com/Arkshine/discourse-banner-featured-links) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
## Summary
Banner Featured Links allows you to create a banner of links.
It provides a wide range of customization options.
It’s a feature inspired by the fantastic “Meta Branded” Discourse theme.
## Features
The default look – it uses the theme color.
The button can be styled separately:
You can place the links at various places via the `plugin outlet` setting.
A list of common locations is provided in the description.
> ℹ I recommend using the [Developer Toolbar](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215) theme component to see where the plugin outlets are located!
For example, if you want to mimic the Meta Brand theme, use the `search-banner-below-input` outlet. It assumes you have installed the [Search Banner](https://meta.discourse.org/t/search-banner-theme-component/122939) component.
> **Details**
>
> 
>
> The current style can be achieved with the following settings:
>
> 
>
> I encourage you to try your style!
## Settings
### General
| Name | Description |
| --- | --- |
| `links` | Text links to be displayed in the header. |
| `show_for_members` | Display the links for logged-in users. |
| `show_for_anon` | Display the links for anonymous users. |
| `display_on_mobile` | Display the links on mobile devices. |
| `display_on_desktop` | Display the links on desktop computers. |
| `display on homepage` | Displays the links on the homepage. |
| `url must contain` | Enter paths that should display the banner. Add `*` to the end of the path as a wildcard. |
| `plugin outlet` | The location to display the links.
> **Common Locations**
>
> `above-main-container``above-site-header``after-header``before-header-panel``before-list-area``before-topic-list``below-site-header``header-list-container-bottom``topic-above-post-stream`
> Search Banner component:
> `search-banner-below-headline``search-banner-below-input`
|
#### `links` setting:
| Name | Description |
| --- | --- |
| Icon | The [FontAwesome](https://fontawesome.com/v6/search?) icon or emoji to display for the links.
> **Shortcuts**
>
> Windows: Win + .
>
> Mac: Cmd + Ctrl + Space
>
> ChromeOS: Launch + Shift + Space
|
| Title | The title of the link. |
| URL | The URL to link to. |
| Target | Opens the linked document:
`_blank`: in a new window or tab (this is the default)
`_self`: in the same frame as it was clicked
`_parent`: in the parent frame
`_top`: in the full body of the window. |
You can also style per-button. It will overwrite the global style.
| Name | Description |
| --- | --- |
| Width | The [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width "'width' CSS Documentation") of the button.
|
| Font | The [font](https://developer.mozilla.org/en-US/docs/Web/CSS/font "'font' CSS Documentation") of the button.
|
| Rounding | The [amount of rounding](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius "'border-radius' CSS Documentation") to apply to the button. |
| Background | The [background color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color "'background-color' CSS Documentation") of the button. |
| Background Hover` | The [background color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color "'background-color' CSS Documentation") of the button when hovered. |
| Color` | The text [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color "'color' CSS Documentation") of the button. |
| Color Hover` | The text [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color "'color' CSS Documentation") of the button when hovered. |
| Border | The [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border "'border' CSS Documentation") of the button. |
| Border Hover | The [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border "'border' CSS Documentation") of the button when hovered. |
| Shadow | The [shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow "'box-shadow' CSS Documentation") of the button. |
| CSS Classname | A custom CSS class to apply to the button.
Useful if you want to style the button differently and the settings are not enough.
You can target with `.banner-featured-links__link.your-classname {}` |
### Global Styling
Customize the default spacing and look of the links.
You can overwrite the button styling for each link individually.
### Buttons Wrapper Styling
Customize the container of the links.
| Name | Description |
| --- | --- |
| `buttons wrapper max width` | The [maximum width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width "'max-width' CSS Documentation") of the buttons wrapper. |
| `buttons wrapper margin` | The [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin "'background-color' CSS Documentation") of the buttons wrapper. |
| `mobile buttons wrapper max width` | The [maximum width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width "'max-width' CSS Documentation") of the buttons wrapper on mobile. |
| `mobile buttons wrapper margin` | The [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin "'background-color' CSS Documentation") of the buttons wrapper on mobile. |
### Buttons Spacing & Text Font
Customize the spacing of the buttons and the font size of the text.
| Name | Description |
| --- | --- |
| `buttons justify` | How to distribute [space](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content "'justify-content' CSS Documentation") between and around links. |
| `buttons gap` | The [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap "'gap' CSS Documentation") between the buttons. |
| `buttons font` | The [font](https://developer.mozilla.org/en-US/docs/Web/CSS/font "'font' CSS Documentation") of the buttons. |
| `mobile buttons justify` | How to distribute [space](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content "'justify-content' CSS Documentation") between and around links on mobile. |
| `mobile buttons gap` | The [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap "'gap' CSS Documentation") between the buttons on mobile. |
| `mobile buttons direction` | The [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction "'flex-direction' CSS Documentation") of the buttons on mobile. |
| `mobile buttons font` | The [fpnt](https://developer.mozilla.org/en-US/docs/Web/CSS/font "'font' CSS Documentation") of the buttons on mobile. |
### Button Styling
Customize the default look of the buttons.
| Name | Description |
| --- | --- |
| `button width` | The [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width "'width' CSS Documentation") of the button.
|
| `button padding` | The [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding "'padding' CSS Documentation") of the button.
|
| `button rounding` | The [amount of rounding](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius "'border-radius' CSS Documentation") to apply to the button. |
| `button background` | The [background color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color "'background-color' CSS Documentation") of the button. |
| `button background hover` | The [background color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color "'background-color' CSS Documentation") of the button when hovered. |
| `button color` | The text [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color "'color' CSS Documentation") of the button. |
| `button colo hover` | The text [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color "'color' CSS Documentation") of the button when hover. |
| `button border` | The [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border "'border' CSS Documentation") of the button. |
| `button border hover` | The [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border "'border' CSS Documentation") of the button when hovered. |
| `button shadow` | The [shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow "'box-shadow' CSS Documentation") of the button. |
## Advanced Customization
You can use the following CSS to customize further:
```css
.banner-featured-links {
&__wrapper {
}
&__wrapper-links {
}
&__link {
}
}
```
If you provide a customization per button, you can provide a class name in the `CSS Classname` setting.
Then, you can target this way:
```css
.banner-featured-links {
&__link.myclass {
}
}
```
## Useful links
- Discourse core CSS variables: [discourse/app/assets/stylesheets/color\_definitions.scss at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/color_definitions.scss)
## Credits
- Discourse for the idea, inspired by the amazing Meta Branded theme.
- [Don](https://meta.discourse.org/u/don) and [nolo](https://meta.discourse.org/u/nolo) – They made an initial version; I took some of their ideas.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [September 21, 2024, 8:12am UTC](https://meta.discourse.org/t/banner-featured-links/327497/2 "2024-09-21T08:12:45Z")
One meta comment to improve an otherwise good quality introduction of a component: a screenshot from a mobile. It would save time when choosing between usefulness, pros and cons.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [September 21, 2024, 8:50am UTC](https://meta.discourse.org/t/banner-featured-links/327497/3 "2024-09-21T08:50:21Z")
Was this inspired the Meta Branded theme?
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [September 21, 2024, 8:50am UTC](https://meta.discourse.org/t/banner-featured-links/327497/4 "2024-09-21T08:50:53Z")
I think so 😉
> [@Arkshine](#):
>
> It’s a feature inspired by the fantastic “Meta Branded” Discourse theme.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [September 21, 2024, 8:52am UTC](https://meta.discourse.org/t/banner-featured-links/327497/5 "2024-09-21T08:52:22Z")
Must’ve skimmed it too much - I was looking at the ‘Credits’ section 😆
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [September 21, 2024, 1:00pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/6 "2024-09-21T13:00:47Z")
No worries. I’ve updated the credits section to make it clearer. Thanks!
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [September 21, 2024, 4:07pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/7 "2024-09-21T16:07:29Z")
I pushed a small fix if you installed the component the first time. 👍
My last commit renamed a setting, but the default values were not updated.
Thanks to @manuel for reporting the issue!
---
### Author:  [@Helga\_Razinkova](https://meta.discourse.org/u/Helga_Razinkova)
#### Post date: [February 27, 2025, 10:18am UTC](https://meta.discourse.org/t/banner-featured-links/327497/9 "2025-02-27T10:18:14Z")
Hi @Arkshine, thanks a lot for this plugin!
I’ve been using it for a while, but after adding another button today it broke the entire forum so it looks like this now:
Do you happen to know why this could happen?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 27, 2025, 1:21pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/10 "2025-02-27T13:21:30Z")
> [@Helga\_Razinkova](#):
>
> I’ve been using it for a while, but after adding another button today it broke the entire forum so it looks like this now:
Hey, does that mean if you remove this button, it doesn’t break?
---
### Author:  [@Helga\_Razinkova](https://meta.discourse.org/u/Helga_Razinkova)
#### Post date: [February 27, 2025, 1:30pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/11 "2025-02-27T13:30:48Z")
Well, I had to contact the Discourse team to disable the plugin, so everything’s now back to normal, yeah.
Now I’m kind of hesitant to restore the old settings to test the theory 😅
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 27, 2025, 1:43pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/12 "2025-02-27T13:43:13Z")
I understand, no worries. Sorry about that! You’re the first to have this issue.
Do you still remember what values you entered for the button? If I can reproduce it, that would be helpful!
---
### Author:  [@Helga\_Razinkova](https://meta.discourse.org/u/Helga_Razinkova)
#### Post date: [February 27, 2025, 1:53pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/13 "2025-02-27T13:53:55Z")
Sure, thanks a lot for your help!
This is really weird, cuz I made changes not so long ago and it worked just fine.
I removed one of the buttons and added the new one:
- Title: Monthly Recaps
- URL: [https://community.elfsight.com/c/announcements/release-notes/133?utm\_source=elfsight&utm\_medium=elfsight-community&utm\_campaign=buttons-under-search&utm\_content=monthly-recaps](https://community.elfsight.com/c/announcements/release-notes/133?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=monthly-recaps)
- Target: self
- Color Hover: #197bff
> **Here are the logs, if it helps**
>
> [{“url”:“[Topics tagged new-widget](https://community.elfsight.com/tags/c/elfsight-changelog/48/new-widget?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=new-widget%22,%22icon%22:%22:fire:%22,%22text%22:%22New) Widgets”,“target”:“\_self”,“button\_color\_hover”:“#197bff”},{“url”:“[Topics tagged In-Progress](https://community.elfsight.com/tags/c/wishlist/8/In-Progress/l/votes?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=in-progress%22,%22icon%22:%22%22,%22text%22:%22In) Progress”,“target”:“\_self”,“button\_color\_hover”:“#197bff”},{“url”:“[CSS Codes - Elfsight Community](https://community.elfsight.com/c/css-codes/158?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=css-codes%22,%22icon%22:%22%22,%22text%22:%22CSS) Codes”,“target”:“\_self”,“button\_color\_hover”:“#197bff”},{“url”:“[Ask the Community - Elfsight Community](https://community.elfsight.com/c/get-help/5?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=support%22,%22icon%22:%22%22,%22text%22:%22Support%22,%22target%22:%22_self%22,%22button_color_hover%22:%22#197bff%22%7D,%7B%22url%22:%22https://community.elfsight.com/c/announcements/release-notes/133?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=monthly-recaps%22,%22text%22:%22Monthly) Recaps”,“target”:“\_self”},{“icon”:“🏆”,“text”:"Join our Champion Program! ",“url”:“[Elfsight Champion Program: Help us grow our community forum! - Announcements - Elfsight Community](https://community.elfsight.com/t/elfsight-champion-program-help-us-grow-our-community-forum/17197?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=champion-program%22,%22target%22:%22_self)”}]
>
> Previous: [{“url”=\>“[Topics tagged new-widget](https://community.elfsight.com/tags/c/elfsight-changelog/48/new-widget?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=new-widget)”, “icon”=\>“🔥”, “text”=\>“New Widgets”, “target”=\>“\_self”, “button\_color\_hover”=\>“#197bff”}, {“url”=\>“[Topics tagged In-Progress](https://community.elfsight.com/tags/c/wishlist/8/In-Progress/l/votes?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=in-progress)”, “icon”=\>“”, “text”=\>“In Progress”, “target”=\>“\_self”, “button\_color\_hover”=\>“#197bff”}, {“url”=\>“[CSS Codes - Elfsight Community](https://community.elfsight.com/c/css-codes/158?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=css-codes)”, “icon”=\>“”, “text”=\>“CSS Codes”, “target”=\>“\_self”, “button\_color\_hover”=\>“#197bff”}, {“url”=\>“[Ask the Community - Elfsight Community](https://community.elfsight.com/c/get-help/5?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=support)”, “icon”=\>“”, “text”=\>“Support”, “target”=\>“\_self”, “button\_color\_hover”=\>“#197bff”}, {“url”=\>“[Elfsight Champion Program: Help us grow our community forum! - Announcements - Elfsight Community](https://community.elfsight.com/t/elfsight-champion-program-help-us-grow-our-community-forum/17197?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=champion-program)”, “icon”=\>“🏆”, “text”=\>“Join our Champion Program! “, “target”=\>”\_self”}]
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 27, 2025, 3:43pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/14 "2025-02-27T15:43:48Z")
Thanks to @Helga_Razinkova’s help in PM, I was able to reproduce the issue.
I pushed a fix 👍.
[https://github.com/Arkshine/discourse-banner-featured-links/pull/3](https://github.com/Arkshine/discourse-banner-featured-links/pull/3)
In short, the component was not expecting the settings to be updated through Settings Editor and with a missing `icon` field, an error happened.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [April 24, 2025, 6:22am UTC](https://meta.discourse.org/t/banner-featured-links/327497/15 "2025-04-24T06:22:44Z")
This is brilliant! It is so comprehensive and customisable; you seem to have thought of pretty much everything.
I’ve noticed a minor bug where the icons aren’t visible at times.
This is what my links look like:
This is what happens when you:
1. Use Chrome (haven’t tried other browsers sorry)
2. Navigate away from a page with the Banner Featured Links
3. Return to the page using the browser ‘Back’ button
You can demonstrate this yourself on [ehealthforum.nz](http://ehealthforum.nz)
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 24, 2025, 11:52am UTC](https://meta.discourse.org/t/banner-featured-links/327497/16 "2025-04-24T11:52:19Z")
Thanks Nathan! I’ve pushed a fix. Let me know if it still happens!
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [April 28, 2025, 9:21am UTC](https://meta.discourse.org/t/banner-featured-links/327497/17 "2025-04-28T09:21:17Z")
Wonderful!!! All fixed.
Got another minor (but disconcerting) UX bug:
The text on the buttons is still captured by the `:visited` pseudo class, meaning that the text color behaves strangely on hover once each link has been visited.
This is non-hover:
This is hover _before_ visiting (both icon and text change)
This is hover _after_ visiting (note that the icon changes but not the text)
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 28, 2025, 2:56pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/18 "2025-04-28T14:56:47Z")
@nathank Can you try to update and see if it’s better?
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [April 28, 2025, 10:01pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/19 "2025-04-28T22:01:33Z")
That was with an updated instance. There was one small PR on the Search Banner, but none on this TC to apply. Regardless, I did a rebuild. Still there!
It doesn’t show in incognito, I’m guessing because it doesn’t save my visted status.
---
### Author:  [@MAR](https://meta.discourse.org/u/MAR)
#### Post date: [June 25, 2025, 2:18pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/20 "2025-06-25T14:18:17Z")
> [@Arkshine](#):
>
> [GitHub - Arkshine/discourse-banner-featured-links](https://github.com/Arkshine/discourse-banner-featured-links)
Is this compatible with the AIR Theme to serve at top of the Community page with buttons linking to a wordpress?
---
### Author:  [@long](https://meta.discourse.org/u/long)
#### Post date: [February 20, 2026, 9:40pm UTC](https://meta.discourse.org/t/banner-featured-links/327497/21 "2026-02-20T21:40:39Z")
Trying to place these under the search bar (like on this site) by using ‘search-banner-below-input’ for the “Plugin outlet” – went back and forth with the AI and it explained that now because the search is core and not an extension that location won’t work. Just wondering if that is correct.
[Next page](https://meta.discourse.org/t/banner-featured-links/327497.md?page=2)