Usando emojis en lugar de íconos en el banner de enlace de bienvenida

Desarrollador
1

Pregunta: ¿Los colores del banner respetan por defecto los colores del tema, por ejemplo, si el foro está en modo oscuro?

Además, dos solicitudes de funciones:

  • Sería genial poder cambiar la alineación para que esté alineada a la izquierda en lugar de centrada (aunque me imagino que esto es simple con CSS)
  • Me encantaría poder usar emojis en lugar de iconos de Font Awesome
2 Me gusta
2

Por mi experiencia, sí: mira mis capturas de pantalla aquí: Third migration, once again for a niche forum (Volkswagen Campers vans)

Un poco rudimentario… Pero puedes hacerlo 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 qué parte te refieres?

4 Me gusta
3

Gracias por tu ayuda @Canapin

Los tres enlaces y sus iconos, me gustaría que el texto y los iconos estuvieran alineados a la izquierda en lugar de centrados, tanto en escritorio como en móvil. Tengo conocimientos básicos de css/html y no pude averiguar cómo cambiarlo usando las herramientas de desarrollador.

1 me gusta
4

Con iconos:

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

image
image1304×356 21.1 KB

Con emojis:

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // ancho y alto del emoji
        padding-left: 45px; // ancho del emoji + 15 px de margen izquierdo
        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: No probé ninguna de estas personalizaciones en dispositivos móviles.

4 Me gusta
5

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