Il tema Modern di Pyx è il successore del mio vecchio tema, il tema Modern di darkpixlz, che era un fork del tema Air. Era di circa 2500 righe e aveva molti problemi, quindi l’ho riscritto!
Supporta l’interfaccia di amministrazione completa e il pannello di revisione
Supporta quasi tutte le funzionalità principali moderne (nuova mappa degli argomenti, nuova pagina di aggiornamento, chat, …) e alcuni plugin
Immagine di sfondo personalizzabile
Aggiunge una proprietà --user-bg-url affinché i tuoi plugin possano leggere l’immagine di sfondo di un utente sui profili
Rispetto al mio vecchio tema, complessivamente molte meno righe di codice e più facile da renderizzare per i dispositivi
Problemi noti
La mappa degli argomenti appare strana e disallineata
Tutti i contributi al repository sono più che benvenuti e verranno (probabilmente) revisionati lo stesso giorno. Commenti o idee? Lascia una risposta qui. Problemi? Crea un problema su GitHub per favore.
Si prega di notare che testo tutti i miei stili solo per Firefox; se Chromium dovesse dare problemi, non esitate a segnalarlo.
Bene, sembra esserci un problema con l’assenza di componenti installati, e poi sembra cambiare il CSS delle immagini, facendone diventare molte rettangoli.
Mi chiedo se sia possibile aggiungere una scala adattiva? Vorrei avere un componente a barra laterale sul lato destro.
CSS
/* Ottieni la larghezza dell'avatar dell'utente e imposta la larghezza massima del contenitore dell'annuncio */
/* Stili del contenitore dell'annuncio */
#list-area {
display: flex; /* Disponi gli annunci usando flexbox */
flex-direction: column; /* Visualizza gli annunci verticalmente */
gap: 0; /* Rimuovi lo spazio tra le immagini degli annunci */
padding: 0; /* Rimuovi il padding del contenitore */
margin: 0; /* Assicurati che non ci siano margini extra attorno al contenitore dell'annuncio */
max-width: 812px; /* Limita la larghezza del contenitore dell'annuncio a un massimo di 812px (larghezza avatar: 48px) */
}
/* Stili del link dell'annuncio */
.banner-ad {
display: block; /* Rendi il contenitore dell'annuncio un elemento block */
width: 100%; /* Assicurati che il contenitore dell'annuncio occupi il 100% della larghezza */
max-width: 100%; /* Impedisci il superamento della larghezza massima */
margin: 0; /* Rimuovi lo spazio tra i contenitori degli annunci */
}
/* Stili dell'immagine dell'annuncio reattiva */
.ad-image {
width: 100%; /* Assicurati che l'immagine occupi l'intera larghezza del suo genitore */
height: auto; /* Mantieni le proporzioni originali dell'immagine */
max-width: 100%; /* Impedisci all'immagine di superare la larghezza massima del suo contenitore */
display: block; /* Risolvi il problema dello spazio vuoto sotto le immagini */
margin: 0; /* Rimuovi qualsiasi spazio aggiuntivo attorno all'immagine */
}
/* Design reattivo: regola la visualizzazione degli annunci per schermi grandi e piccoli */
/* Regola la visualizzazione degli annunci su dispositivi con larghezza inferiore a 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Assicurati che non ci sia padding extra sui dispositivi mobili */
}
.banner-ad {
width: 100%; /* Assicurati che l'annuncio occupi l'intera larghezza sugli schermi piccoli */
}
.ad-image {
width: 100%; /* Assicurati che l'immagine si adatti alla larghezza del contenitore */
height: auto; /* Mantieni le proporzioni dell'immagine */
}
}
/* Regola ulteriormente le immagini degli annunci su dispositivi molto piccoli (ad es. telefoni in modalità verticale) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Assicurati che le immagini si adattino alla larghezza dello schermo del telefono */
max-width: 100%; /* Imposta la larghezza massima al 100% per evitare un ingrandimento eccessivo */
height: auto; /* Mantieni le proporzioni dell'immagine */
}
}
Controllerò la cosa del componente laterale domani. Non prometto nulla sulla pubblicità perché non posso testarla, ma per il ridimensionamento generale dovrei essere in grado di risolverlo.
Mi dispiace, sono stato molto malato questa settimana, ho anche avuto altre cose da fare. Ho appena rifinito lo stream post, corretto molti bug e reso il composer mobile!
Inoltre, ho notato che la pagina del tema è stata ripristinata alla vecchia versione, il che ha causato molti problemi. Non mi impegnerò a risolvere nulla lì perché sento che verrà riaggiunto e sembrerà come previsto.
Purtroppo questo esula un po’ dall’ambito di questo tema perché è intenzionalmente unibody, quindi non adotterei un layout in cui la barra laterale è staccata. Se stai cercando un design simile, ti consiglio questi due fantastici temi:
Tuttavia, se il banner dell’intestazione è qualcosa che vorresti vedere supportato, sentiti libero di fornirmi un URL del sito e verificherò la possibilità di supportarlo.
tl;dr: Il tema è ora uscito dalla fase di “anteprima”! Sono abbastanza sicuro che funzionerà per la maggior parte dei siti e sarà stilizzato correttamente. Con questa nuova fase, non sto più cercando segnalazioni di bug qui, per favore aprite issue su GitHub d’ora in poi.
Continuate a inviare feedback, qualsiasi cosa è benvenuta. Grazie per il vostro continuo supporto anche se potrei essere lento :3
Altre buone notizie! Ho appena riscritto di nuovo il tema in modo che non sia più un unico file common.scss massiccio. Non dovrebbe apparire diverso, a parte alcune piccole correzioni che ho apportato. Divertiti :3
Mi è piaciuto molto il tema, ma ci sono alcuni “artefatti” che purtroppo mi impediscono di usarlo
La pagina “Profilo” ha un piccolo pulsante dietro l’intestazione che dice “salta al contenuto”
Quando provo a selezionare una palette di colori diversa (come utente, sul mio profilo) la selezione a discesa appare vicino al pulsante “salta al contenuto” che ho menzionato sopra (è così che mi sono reso conto che c’era)
| Riepilogo | Il tema Modern di Pyx è il successore del tema Modern di darkpixlz.
|Anteprima| Theme Creator |
|Repository| GitHub - pyxfluff/moderntheme: Modern theme for Discourse. |
|Guida all’installazione|Come installare un tema o un componente tema|
|Nuovo ai temi di Discourse?| Guida per principianti all’uso dei temi di Discourse
Sono abbastanza sicuro che funzionerà per la maggior parte dei siti e sarà stilizzato correttamente. Con questa nuova fase, non sto più cercando segnalazioni di bug qui, per favore 
, è stato risolto ora. Tutto dovrebbe tornare alla normalità.
