Change Default Badge Colors (Bronze, Silver, Gold)

Development

AI-generated summary

The discussion revolves around changing the default badge colors (Bronze, Silver, Gold) in Discourse to match a custom theme. discoursejl initiated the conversation, seeking a solution. ondrej provided a CSS-based solution to change the badge colors, suggesting a helpful topic on making CSS changes on the site.

discoursejl successfully implemented the changes and then sought help to customize the colors on the user card. ondrej recommended using Chrome inspect and the Discourse style guide to find the necessary class names.

discoursejl found the style guide helpful and used it to adjust styling before launch. However, they struggled to change the color of users per trust level. Lilly provided the necessary CSS codes to change the background colors for each trust level (TL 1-4).

With Lilly’s help, discoursejl successfully completed the task, expressing gratitude and satisfaction with the outcome.

1

Possible to change the colors of badges from gold, silver and bronze to 3 colors that would better match our theme colors? Would like to change them to match a little better.

2

I’m no css wizard but this would be my solution… Just change the colours to whatever you want to match your theme colours better from below. Also I’d recommend reading this topic its was very helpful to me in the past as it helped me learn to do cool stuff with my site.

Bronze

.badge-card .badge-contents .badge-icon.badge-type-bronze .fa {
    color: #cd7f32 !important;
}

Silver

.badge-card .badge-contents .badge-icon.badge-type-silver .fa {
    color: silver !important;
}

Gold

.badge-card .badge-contents .badge-icon.badge-type-gold .fa {
    color: #e7c300 !important;
}
4

Legend. Thank you so much!

5

Do you just use inspect to find stuff? Got them all changed, but now trying to work on the ones that show on the user card. Chrome inspect the way to try to find our what things are named?

6

Yep just inspect stuff to find the class of what you need to make customisations. I find the styleguide helpful too.

7

Amazing! That style guide is key. It literally helped me adjust everything (styling before launch). Do you know if you can access the admin section from that? I couldn’t find it. The only thing left to address is the color of users per trust level. Tried to inspect but nothing would change this little bronze color container. This is the final task and I am determined to get it done today haha

Screenshot 2023-07-30 at 8.02.18 AM
Screenshot 2023-07-30 at 8.02.18 AM560×222 4.31 KB

8

that is in the admin dashboard so regular users won’t see it anyways. but here you go:

TL 1:

.user-metrics .table-cell.user-basic {
    background: [insert color code or variable here];
}

TL 2:

.user-metrics .table-cell.user-member {
    background: [insert color code or variable here];
}

TL 3:

.user-metrics .table-cell.user-regular {
    background: [insert color code or variable here];
}

TL 4:

.user-metrics .table-cell.user-leader {
    background: [insert color code or variable here];
}
9

Amazing. My OCD thanks you very much!!! :joy: