Custom Category Icons

#1 · April 19, 2018, 1:00 pm

Hi all,

I’m using the Asgaros forum on the Wordpress.com business plan.

I want to be able to add custom category icons.

Is there a plugin that will do it?

Regards,

Jim

#2 · April 19, 2018, 6:41 pm

Hello @jimcroisdale

You can add background-images/icons to categories with custom css-rules which you need to place in your themes style.css file. All you need to know is the id of a category and the URL to an image/icon, for example:

div#forum-category-4 {
    background-image: url(https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png);
}

jimcroisdale has reacted to this post.

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

#3 · April 20, 2018, 9:51 am

Hi @asgaros

Okay, so I uploaded my PNG into the media library and copied and pasted its URL into the code. Category number is 6:

div#forum-category-6 {
background-image: url(https://globalgravityracing.com/wp-content/uploads/2018/04/Category-Icons-01.png);
}

When I add to the CSS, nothing happens?

Jim

#4 · April 20, 2018, 7:40 pm

Seems to work fine for me. You just have to adjust the size of it a little bit. Dont forget to clear your cache to see the changes.

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

#5 · April 21, 2018, 11:17 am

See pic attached – doesnt like it!

Have edited the pic from 500px, to 250px then 100px and finally 72px but not playing. 🙁

Uploaded files:

#6 · April 21, 2018, 3:06 pm

Still working perfectly fine for me (see image below). Have you cleared your cache? Have you reloaded your website with CTRL + F5?

Uploaded files:

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

#7 · April 21, 2018, 4:02 pm

I suspect i may not be putting the code in the right place…

Uploaded files:

#8 · April 21, 2018, 4:40 pm

Hi,

Try to add your code in Editor > style.css.

But it should work where you added it. If you are on Mac, do not forget to make cmd + shift + R after each modification in CSS, to display them well.

#9 · April 21, 2018, 5:07 pm

I’m using the wordpress.com so I just get “You need to make this file writable before you can save your changes. See the Codex for more information.” but i have no idea how to make the .css or .functions files accessible?

#10 · April 21, 2018, 5:14 pm

Fixed it – was using an incorrect number for the category ID. Al;so worked out how to do individual forum backgrounds too!

How do you change the icons though? 🙂