Usando emojis em vez de ícones no banner do link de boas-vindas

Dev
1

Pergunta: As cores do banner respeitam as cores do tema por padrão, por exemplo, se o fórum estiver no modo escuro?

Além disso, duas solicitações de recursos:

  • Seria ótimo poder alterar o alinhamento para alinhado à esquerda em vez de centralizado (embora eu imagine que isso seja simples com CSS)
  • Eu adoraria poder usar emojis em vez de ícones do Font Awesome
2 curtidas
2

Pela minha experiência, sim: veja minhas capturas de tela aqui: Third migration, once again for a niche forum (Volkswagen Campers vans)

Um pouco “hacky”… Mas você pode fazer isso apenas com 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 que parte você está se referindo?

4 curtidas
3

Obrigado pela sua ajuda @Canapin

Os três links e seus ícones, eu gostaria que o texto e os ícones estivessem todos alinhados à esquerda em vez de centralizados, tanto no desktop quanto no mobile. Eu tenho conhecimento básico de css/html e não consegui descobrir como mudar isso usando as ferramentas de desenvolvedor.

1 curtida
4

Com ícones:

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

image
image1304×356 21.1 KB

Com emojis:

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // largura e altura do emoji
        padding-left: 45px; // largura do emoji + 15 px de margem esquerda
        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

Observação: Não testei nenhuma dessas personalizações no celular.

4 curtidas
5

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