Banner Featured Links

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 "Meta Brand" Discourse theme.

Features

The default look – it uses the theme color.

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 Plugin Outlet Locations theme component to see where the plugin outlets are located.

Example: if you want to mimic Meta Brand theme, you can use the search-banner-below-input outlet. It assumes you have installed the Search Banner component.

Details

The current style can be achieved in the following way. Here are the settings:

I encourage you to try your own 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-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-stream Search Banner component: search-banner-below-headlinesearch-banner-below-input
svg_icons	Add FontAwesome icons that aren't included in the default subset.

links setting:

Name	Description
Icon	The FontAwesome 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 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 of the button.
Font	The font of the button.
Rounding	The amount of rounding to apply to the button.
Background	The background color of the button.
Background Hover`	The background color of the button when hovered.
Color`	The text color of the button.
Color Hover`	The text color of the button when hovered.
Border	The border of the button.
Border Hover	The border of the button when hovered.
Shadow	The shadow 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 of the buttons wrapper.
buttons wrapper margin	The margin of the buttons wrapper.
mobile buttons wrapper max width	The maximum width of the buttons wrapper on mobile.
mobile buttons wrapper margin	The margin of the buttons wrapper on mobile.

Buttons Spacing & Text Font Size

Customize the spacing of the buttons and the font size of the text.

Name	Description
buttons justify	How to distribute space between and around links.
buttons gap	The gap between the buttons.
buttons font	The font of the buttons.
mobile buttons justify	How to distribute space between and around links on mobile.
mobile buttons gap	The gap between the buttons on mobile.
mobile buttons direction	The direction of the buttons on mobile.
mobile buttons font	The font of the buttons on mobile.

Buttons Spacing & Text Font Size

Customize the default look of the buttons.

Name	Description
button width	The width of the button.
button padding	The padding of the button.
button rounding	The amount of rounding to apply to the button.
button background	The background color of the button.
button background hover	The background color of the button when hovered.
button color	The text color of the button.
button colo hover	The text color of the button when hover.
button border	The border of the button.
button border hover	The border of the button when hovered.
button shadow	The shadow of the button.

Advanced Customization

You can use the following CSS to customize further:

.banner-featured-links {
  &__wrapper {

  }

  &__wrapper-links {

  }

  &__link {

  }
}

If you provide a customization per-button, you can provide a classname in he CSS Classname setting.

Then, you can target this way:

.banner-featured-links {
  &__link.myclass {

  }
}

Useful links

• Discourse core CSS variables: https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/color_definitions.scss

Credits

• Discourse for the idea
• Don and nolo -- They made an initial version; I took some of their ideas.