Header Personalizzato

fcodonlucas

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. :

peopleinside

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 🙂

fcodonlucas

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

fcodonlucas

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

peopleinside

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.

fcodonlucas

peopleinside

È in modalità oscura e la parte dell'intestazione è bianca e anche la parte inferiore, solo dove sembra scura non c'è nient'altro

peopleinside

fcodonlucas capisco, grazie dello screen.bPotrebbe aiutarti il supporto dell'estensione Night mode.

Come precedentenente spiegato non mi occupo di codice o di programmazione 🙂

Marko

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
}

fcodonlucas

Marko

Grazie mille, lo farò e ti farò sapere se va tutto bene, grazie ancora per la risposta.

fcodonlucas

Marko

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;
}

Marko

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

fcodonlucas

Marko

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.

Marko

fcodonlucas

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;
}
}

fcodonlucas

Marko
Grazie mille per il tuo insegnamento e per avermelo spiegato, abbi cura di te e grazie ancora.