Utilizzo di emoji al posto delle icone nel banner del link di benvenuto

Sviluppatore
1

Domanda: I colori del banner rispettano di default i colori del tema, ad esempio se il forum è in modalità scura?

Inoltre, due richieste di funzionalità:

  • Sarebbe fantastico poter cambiare l’allineamento per essere allineato a sinistra invece che centrato (anche se immagino sia semplice con il css)
  • Mi piacerebbe poter usare emoji invece di icone Font Awesome
2 Mi Piace
2

Dalla mia esperienza, sì: vedi i miei screenshot qui: Third migration, once again for a niche forum (Volkswagen Campers vans)

Un po’ hacky… Ma puoi farlo solo con CSS:

.featured-todo div {
    h3 {
        background: no-repeat top center;
        background-size: 30px 30px; // emoji width and height
        padding-top: 45px; // emoji height + 15 px margin down
        svg {
            display: none !important;
        }
    }
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

image
image1088×300 21.5 KB

A quale parte ti riferisci?

4 Mi Piace
3

Grazie per il tuo aiuto @Canapin

I tre link e le loro icone, vorrei che il testo e le icone fossero tutti allineati a sinistra anziché al centro, sia su desktop che su mobile. Ho una conoscenza di base di css/html e non sono riuscito a capire come cambiarlo usando gli strumenti per sviluppatori.

1 Mi Piace
4

Con icone:

.featured-todo div h3 {
    display: flex;
    align-items: center;
    svg {
        margin: 0 10px 0 0 !important;
    }
}

image
image1304×356 21.1 KB

Con emoji:

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // larghezza e altezza emoji
        padding-left: 45px; // larghezza emoji + 15 px margine sinistro
        svg {
            display: none !important;
        }
    }
    
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

image
image1293×368 24.6 KB

Nota: Non ho testato nessuna di queste personalizzazioni su dispositivi mobili.

4 Mi Piace
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.