Banner Featured Links

[Arkshine]

	Summary	Banner Featured Links allows you to create a banner of links.
	Preview	Theme Creator
	Repository	GitHub - Arkshine/discourse-banner-featured-links
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

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 Plugin Outlet Locations 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 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-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

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 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 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

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 fpnt of the buttons on mobile.

Button Styling

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 class name in the CSS Classname setting.

Then, you can target this way:

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

  }
}

Useful links

• Discourse core CSS variables: discourse/app/assets/stylesheets/color_definitions.scss at main · discourse/discourse · GitHub

Credits

• Discourse for the idea, inspired by the amazing Meta Branded theme.
• Don and nolo – They made an initial version; I took some of their ideas.

[Jagster (Jakke Lehtonen)]

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.

[NateDhaliwal]

Was this inspired the Meta Branded theme?

[Moin]

I think so

@Arkshine

It’s a feature inspired by the fantastic “Meta Branded” Discourse theme.

[NateDhaliwal]

Must’ve skimmed it too much - I was looking at the ‘Credits’ section

[Arkshine]

No worries. I’ve updated the credits section to make it clearer. Thanks!

[Arkshine]

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 @nolo for reporting the issue!