# 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:** 1 **Showing post:** 1
### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@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. ![image](https://global.discourse-cdn.com/meta/original/4X/8/b/c/8bc4a94dbc05777793154e621ed8e8f6d9f781c6.png) The button can be styled separately: ![image](https://global.discourse-cdn.com/meta/original/4X/5/e/9/5e939390fe74ec40958eb2a91855993df323268c.png) You can place the links at various places via the `plugin outlet` setting. A list of common locations is provided in the description. ![chrome_EWCjlxQ02A](https://global.discourse-cdn.com/meta/original/4X/9/3/8/938643b035803041b73060df1654b5d0c697a490.jpeg) > ℹ 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. ![image](https://global.discourse-cdn.com/meta/original/4X/2/0/e/20eebd84bcc2cbbc54ef0e9a159de2976435320d.png) ![This image is a screenshot of a website or application interface search bar. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/3/7/a/37a64da8222da9b32f5ea7c8c7b1a97b9a5ffce4.png) > **Details** > > !["This is a digital image featuring a graphical user interface with a search bar, a welcome message, and buttons for different services, including customization, announcement, document, and support." (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/2/1/5/21518c3c203332af10d79101aea2fe55b8b33cf6.png) > > The current style can be achieved with the following settings: > > ![The image shows a list of buttons with their respective paddings, button rounding, and button padding. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/e/b/3/eb301a1860200cc13c5a826eb601e2e4a746771e.png) > > 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. ![image](https://global.discourse-cdn.com/meta/original/4X/7/0/d/70d36caee28c7e3e28363c242489d1e414e68104.png) 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. --- _[View the full topic](https://meta.discourse.org/t/banner-featured-links/327497)._