Category logo on all topics within this category

Product Support

AI-generated summary

In a Support category discussion, Ed_Bobkov asked whether it’s possible to display a category-specific small logo on all topics within that category, instead of the general site logo. Canapin clarified whether the logo should appear on the topic page or topic list and suggested CSS or template edits. Ed_Bobkov explained that while Discourse doesn’t natively support category logos, he’d like the logo to appear in the header when viewing any topic in the category — replacing the site logo. Stranik proposed a CSS-based solution, noting that with 30 categories, one could target each via its body class (e.g., .category-support) to hide the default logo and replace it with a custom background image. Ed_Bobkov confirmed having 30 fixed categories and requested clearer CSS guidance. Stranik provided sample CSS to hide the site logo and insert a category-specific image using background-image, with dimensions and background-size: cover for flexibility. Ed_Bobkov confirmed the solution works with adjustments, noting that the category slug (from category settings) should be used in CSS selectors, and recommended using width, height, and background-size: cover to handle varying logo dimensions.

1

Is it possible to show a category logo on all topics within this category? I speak about “logo small”.
In my case it’s more appropriate to show a logo connected with this topic than a general site logo.
Thanks!

2

Do you want the logo to be displayed on a topic itself or also in the topics list?
I guess you can do that using some CSS.
Or editing templates… :thinking:

3

You see, here at Discrourse we don’t have logos for categories.
But if they were chosen, they would be here:

image
image1438×781 64.7 KB

and if the category logo was set up, I would like to see it when I open any topic within this category. in this case category logo should move small logo

image
image1339×771 42.8 KB

4

How many categories do you have?

If there are a reasonable number of categories, then this can be done through css. Just redefine the logo at the top. Using:

<body class = "category - ***

category-support, for example, in the topic in which we are now.

5

I’ll have a fix number of categories - 30.
Not sure what code to add to css. Can you give me more obvious hint? :slight_smile:

6

We remove the logo:

img#site-logo {
    display: none;
}

Or maybe this:

.category-support img#site-logo {
    display: none;  
}

1
11023×397 39.3 KB

I added for clarity your photo:

.category-support .title a {
    background-image: url(https://d3bpeqsaub0i6y.cloudfront.net/user_avatar/meta.discourse.org/ed_bobkov/45/177564_2.png);
    width: 35px;
    height: 35px;
    display: block !important;
}

2
21130×405 40.4 KB

You may have to repeat this code 30 times.

I gave an example of how to do this without a component / plugin. You can implement it somehow differently. Although, css for 30 categories does not take up much space.

7

Thanks! That’s working with some changes.
Hint: category name I should take from “Category Slug” in category settings.

Logo sizes may be different:
width: 65px;
height: 50px;
display: block !important;
background-size: cover;