Using emojis instead of icons in the Welcome Link Banner

Dev
1

Question: Do the banner colors by default respect the theme colors e.g. if forum is in dark mode?

Also, two feature requests:

  • It would be great to be able to change the alignment to be left-aligned instead of centered (although I imagine this is simple with css)
  • I would love to be able to use emojis instead of font awesome icons
2 Likes
2

From my experience, yes: see my screenshots here: Third migration, once again for a niche forum (Volkswagen Campers vans)

A bit hacky… But you can make it with CSS only:

.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

Which part are you talking about?

4 Likes
3

Thank you for your help @Canapin

The three links and their icons, I would like the text and icons to be all left-aligned rather than center-aligned, on both desktop and mobile. I have basic knowledge of css/html and couldn’t figure out how to change it using developer tools.

1 Like
4

With icons:

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

image
image1304×356 21.1 KB

With emojis:

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // emoji width and height
        padding-left: 45px; // emoji width + 15 px margin left
        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

Note: I didn’t test any of these customizations on mobile.

4 Likes
5

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