 |
Riepilogo | Banner Featured Links ti permette di creare un banner di link. |
 |
Anteprima | Theme Creator |
 |
Repository | GitHub - Arkshine/discourse-banner-featured-links · GitHub |
 |
Guida all’installazione | Come installare un tema o un componente del tema |
 |
Nuovo a Discourse Themes? | Guida per principianti all’uso dei temi Discourse |
Installa questo componente del tema
Riepilogo
Banner Featured Links ti permette di creare un banner di link.
Offre un’ampia gamma di opzioni di personalizzazione.
È una funzionalità ispirata al fantastico tema Discourse “Meta Branded”.
Caratteristiche
L’aspetto predefinito: utilizza il colore del tema.
Il pulsante può essere stilizzato separatamente:
Puoi posizionare i link in vari punti tramite l’impostazione plugin outlet.
Nella descrizione è fornita una lista di posizioni comuni.
Ad esempio, se vuoi imitare il tema Meta Brand, usa l’outlet search-banner-below-input. Si presume che tu abbia installato il componente Search Banner.
Dettagli
Lo stile attuale può essere ottenuto con le seguenti impostazioni:
Ti incoraggio a provare il tuo stile!
Impostazioni
Generale
| Nome | Descrizione |
|---|---|
links |
Link di testo da visualizzare nell’intestazione. |
show_for_members |
Mostra i link per gli utenti connessi. |
show_for_anon |
Mostra i link per gli utenti anonimi. |
display_on_mobile |
Mostra i link sui dispositivi mobili. |
display_on_desktop |
Mostra i link sui computer desktop. |
display on homepage |
Mostra i link nella home page. |
url must contain |
Inserisci i percorsi in cui deve essere visualizzato il banner. Aggiungi * alla fine del percorso come jolly. |
plugin outlet |
La posizione in cui visualizzare i link.Posizioni comuniabove-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-streamComponente Search Banner: search-banner-below-headlinesearch-banner-below-input |
Impostazione links:
| Nome | Descrizione |
|---|---|
| Icon | L’icona FontAwesome o l’emoji da visualizzare per i link.ScorciatoieWindows: Win + . Mac: Cmd + Ctrl + Space ChromeOS: Launch + Shift + Space |
| Titolo | Il titolo del link. |
| URL | L’URL a cui collegare. |
| Target | Apre il documento collegato:_blank: in una nuova finestra o scheda (questo è il valore predefinito)_self: nel stesso frame in cui è stato cliccato_parent: nel frame genitore_top: nel corpo completo della finestra. |
Puoi anche stilizzare ogni pulsante singolarmente. Questo sovrascriverà lo stile globale.
| Nome | Descrizione |
|---|---|
| Larghezza | La larghezza del pulsante. |
| Font | Il font del pulsante. |
| Arrotondamento | La quantità di arrotondamento da applicare al pulsante. |
| Sfondo | Il colore di sfondo del pulsante. |
| Sfondo Hover` | Il colore di sfondo del pulsante quando ci passi sopra con il mouse. |
| Colore` | Il colore del testo del pulsante. |
| Colore Hover` | Il colore del testo del pulsante quando ci passi sopra con il mouse. |
| Bordo | Il bordo del pulsante. |
| Bordo Hover | Il bordo del pulsante quando ci passi sopra con il mouse. |
| Ombra | L’ombra del pulsante. |
| Classe CSS | Una classe CSS personalizzata da applicare al pulsante. Utile se vuoi stilizzare il pulsante in modo diverso e le impostazioni non sono sufficienti. Puoi targettarla con .banner-featured-links__link.tua-classe {} |
Stile Globale
Personalizza la spaziatura e l’aspetto predefiniti dei link.
Puoi sovrascrivere lo stile dei pulsanti per ogni link singolarmente.
Stile del Contenitore dei Pulsanti
Personalizza il contenitore dei link.
| Nome | Descrizione |
|---|---|
buttons wrapper max width |
La larghezza massima del contenitore dei pulsanti. |
buttons wrapper margin |
Il margin del contenitore dei pulsanti. |
mobile buttons wrapper max width |
La larghezza massima del contenitore dei pulsanti su mobile. |
mobile buttons wrapper margin |
Il margin del contenitore dei pulsanti su mobile. |
Spaziatura dei Pulsanti e Font del Testo
Personalizza la spaziatura dei pulsanti e la dimensione del font del testo.
| Nome | Descrizione |
|---|---|
buttons justify |
Come distribuire lo spazio tra e intorno ai link. |
buttons gap |
Il gap tra i pulsanti. |
buttons font |
Il font dei pulsanti. |
mobile buttons justify |
Come distribuire lo spazio tra e intorno ai link su mobile. |
mobile buttons gap |
Il gap tra i pulsanti su mobile. |
mobile buttons direction |
La direzione dei pulsanti su mobile. |
mobile buttons font |
Il font dei pulsanti su mobile. |
Stile dei Pulsanti
Personalizza l’aspetto predefinito dei pulsanti.
| Nome | Descrizione |
|---|---|
button width |
La larghezza del pulsante. |
button padding |
Il padding del pulsante. |
button rounding |
La quantità di arrotondamento da applicare al pulsante. |
button background |
Il colore di sfondo del pulsante. |
button background hover |
Il colore di sfondo del pulsante quando ci passi sopra con il mouse. |
button color |
Il colore del testo del pulsante. |
button colo hover |
Il colore del testo del pulsante quando ci passi sopra con il mouse. |
button border |
Il bordo del pulsante. |
button border hover |
Il bordo del pulsante quando ci passi sopra con il mouse. |
button shadow |
L’ombra del pulsante. |
Personalizzazione Avanzata
Puoi utilizzare il seguente CSS per personalizzare ulteriormente:
.banner-featured-links {
&__wrapper {
}
&__wrapper-links {
}
&__link {
}
}
Se fornisci una personalizzazione per pulsante, puoi specificare un nome di classe nell’impostazione CSS Classname.
Quindi, puoi targettarlo in questo modo:
.banner-featured-links {
&__link.miaclass {
}
}
Link utili
- Variabili CSS core di Discourse: 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”=>“
.
