Salve a tutti, ho visto questo flaum.it e l'intestazione che hanno è davvero bella, con i suoi pulsanti di collegamento, mi è piaciuto molto, come posso avere qualcosa come l'hanno loro, sembra spettacolare, congratulazioni, saluti.
Mi potete aiutare per favore. :
Ho già visto il codice in codepen, ma ho un problema con la modalità Dark, appare solo nella parte dell'eroe, cosa devo fare per fargli accettare FoF night mode
Ciao, sembra che tu sia interessato a questo post!
Quando crei un account, potremo ricordare esattamente cosa hai letto, in modo che tu possa riprendere esattamente da dove hai lasciato. Riceverai inoltre notifiche, qui o via email, quando qualcuno ti risponde. Potrai anche mettere "Mi piace" per mostrare il tuo apprezzamento. Clicca sul pulsante qui in basso per creare un account!
fcodonlucas Ciao e benvenuto 
Per la tua domanda devi aspettare una risposta da @Marko ma mi sembra che sia un codice HTML personalizzato che è stato usato qui su Flarum.
Ho già visto il codice in codepen, ma ho un problema con la modalità Dark, appare solo nella parte dell'eroe, cosa devo fare per fargli accettare FoF night mode
Dovresti dettagliare meglio quale problema riscontri
peopleinside grazie per aver risposto
Quando inserisco il codice HTML personalizzato che stai usando qui in Flarum, quando voglio attivare la modalità oscura, tutto non è visibile in generale, alcune parti sono scure e altre sono luminose
Capisco.
Riscontri lo stesso comportamento che (mi sembra di capire) ritieni problematico anche qui su Flarum.it? In caso contrario potrebbe essere utile uno screenshot per capire meglio.
Qui su Flarum.it vedo che i bottoni sono bianchi in modalità Dark, tutto il resto è scuro. È un comportamento voluto.
In ogni caso personalmente non posso aiutarti con il codice perche non mi occupo di sviluppo. Magari Marko potrà darti qualche dritta.
È in modalità oscura e la parte dell'intestazione è bianca e anche la parte inferiore, solo dove sembra scura non c'è nient'altro
fcodonlucas capisco, grazie dello screen.bPotrebbe aiutarti il supporto dell'estensione Night mode.
Come precedentenente spiegato non mi occupo di codice o di programmazione
fcodonlucas
benvenuto!, intanto devi installare l'estensione Fof Night mode, successivamente nel tuo css ti basterà inserire le regole della parte "dark" in questo selettore:
body when (@config-dark-mode = true) {
// il tuo css dark qui
}Grazie mille, lo farò e ti farò sapere se va tutto bene, grazie ancora per la risposta.
Ciao Marco, la modalità notturna non è ancora perfetta, ho lo stesso problema, solo l'eroe diventa scuro, ti mando lo script CSS, non so se è giusto
body when (@config-dark-mode = true) {
.App-header{background:#f7f9f9}
}
body when (@config-dark-mode = true) {
.Hero h2{font-size:25px;font-weight:700}
}
body when (@config-dark-mode = true) {
.Post-body code{border:1px solid #ddd;border-left:3px solid #3bab4b;color:#666;page-break-inside:avoid;font-family:monospace;font-size:15px;max-width:100%;display:inline-block;word-wrap:break-word;border-radius:4px;margin-left:8px;margin-right:8px}
}
body when (@config-dark-mode = true) {
.Post-body pre code{border:1px solid #ddd;border-left:3px solid #f36d33;color:#666;page-break-inside:avoid;font-family:monospace;font-size:15px;line-height:1.6;margin-bottom:1.6em;max-width:100%;overflow:auto;padding:1em 1.5em;display:inline-block;word-wrap:break-word;border-radius:10px}@media screen and (width :320px) and (width :480px){
}
body when (@config-dark-mode = true) {
.slogan{font-family:Mukta,sans-serif;margin:auto;text-align:center;color:#2d3748;float:none}}
}
.line{width:100%;height:7px;margin:0;padding:0;background-color:#fc6b03;position:absolute;top:0;left:0}section{height:310px;background-color:#f7f9f9}div
.logo{margin:0 auto;width:400px}
.logo{width:auto;height:auto;float:none;padding:13px 0 0 0}.slogan{font-family:Mukta,sans-serif;margin:auto;max-width:430px;padding:0;text-align:center;color:#2d3748;padding:.1px 0 0 0;float:none}#containerbtn{text-align:center}
.myButton{box-shadow:inset 0 3px 0 0 #e7752e;background:linear-gradient(to bottom,#fff 5%,#f6f6f6 100%);background-color:#fff;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;cursor:pointer;color:#666;font-family:Arial;font-size:15px;font-weight:700;padding:10px 18px;text-decoration:none;text-shadow:0 1px 0 #fff}
.myButton:hover{background:linear-gradient(to bottom,#f6f6f6 5%,#fff 100%);background-color:#f6f6f6}
.myButton:active{position:relative;top:1px}body{background:#f7f9f9}.DiscussionList-loadMore button{box-shadow:inset 0 3px 0 0 #e7752e;background:linear-gradient(to bottom,#fff 5%,#f6f6f6 100%);background-color:#fff;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;cursor:pointer;color:#666;font-family:Arial;font-size:15px;font-weight:700;padding:10px 18px;text-decoration:none;text-shadow:0 1px 0 #fff}.social_links{padding:10px;background-color:rgba(232,236,243,.7);width:380px;border-radius:1rem;margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:center;margin-left:auto;margin-right:auto}.social_links .combo{transform:scale(.9);transition:.4s ease-in;margin:0 .1rem;height:3em;width:3em;line-height:3em}
.combo .circle{color:#f9f9f9;transition:.4s ease-in;font-size:3em}
.combo .icon{color:#444343;font-size:2rem;transform:translateY(1px);transition:.2s ease-in}.combo:hover{transform:scale(1.1)}
.combo:hover,.combo:hover .icon{color:#fff}.ig:hover,.ig:hover .circle{color:#e91e63}
.fb:hover,.fb:hover .circle{color:#2196f3}.yt:hover,.yt:hover .circle{color:#f44336}.tw:hover,.tw:hover .circle{color:#2196f3}.gt:hover,.gt:hover .circle{color:#1f1f1f}div.PostStream div.PostStream-item:not(:first-child) article.CommentPost.Post.Post--by-start-user .Post-header h3:after{content:"Autore";background:#f05d1d;border-radius:4px;padding-left:10px;padding-right:10px;color:#fff;margin-left:14px}@media (max-width:800px){.tophead{display:none}}
@media (min-width: 700px) {
.DiscussionPage-nav, .DiscussionPage-nav>ul {
position: sticky;
top: 194px;
}
.App {overflow-x: visible;}
}
.Post::before, .Post::after {content:none;}
.Achievements--User .Badge {
box-shadow: none;
}fcodonlucas non c’è bisogno che ripeti la regola ogni volta, puoi mettere tutte le regole relative alla dark mode tra le parentesi graffe.
Per il resto magari il selettore è errato o va sovrascritto con !important
Grazie Marco, è molto chiedere se puoi aiutarmi con lo script per inviarmelo, non sono molto bravo con le cose da sviluppatore, sono più un designer, spero che tu possa aiutarmi con quella parte, Lo apprezzerei molto…. Saluti e abbi cura di te.
diciamo che puoi scrivere tutte le regole all'interno così:
body when (@config-dark-mode = true) {
.App-header{background:#f7f9f9}
.Hero h2{font-size:25px;font-weight:700}
.Post-body code{border:1px solid #ddd;border-left:3px solid #3bab4b;color:#666;page-break-inside:avoid;font-family:monospace;font-size:15px;max-width:100%;display:inline-block;word-wrap:break-word;border-radius:4px;margin-left:8px;margin-right:8px}
.Post-body pre code{border:1px solid #ddd;border-left:3px solid #f36d33;color:#666;page-break-inside:avoid;font-family:monospace;font-size:15px;line-height:1.6;margin-bottom:1.6em;max-width:100%;overflow:auto;padding:1em 1.5em;display:inline-block;word-wrap:break-word;border-radius:10px}@media screen and (width :320px) and (width :480px){
.slogan{font-family:Mukta,sans-serif;margin:auto;text-align:center;color:#2d3748;float:none}}
}come ad esempio ho fatto io qui in flarum.it
body when (@config-dark-mode = true) {
h2.DiscussionHero-title {
color: white;
}
code.hljs.language-bash {
background-color: #2a303a;
}
span.hljs-string {
color: #00ff1f !important;
}
.Post-body code {
background-color: #2a303a;
}
}Marko
Grazie mille per il tuo insegnamento e per avermelo spiegato, abbi cura di te e grazie ancora.
