Hai creato un nuovo componente tema e lo hai aggiunto, in questo caso, al tema Air?
Hai visto le mie mod sopra. Stai cercando di sovrascrivere parti delle impostazioni del tema o, come nel mio post sopra, aggiungere mod/correzioni?
Grazie Dan! Sono riuscito a capire come aggiungere un nuovo componente e poi aggiungere CSS personalizzato lì.
1 Mi Piace
Se si desidera sovrascrivere un’impostazione. Usare “!important”
Ad esempio
.some-selector {
padding-top: 2.5em !important;
{
Sto ancora imparando. Discourse è molto diversificato.
2 Mi Piace
Grazie per il fantastico tema. Funziona tutto. Ma ho la domanda su come posso cambiare l’immagine di sfondo?
Grazie per l’aiuto
2 Mi Piace
Crea un componente tematico e aggiungilo con la tua immagine di sfondo
html .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url();
background-size: cover;
opacity: 1;
/* background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%); */
clip-path: unset;
background-color: var(--secondary) !important;
}
3 Mi Piace
Ciao ragazzi,
C’è un modo per aggiungere alcuni link esterni nell’intestazione vicino al logo?
Grazie!
C’è questo:
E
C’è anche un plugin che aggiunge una barra con menu a tendina sotto l’intestazione del sito
2 Mi Piace
Ciao,
Grazie mille per aver dedicato del tempo a rispondere.
Stavo usando questo ma non ero del tutto soddisfatto: Custom Top Navigation Links
Il tuo secondo suggerimento è esattamente ciò di cui ho bisogno, sono davvero felice del risultato.
Grazie mille per il tuo aiuto!
1 Mi Piace
Ciao a tutti,
Scusate per questo doppio messaggio, ma c’è un modo per mostrare le sottocategorie sia sul desktop che sul mobile e allo stesso tempo visualizzare i titoli completi delle categorie sul mobile quando sono un po’ lunghi?
La mia configurazione è CATEGORY BOXES WITH SUBCATEGORIES ma senza usare Modern Category + Group Boxes.
Il risultato è ottimo sul desktop e sul mobile quando uso la versione desktop. Ma con la versione mobile non si riesce a leggere la fine di alcuni titoli di categoria.
Grazie mille per il vostro aiuto!
Puoi postare uno screenshot?
1 Mi Piace
Vedo sottocategorie mostrate in entrambi. Desideri avere la descrizione della categoria in entrambi? O rispecchiare il desktop senza descrizioni?
Mi scusi se non sono stato chiaro.
Vorrei vedere i titoli completi delle categorie.
Ad esempio, nella versione desktop hai «Discussions Générales sur la mode» ma nella versione mobile hai solo «Discussions Générales».
1 Mi Piace
Non sono sicuro del codice CSS a memoria. Ma dovresti essere in grado di far andare a capo il titolo della categoria come nella prima immagine che hai pubblicato.
Forse prova a ispezionare l’elemento sul desktop per vedere se riesci a identificare il CSS utilizzato per far andare a capo il nome della categoria su 2 righe.
Ho provato un po’ di CSS con ChatGPT e Claude, ad esempio:
.category-box-heading,
.category-box-heading a,
.category-box-heading h3 {
max-width: 100%;
width: 100%;
display: block;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.4;
padding: 5px 0;
}
.parent-box-link {
display: block;
width: 100%;
}
@media screen and (max-width: 767px) {
.category-box-heading h3 {
font-size: 16px; /* Regola questo valore in base alle tue esigenze */
}
}
Ma non funziona.
C’è un modo per forzare la visualizzazione desktop su mobile? Sarebbe perfetto avere la descrizione e le sottocategorie.
Grazie!
Hai provato a vedere come appare la visualizzazione desktop su un cellulare? Non è eccezionale su alcuni cellulari.
Grazie per la tua risposta.
Ho appena provato su 2 iPhone ed era così.
Che è esattamente quello che sto cercando.
Idealmente vorrei che i miei utenti avessero questa visualizzazione direttamente senza giocare con le impostazioni.
Disabilita il tuo componente personalizzato. Crea un nuovo componente di test in CSS mobile, prova questo
.category-box-heading h3 {
//* Potrebbe essere necessario decommentare le 2 righe seguenti.
// Overflow: unset !important;
// Text-overflow: unset !important;
text-wrap: balance !important;
}
Sono abbastanza sicuro che non avrai bisogno di altre modifiche CSS.
Appena testato. Non funziona nemmeno con il mio snippet.
Ultima versione del codice efficace:
.full-width .contents .topic-list thead th.posts {
width: 10%;
}
.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}
th.num.views {
width: 10%;
order: 3;
display: block;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}
.topic-list .views {
width: 10% !important;
order: 3 !important;
display: flex !important;
visibility: visible !important;
justify-content: center;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.views {
width: 10% !important;
order: 3 !important;
display: flex !important;
justify-content: center;
align-items: center;
}
2 Mi Piace
