Mi è piaciuto molto il tema condiviso nel 2016 da @jsthon. Non sono più attivi da quando è stato pubblicato inizialmente, quindi l’ho aggiornato, ampliato e aggiunto a GitHub.
Disattiva l’immagine di sfondo e le impostazioni di mosaico sopra.
Questo tema dispone di tre impostazioni:
Un campo per aggiungere la tua immagine di sfondo
Un’opzione per creare un mosaico
Un’opzione per rimuovere entrambe le opzioni precedenti
Se disattivi l’opzione mosaico, l’immagine verrà impostata su background-size: cover e il browser ridimensionerà l’immagine per coprire proporzionalmente l’intero sfondo. Ad esempio:
Am I the only one with this problem using this theme ? When I test in google page speed gets 99% but the page doesn’t load, so the results are misleading.
What is it because google can’t see - it doesn’t load this page?
Hmm, yeah I’m seeing the same issue… it seems like something in the theme is interfering with the version of Discourse we serve Google. I’ll investigate. Looks like it might be the same issue messing with the print view reported above.
Sto cercando di rendere Graceful molto più ampio su desktop. Ho provato questo:
#main-outlet {
width: auto;
max-width: 1210px; /* Questo rende il contenitore largo quanto il logo/intestazione */
}
E questo CSS ha reso il contenitore generale più ampio; e gli argomenti suggeriti in fondo si estendono bene nella pagina, ma la larghezza complessiva dei post negli argomenti è troppo stretta (per la mia versione ampia).
Ho provato con l’ispettore e diversi elementi, ma non essendo un esperto, non sono riuscito a far corrispondere la larghezza degli argomenti/post a quella di #main-outlet.
Ti dispiacerebbe aiutarmi?
Grazie
Inoltre, ho provato questo:
#main-outlet {
width: auto;
max-width: 80%;
}
Ma non riesco a far corrispondere la larghezza dei post a quella del contenitore:
Non è molto elegante, ma almeno funziona “bene” con grandi blocchi di codice; è più leggibile sullo schermo grande degli sviluppatori.
Sarebbe bello mostrare la classe .timeline-container, ma non sono riuscito a farla funzionare sovrascrivendo la classe come suggerito, sicuramente a causa delle mie competenze CSS non ancora ben sviluppate:
Adoro questo tema finora. Molte grazie per averlo condiviso con noi!
Ho notato che nella visualizzazione mobile le barre colorate delle categorie scompaiono. È intenzionale e c’è un modo per ripristinarle?
Inoltre, esiste un modo per disattivare lo sfondo se una categoria ha uno sfondo impostato? Sembra funzionare bene, ma quando scorri nei post lunghi lo schermo diventa scattoso e si intravede lo sfondo impostato dal tema.
Tuttavia, so che queste modifiche verranno sovrascritte ogni volta che il tema viene aggiornato. Qual è il modo migliore per mantenere le modifiche in questi casi?
Ho già un componente tema personalizzato dove conservo le modifiche CSS personalizzate, inserite nella sezione CSS per mobile:
…ma non mostra il colore specifico della categoria, bensì una barra bianca. Come posso fare in modo che appaia il colore corretto della categoria? So che ha a che fare con le variabili dei colori delle categorie, ma non riesco a trovare alcun riferimento ad esse.
Sono un principiante per quanto riguarda il CSS e simili, quindi potrei stare facendo qualcosa di sbagliato.
Devo essere un po’ lento, ma non riesco a far cambiare dimensione al logo con un componente del tema creato per regolare il CSS. Riesco a modificare l’altezza complessiva dell’intestazione, ma il logo rimane ostinatamente uguale. Questo CSS sembra annullare qualsiasi tentativo di modifica:
.d-header #site-logo {
max-height: 35px !important;
}
Secondo l’ispettore di Chrome, proviene da: desktop-scss-graceful.scss
La modifica delle dimensioni del logo funziona bene con il tema predefinito e, come ho detto, cambiare l’altezza dell’intestazione funziona con Graceful, ma non il logo…
Sì, !important sovrascrive qualsiasi altro CSS senza !important… Non ricordo perché sia lì, ma dovrei verificare se è possibile rimuoverlo. Funziona se includi !important nel tuo CSS?
.d-header #site-logo {
max-height: 50px !important; // <--- la tua altezza personalizzata qui
}
Grazie per la risposta veloce! Avevo effettivamente notato il !important e provato ad aggiungerlo al mio, senza successo. La cosa strana è che, provando ora, quando salvo la modifica e la pagina si ricarica, per un istante appare della dimensione corretta, poi si rimpicciolisce di nuovo. E nell’Inspector sembra che stia facendo la cosa giusta:
OK, prossima domanda, che penso sia specifica di questo tema. Lo sto usando come base per creare una sorta di “blog” personale (in realtà un giardino digitale, ma è un termine un po’ oscuro). Dato che praticamente ogni post sarà scritto da me, voglio rimuovere o ridurre la visibilità di alcuni elementi visivi legati all’autore, in particolare gli avatar, soprattutto nelle liste degli argomenti sulla pagina principale e nelle categorie. In rosso è evidenziato ciò che vorrei nascondere, se possibile:
Utilizzo degli strumenti di sviluppo di Chrome per trovare le classi/ID e tentare di nasconderli (nota a me stesso: non nascondere ember-view )
Sto anche esplorando e sperimentando vari componenti per mostrare la prima immagine di un argomento come miniatura. Se potessi sostituire quegli avatar con piccole miniature della prima immagine dell’argomento, sarebbe fantastico. Ma nasconderli è un buon punto di partenza.
. Non sono più attivi da quando è stato pubblicato inizialmente, quindi l’ho aggiornato, ampliato e aggiunto a GitHub.
Ospitato da noi? I temi sono disponibili per l’uso nei nostri piani Standard, Business ed Enterprise.
)