Give Each Section of Your Invision Site Its Own Look

Invision Community has no built-in way to give each section of a site its own colors. A little custom CSS can do it. Here's how I gave the Titanium and Cloud 10 areas of this site their own look.

The idea

Every page on an Invision site is tagged with its section and its ID number. A blog page, for example, is tagged as the blog app with the blog's number. Pages that sit inside a section, such as a post or a forum topic, link back to their parent section in the breadcrumb at the top. CSS can look for those clues and change the site's colors only when they appear.

Where to put it

1. In the admin area, open Customization, then Themes.

2. Duplicate your active theme first, so you have a backup.

3. Edit the theme's custom CSS and paste the code in.

4. Save, then hard refresh the page with Ctrl+Shift+R.

The colors

Invision builds its page colors from two theme colors, a primary and a secondary. To recolor a section, change those two values for the pages you pick. The values are set on the top-level page element, not on the page body, because that's where Invision calculates the colors it hands down to everything else. I tested this on Invision Community 5.

Example: the Titanium section

This block turns the Titanium blog (number 11) and the Titanium forum (number 222) purple and near-black. It also catches posts, topics and gallery pages inside them through the breadcrumb:

html:has(body[data-pageapp="blog"][data-id="11"]),
html:has(body[data-pageapp="forums"][data-id="222"]),
html:has(.ipsBreadcrumb--top a[href*="/blogs/blog/11-titanium"]),
html:has(.ipsBreadcrumb--top a[href*="/forums/forum/222-titanium"]) {
  --light__i-primary: hsl(262 20% 30%);
  --light__i-secondary: hsl(265 30% 9%);
  --dark__i-primary: hsl(262 20% 30%);
  --dark__i-secondary: hsl(265 30% 9%);
}

Template for your own sections

Swap in your own numbers and names. The number is in the web address of the blog or forum, such as /forums/forum/224-cloud-10-computers/:

html:has(body[data-pageapp="forums"][data-id="YOUR-FORUM-NUMBER"]),
html:has(.ipsBreadcrumb--top a[href*="/forums/forum/YOUR-FORUM-NUMBER-name"]) {
  --light__i-primary: hsl(200 28% 22%);
  --light__i-secondary: hsl(210 40% 7%);
  --dark__i-primary: hsl(200 28% 22%);
  --dark__i-secondary: hsl(210 40% 7%);
}

Use data-pageapp="blog" for blogs, "downloads" for download categories, and so on.

Tips I learned along the way

• Pages inside a section don't carry the section's number, so match them through the breadcrumb link instead.

• Some pages, such as a gallery category, don't link to themselves in the breadcrumb. For those, match the page's canonical address in the page head.

• Pick colors by changing the hsl numbers. The first number is the hue, the middle is how colorful it is, and the last is how light or dark.

• If the text in the header becomes hard to read on a dark background, raise the lightness a little.

Limits

This changes colors and accents only. A different layout for each section would need deeper theme work. Keep a copy of your CSS in a text file in case you ever switch themes.

Questions?

If you try this on your own Invision site and get stuck, post in the comments or in the Servers and Security forum and I'll help you work it out.