 |
Résumé | Banner Featured Links vous permet de créer une bannière de liens. |
 |
Aperçu | Theme Creator |
 |
Dépôt | GitHub - Arkshine/discourse-banner-featured-links · GitHub |
 |
Guide d’installation | Comment installer un thème ou un composant de thème |
 |
Nouveau sur les thèmes Discourse ? | Guide pour débutant sur l’utilisation des thèmes Discourse |
Installer ce composant de thème
Résumé
Banner Featured Links vous permet de créer une bannière de liens.
Il offre une large gamme d’options de personnalisation.
C’est une fonctionnalité inspirée du fantastique thème Discourse “Meta Branded”.
Fonctionnalités
L’apparence par défaut – elle utilise la couleur du thème.
Le bouton peut être stylisé séparément :
Vous pouvez placer les liens à divers endroits via le paramètre plugin outlet.
Une liste des emplacements courants est fournie dans la description.
Par exemple, si vous souhaitez imiter le thème Meta Brand, utilisez la sortie search-banner-below-input. Cela suppose que vous avez installé le composant Search Banner.
Détails
Le style actuel peut être obtenu avec les paramètres suivants :
Je vous encourage à essayer votre propre style !
Paramètres
Général
| Nom | Description |
|---|---|
links |
Liens textuels à afficher dans l’en-tête. |
show_for_members |
Afficher les liens pour les utilisateurs connectés. |
show_for_anon |
Afficher les liens pour les utilisateurs anonymes. |
display_on_mobile |
Afficher les liens sur les appareils mobiles. |
display_on_desktop |
Afficher les liens sur les ordinateurs de bureau. |
display on homepage |
Afficher les liens sur la page d’accueil. |
url must contain |
Saisissez les chemins qui doivent afficher la bannière. Ajoutez * à la fin du chemin comme caractère générique. |
plugin outlet |
L’emplacement où afficher les liens.Emplacements courantsabove-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-streamComposant Search Banner : search-banner-below-headlinesearch-banner-below-input |
Paramètre links :
| Nom | Description |
|---|---|
| Icône | L’icône ou l’émoji FontAwesome à afficher pour les liens.RaccourcisWindows : Win + .. Mac : Cmd + Ctrl + Espace ChromeOS : Lancer + Maj + Espace |
| Titre | Le titre du lien. |
| URL | L’URL vers laquelle rediriger. |
| Cible | Ouvre le document lié :_blank : dans une nouvelle fenêtre ou un nouvel onglet (c’est le défaut)_self : dans le même cadre que celui sur lequel on a cliqué_parent : dans le cadre parent_top : dans le corps complet de la fenêtre. |
Vous pouvez également styliser chaque bouton individuellement. Cela remplacera le style global.
| Nom | Description |
|---|---|
| Largeur | La largeur du bouton. |
| Police | La police du bouton. |
| Arrondi | La quantité d’arrondi à appliquer au bouton. |
| Arrière-plan | La couleur d’arrière-plan du bouton. |
| Arrière-plan au survol` | La couleur d’arrière-plan du bouton au survol. |
| Couleur` | La couleur du texte du bouton. |
| Couleur au survol` | La couleur du texte du bouton au survol. |
| Bordure | La bordure du bouton. |
| Bordure au survol | La bordure du bouton au survol. |
| Ombre | L’ombre du bouton. |
| Classe CSS | Une classe CSS personnalisée à appliquer au bouton. Utile si vous souhaitez styliser le bouton différemment et que les paramètres ne suffisent pas. Vous pouvez cibler avec .banner-featured-links__link.votre-classe {} |
Style global
Personnalisez l’espacement et l’apparence par défaut des liens.
Vous pouvez remplacer le style des boutons pour chaque lien individuellement.
Style du conteneur des boutons
Personnalisez le conteneur des liens.
| Nom | Description |
|---|---|
largeur maximale du conteneur des boutons |
La largeur maximale du conteneur des boutons. |
marge du conteneur des boutons |
La marge du conteneur des boutons. |
largeur maximale du conteneur des boutons mobile |
La largeur maximale du conteneur des boutons sur mobile. |
marge du conteneur des boutons mobile |
La marge du conteneur des boutons sur mobile. |
Espacement des boutons et police de texte
Personnalisez l’espacement des boutons et la taille de la police du texte.
| Nom | Description |
|---|---|
justification des boutons |
Comment distribuer l’espace entre et autour des liens. |
espacement des boutons |
L’espacement entre les boutons. |
police des boutons |
La police des boutons. |
justification des boutons mobile |
Comment distribuer l’espace entre et autour des liens sur mobile. |
espacement des boutons mobile |
L’espacement entre les boutons sur mobile. |
direction des boutons mobile |
La direction des boutons sur mobile. |
police des boutons mobile |
La police des boutons sur mobile. |
Style des boutons
Personnalisez l’apparence par défaut des boutons.
| Nom | Description |
|---|---|
largeur du bouton |
La largeur du bouton. |
remplissage du bouton |
Le remplissage du bouton. |
arrondi du bouton |
La quantité d’arrondi à appliquer au bouton. |
arrière-plan du bouton |
La couleur d’arrière-plan du bouton. |
arrière-plan du bouton au survol |
La couleur d’arrière-plan du bouton au survol. |
couleur du bouton |
La couleur du texte du bouton. |
couleur du bouton au survol |
La couleur du texte du bouton au survol. |
bordure du bouton |
La bordure du bouton. |
bordure du bouton au survol |
La bordure du bouton au survol. |
ombre du bouton |
L’ombre du bouton. |
Personnalisation avancée
Vous pouvez utiliser le CSS suivant pour personnaliser davantage :
.banner-featured-links {
&__wrapper {
}
&__wrapper-links {
}
&__link {
}
}
Si vous fournissez une personnalisation par bouton, vous pouvez spécifier un nom de classe dans le paramètre Classe CSS.
Ensuite, vous pouvez cibler de cette manière :
.banner-featured-links {
&__link.ma-classe {
}
}
Liens utiles
- Variables CSS de base de Discourse : discourse/app/assets/stylesheets/color_definitions.scss at main · discourse/discourse · GitHub
”,“text”:"Rejoignez notre programme Champion ! ",“url”:“
”, “text” => “Nouveaux Widgets”, “target” => “_self”, “button_color_hover” => “
.
