IPS Suite How to make colorful sections and subforums in Invision Community.

[Haim]

Hi. Today I will show you how to make colorful sections and subforums in Invision Community. The guide was written on the IPS 4.1 version, so it is possible that it will not work on the newer version, then you will need to slightly modify the code.

First go to: ACP --> Appearance --> Styles and Templates --> Edit HTML and CSS --> CSS Tab --> custom --> custom.css

Paste the code below:

[data-forumid="2"] .ipsDataItem_title > a {
  color: #556e53; /* Kolor "A Test Forum" */
}
[data-forumid="2"] .ipsDataItem_subList > li:nth-child(1) a {
   color: #f87d09; /* Kolor "Test 1" */
}
[data-forumid="2"] .ipsDataItem_subList > li:nth-child(3) a {
   color: #a9c52f; /* Kolor "Test 3" */
}
.ipsDataItem_title > a:hover, .ipsDataItem_subList > li > a:hover {
  color: #ad1457 !important;
}

Click Save.

In data-forumid we add the ID of our selected department. In my case it's ID:2.

To find out what ID our department has, hover the mouse over the name of the department. The ID number is in the reference.

Example address:

xxxxxx.pl/forum/2-a-test-forum/

The department number is immediately after the slash /, which is "2" in the above case.

Then, in brackets () we give the number of the subforum to which we want to give the selected color.

li:nth-child(1)

Preview:

For 2 colors (for example: general forum)

[data-forumid="2"] .ipsDataItem_title > a {
   color: #556e53; /* Default color */
   background: -webkit-linear-gradient(right, #f00, #0f0); /* Gradient from left to right */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}