\n\nIl tema Moderno di Pyx è il successore del mio vecchio tema, il tema Moderno di darkpixlz, che era un fork del tema Air. Era composto da circa 2500 righe e presentava molti problemi, quindi l’ho riscritto!\n\n\n## Screenshot\n\n[grid]\n
\n\n\n[/grid]\n\n## Caratteristiche\n- Supporta l’intera interfaccia di amministrazione e il pannello di revisione\n- Supporta quasi tutte le moderne funzionalità di base (nuova mappa argomenti, nuova pagina di aggiornamento, chat, …) e alcuni plugin\n- Immagine di sfondo personalizzabile\n- Aggiunge una proprietà --user-bg-url affinché i tuoi plugin possano leggere l’immagine di sfondo di un utente sui profili\n- Rispetto al mio vecchio tema, molte meno righe di codice (LOC) complessive e più facili da renderizzare per i dispositivi \n\n### Problemi noti\n\nNessuno al momento!\n\nTutti i contributi sul repository sono più che benvenuti e verranno (probabilmente) esaminati lo stesso giorno. Commenti o idee? Lascia una risposta qui. Problemi? Crea un’issue su GitHub per favore. \n\n\u003csmall\u003e\n\u003ci\u003eSi prega di notare che testo tutti i miei stili per Firefox e solo per Firefox; se Chromium dovesse dare problemi, non esitare a segnalare. Al momento non testo né verifico la visualizzazione mobile, ma il supporto è previsto.\u003c/i\u003e\n\u003c/small\u003e\n\nQuesto è tutto per ora - goditi il tema!"
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 Moderno di Pyx è il successore del tema Moderno di darkpixlz. \n| 
|Anteprima| Theme Creator |\n| 
|Repository| GitHub - pyxfluff/moderntheme: Modern theme for Discourse. |\n| 
|Guida all’installazione|Come installare un tema o un componente tema|\n| 
|Nuovo ai Temi di Discourse?| Guida per principianti all’uso dei temi di Discourse\n\n[wrap=theme-install-button repoUrl="https://github.com/pyxfluff/moderntheme\" repoName="Pyx’s Modern Theme"]\nInstalla questo tema\n[/wrap]\n\n
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à.
