 |
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.
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 Locationsabove-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-streamSearch Banner component: search-banner-below-headlinesearch-banner-below-input |
links setting:
| Name | Description |
|---|---|
| Icon | The FontAwesome icon or emoji to display for the links.ShortcutsWindows: 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
”,“text”:"Join our Champion Program! ",“url”:“
”, “text”=>“New Widgets”, “target”=>“_self”, “button_color_hover”=>“
.
