Banner di Categoria

Puoi risolvere con un po’ di CSS

Crea un nuovo Theme component aggiungi questo al css comune

// Personalizzazione di Who's Online
.discovery-list-container-top-outlet.online_users_widget {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
      padding-top: 0.5em
      padding-bottom: 0.5em;
}

Puoi anche aggiungere colore di sfondo personalizzato, bordi, ecc.

3 Mi Piace

Grazie mille!

2 Mi Piace

Facoltativamente, se si desidera evidenziare questo in questo modo

Utilizzare questo codice invece

// Personalizzazione di Chi è online
.discovery-list-container-top-outlet.online_users_widget {
      padding-top: 0.45em;
      padding-bottom: 0.05em;
      background-color: var(--secondary);
      border: 2.0px solid rgba(var(--primary-rgb), 0.2);
      border-radius: 0.65em;
      margin-top: 0.75em
      margin-bottom: 0.75em;
}
  • Margine regola lo spazio sopra e sotto “chi è online”
  • Il padding aumenta lo spazio all’interno del riquadro del bordo. Il bordo regola lo spessore del contorno del bordo.
2 Mi Piace

Leggermente fuori tema, ma quale coppia di font è questa @bekircem? Adoro come funzionano insieme!

1 Mi Piace

Ho una piccola richiesta di funzionalità che ritengo apporterebbe un grande miglioramento a questo componente. Mi piacerebbe avere un link “Leggi di più…” collegato alla descrizione della categoria. Una soluzione molto elegante per avere una descrizione lunga senza ingombrare la pagina della categoria. Posso aggiungere questo link manualmente, ma poi appare nella pagina delle Categorie, il che non è molto pulito.

3 Mi Piace

A questo codice manca un ; alla riga 5 e anche l’esempio di follow-up.

Quello che ha funzionato per me è questo:

.discovery-list-container-top-outlet.online_users_widget {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
  display: block !important;
}

Risultato:

3 Mi Piace

Fantastico. Sfortunatamente il mio post è troppo vecchio per correggere il codice. Grazie per avermi fatto sapere che mi è mancato il “;”

3 Mi Piace

C’è lo stesso problema per i collegamenti di tag e categorie. Potresti includere la classe .hashtag-cooked in questa correzione?

Per qualche motivo, questo non sta funzionando correttamente per me.
Alcune categorie e sottocategorie mostrano il banner, altre no.
Non è la descrizione (o la sua mancanza), perché alcune hanno la descrizione e non viene mostrata.

Non so se il nuovo aggiornamento di Discourse abbia rotto qualcosa?

Hai definito gli ID delle categorie nell’impostazione categories?

1 Mi Piace

Sì, li ho aggiunti all’Editor delle impostazioni degli oggetti.
Penso ci sia una specie di bug relativo all’opzione per nasconderlo quando non c’è una descrizione.

Farò qualche altro test e vedrò come va.

Ho appena notato un bug.
Mi trovo nella categoria principale Tiago | Music e clicco sulla sottocategoria Sir Giant. Viene mostrato il banner. Poi clicco su uno dei link “documentazione” nella barra laterale per andare a una pagina di tag Announcements. Quando clicco sul link General Discussion che mi riporta alla radice della sottocategoria Sir Giant, il banner è scomparso.

La prima volta che sono andato su Announcements, nessun banner. Quando vado alla pagina dei tag Music e poi di nuovo su Announcements, il banner ora è visibile.

Ho appena notato anche un’altra cosa: se mi trovo nella pagina Announcements e non vedo il banner, se clicco di nuovo sullo stesso link (Announcements) il banner appare, il che è chiaramente un bug.

3 Mi Piace

2 altri problemi:

1 - Mi trovo in una categoria con una descrizione. Vedo la descrizione nel banner. Quella descrizione contiene un link esterno al mio negozio online. Quando ci clicco, anche se ho l’impostazione per aprire tutti i link esterni in una nuova scheda, quel link si apre nella stessa scheda. E posso confermare che l’impostazione funziona, perché l’argomento stesso che definisce la descrizione del banner, apre il link in una nuova scheda.

2 - Ora, quando mi trovo sul sito web di quel link esterno (che si è aperto nella stessa scheda), devo premere Indietro nel browser per tornare alla sottocategoria. Questa volta, la descrizione è completamente scomparsa. Il banner e il suo titolo ci sono, ma nessuna descrizione. Anche se aggiorno e forzo l’aggiornamento del browser, non ritorna. L’unico modo per vederla di nuovo è tornare alla categoria principale e poi di nuovo alla sottocategoria.


EDIT: Ok, ho capito qualcosa. Non so cosa stia succedendo dietro le quinte, ovviamente, ma l’opzione rossa sta causando il problema. L’opzione verde funziona come previsto (sempre sullo schermo, indipendentemente da dove clicco, non c’è bisogno di fare doppio clic su un menu laterale per far tornare il banner):

3 Mi Piace

Posso riprodurre il tuo problema, ma non riesco a spiegarlo. :sweat_smile:

Tecnicamente (ignorami), questo è ciò che osservo con questo outlet header-list-container-bottom:

  • Se selezioni una sottocategoria → un tag, il componente viene inserito, e subito dopo viene chiamata teardownComponent (?). Ma il componente non viene distrutto. Con la classe category-header rimossa da \u003cbody\u003e dalla funzione di pulizia, alcuni CSS nascondono il banner. Puoi selezionare un altro tag per reinserire il componente.

    • Dalla stessa pagina, se fai clic su un link di documentazione nella barra laterale, ottieni lo stesso comportamento.
    • Non succede se selezioni una categoria dall’elenco a discesa, ad esempio.

È confuso perché, dopo essere stato inserito, viene chiamata subito will-destroy.

2 Mi Piace

Beh, almeno so che non sono solo io… è un bene.

Anche se non volessi, non ho idea di cosa tu stia parlando nella tua spiegazione, ahah. Ma è un bene che tu sappia che qualcosa che dovrebbe funzionare in un certo modo, non lo fa. Questo è probabilmente un passo nella giusta direzione per risolverlo.

Quindi il problema sembra essere con la posizione del banner, perché come ho detto, una delle opzioni (almeno, perché in realtà non ho provato le altre due), funziona.

1 Mi Piace

Quando seleziono ‘Mostra logo della categoria’, il logo appare due volte - una volta dalla impostazione della categoria e una volta da questo componente del tema. Sto commettendo un errore?

Inoltre, è possibile far apparire il titolo e/o la descrizione ‘about’ sotto il logo?

No, è un bug noto. C’è anche del CSS che puoi aggiungere per nascondere un logo in quell’argomento

Grazie, Moin! Il CSS ha sistemato l’immagine per me.

Per mettere il nome della categoria sotto l’immagine, questo ha funzionato per me:

.category-title-contents,
.category-title-header.category-banner-1slug .category-title-contents {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;}
.category-logo,
.category-title-header.category-banner-1slug .category-logo {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;}
.category-title,
.category-title-header.category-banner-1slug .category-title {
    width: 100%;
    margin-top: 20px;
    text-align: left;}

Ciao! Forse qualcuno può aiutarmi a risolvere un problema piuttosto strano che si è presentato all’improvviso.

Tutti i titoli nei banner erano bianchi, ma ora sono diventati neri e solo in alcune categorie… È un bug noto, o dovrei forse controllare qualcosa da parte mia?

Ad esempio:

Il link alla nostra community, non si sa mai: https://community.elfsight.com/

1 Mi Piace