Utiliser des emojis au lieu d'icônes dans la bannière de lien de bienvenue

Dev
1

Question : Les couleurs de la bannière respectent-elles par défaut les couleurs du thème, par exemple si le forum est en mode sombre ?

Aussi, deux demandes de fonctionnalités :

  • Ce serait bien de pouvoir changer l’alignement pour qu’il soit aligné à gauche au lieu d’être centré (bien que j’imagine que ce soit simple avec du CSS)
  • J’aimerais beaucoup pouvoir utiliser des emojis au lieu des icônes Font Awesome
2 « J'aime »
2

D’après mon expérience, oui : voir mes captures d’écran ici : Third migration, once again for a niche forum (Volkswagen Campers vans)

Un peu bricolé… Mais vous pouvez le faire uniquement avec 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

De quelle partie parlez-vous ?

4 « J'aime »
3

Merci pour votre aide @Canapin

Les trois liens et leurs icônes, je voudrais que le texte et les icônes soient tous alignés à gauche plutôt qu’au centre, sur ordinateur et sur mobile. J’ai des connaissances de base en css/html et je n’ai pas réussi à trouver comment le changer en utilisant les outils de développement.

1 « J'aime »
4

Avec des icônes :

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

image
image1304×356 21.1 KB

Avec des emojis :

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // largeur et hauteur de l'emoji
        padding-left: 45px; // largeur de l'emoji + 15 px de marge gauche
        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

Remarque : Je n’ai testé aucune de ces personnalisations sur mobile.

4 « J'aime »
5

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