Theme Tip: Replacing forum icons with images

In IPS4, it's easy to add custom icons to your forums, simply by uploading them on the Edit Forum screen in the AdminCP. But if you want to replace all of your forum icons, uploading the same icon for each forum can be a bit tedious.

It's easy to use some custom CSS to replace all of the icons - lets see how.

First, you'll want to upload the image(s) you want to use to the Resources section of your theme so that it can be used in your CSS. To start with, we'll use the same image for both read and unread status, but we'll cover using a different icon for both too.

The basics

Here's the basic CSS to replace the icon for all forums with your custom image:

body[data-pageapp="forums"] .cForumRow .ipsItemStatus.ipsItemStatus_large {
	width: 50px;
	height: 50px;
	border-radius: 0;
	background-color: transparent;
	background-image: url('{resource="mushroom.png" app="core" location="front"}');
	background-size: 50px 50px;
}

body[data-pageapp="forums"] .cForumRow .ipsItemStatus.ipsItemStatus_large > i {
	display: none;
}

What we're doing here is specifically targeting the item status icons in the forums app, using the body[data-pageapp="forums"] selector. Within this style, we're setting the size of the icon - I've chosen 50px here which is about right in most cases, although you can change this if desired. Next we reset the border radius and background color so the icon looks right. And finally, we set the background image to our icon by using the {resource} tag and the background size to the same dimensions we just set the element to.

The next style hides the FontAwesome icon that IPS4 inserts by default, so that our icon can be seen.

Using a different 'read' icon

By default, your icon will be faded out for 'read' icons, but it's easy to use a completely different icon if you wish. Simply add:

body[data-pageapp="forums"] .cForumRow .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read {
	background-image: url('{resource="mushroom_faded.png" app="core" location="front"}');
}

All we're doing here is using a more specific selector with .ipsItemStatus_read so that only the 'read' state is targeted. In the style, we specify the background image - we don't need to set and reset the other rules again because the styles we wrote in the first step are inherited.

Using different icons for redirect or Q&A forums

If you want to add icons specifically for redirect or Q&A forums, you can do that by targeting unique classes that are added to the icons for those kinds of forums. Those classes are .cForumIcon_redirect and .cForumIcon_answers, respectively. So, to use a custom icon for a Q&A forum, you would add another style like so:

body[data-pageapp="forums"] .cForumRow .cForumIcon_answers.ipsItemStatus.ipsItemStatus_large {
	background-image: url('{resource="question.png" app="core" location="front"}');
}

Notice we've added .cForumIcon_answers to our selector.