illuminate Custom node colours

[Ehren]

You might be able to use:

[data-template="tlg_category_view"]{

}

But if you need unique colors for each category, then I'm out of ideas in this case.

 

[Venthas]

You might be able to use:

[data-template="tlg_category_view"]{

}

But if you need unique colors for each category, then I'm out of ideas in this case.

Thanks! I've spoken with Trunglov, who has added the container keys

 

[Order of Hope e.V.]

Hey,
a little addition: If you activated the option "categoryOwnPage", that displays categories on own pages, you need to add the category id in the same way you added the node ids of the forums to apply the individual color settings to this category overview page.
I highlighted the addition to the original code in bold.
Edit: I highlighted it, but it doesn't apply to code... The third line was added, that's how it works for category pages as well.

// Orange
.block--category13,
html[data-container-key="node-13"],
html[data-container-key="node-15"],
html[data-container-key="node-16"]{
    --block-color: #b46a38;
}

 

[Qui-Ran Demera]

Open your extra.less file and add the following, replacing the id's with your own values:

This might be a stupid question, but... where can I find these?

 

[Ehren]

Hi @Qui-Ran Demera

Welcome to xenfocus!

Nope, not a stupid question! In your xenforo admin panel, click Appearance > Templates. Make sure your style is selected in the menu at the top of the list and then use the "Filter" input on the right to search for extra.less

 

[Qui-Ran Demera]

Hi @Qui-Ran Demera

Welcome to xenfocus!

Nope, not a stupid question! In your xenforo admin panel, click Appearance > Templates. Make sure your style is selected in the menu at the top of the list and then use the "Filter" input on the right to search for extra.less

Thank you very much That helped a great deal

 

[MvxDoe]

Hi, i try using custom code on extra.less but nothing change i would like to know if you could help me?

I try what Ehren say but seems to don't work

#header{
--block-color: #f00;
}

 

[Ehren]

Hi, i try using custom code on extra.less but nothing change i would like to know if you could help me?

I try what Ehren say but seems to don't work

#header{
--block-color: #f00;
}

That code changes the color of the header glow. Adding it to my site does this:

 

[MvxDoe]

That code changes the color of the header glow. Adding it to my site does this:

View attachment 2660

I want to change everything like this and make a specific color vor each category +the header and the code to change the header glow don't work for me

 

[Ehren]

I want to change everything like this and make a specific color vor each category +the header and the code to change the header glow don't work for me

You'll need to send me a PM with a username/password to your Admin Cpanel if possible. The code in this tutorial is correct and is working fine on my demo board, so there might be other code inside your extra.less file which is conflicting with the new code.

 

[MvxDoe]

You'll need to send me a PM with a username/password to your Admin Cpanel if possible. The code in this tutorial is correct and is working fine on my demo board, so there might be other code inside your extra.less file which is conflicting with the new code.

I dm you

 

[Ehren]

I dm you

Hello,

I copy/pasted the code from this tutorial (and modified the node values) and it worked just fine

 

[MvxDoe]

Hello,

I copy/pasted the code from this tutorial (and modified the node values) and it worked just fine

WTF me its was not working

 

[clos949]

You'll need to send me a PM with a username/password to your Admin Cpanel if possible. The code in this tutorial is correct and is working fine on my demo board, so there might be other code inside your extra.less file which is conflicting with the new code.

Is there any chance you can take a look on mine? I am getting a server error but not sure if that has anything to do with the theme. And I dont want to touch anything, I have no knowledge on xenforo. I am trying to fix the colors since I am only getting orange

 

[Ehren]

Is there any chance you can take a look on mine? I am getting a server error but not sure if that has anything to do with the theme. And I dont want to touch anything, I have no knowledge on xenforo. I am trying to fix the colors since I am only getting orange

Hello,

Strange. At what point are you getting the server error? And what does your extra.less file look like?

 

[marshydadon]

Still works great! Would be awesome if we had dynamic colours or let users pick colours

 

[behnix]

Hi Guys
I’m trying to set custom colours per category in Illuminate, but the colour doesn’t change on the front-end.


Environment

• XenForo: 2.3.7
• Style: Illuminate (active, editing the same active/child style)
• Site: behnix.com
• No template edits besides extra.less

What I’m doing
Following your guide, I’m targeting the category and node IDs. Example (node/category ID = 17):

/* extra.less */
{{ include('xenfocus_base.less') }}
{{ include('xenfocus_theme.less') }}

/* Place your custom code below */
.block--category17,
html[data-container-key="node-17"] {
  --block-color: #1e90ff; /* also tried with !important */
}

/* Fallback attempt – direct header gradient */
.block--category17 .block-header::before,
html[data-container-key="node-17"] .block-header::before {
  background: linear-gradient(to right, #1e90ff, #00bfff) !important;
}

Expected
The top gradient/strip for that category/node should pick up the new colour.


Actual
No visual change—still using the default theme colour.


What I’ve tried

• Verified IDs (URL ends with .17/edit, and front-end URL #... .17).
• Used both selectors: .block--category17 and html[data-container-key="node-17"].
• Tried --block-color (with and without !important) and a direct ::before override (see above).
• Saved in the active style’s extra.less (below the two include lines).
• Hard refresh (Ctrl+F5), cleared server cache; also purged CDN cache (if any).
• DevTools: inspected the category header; my rules load, but the visible colour doesn’t change. I don’t see --block-color changing in Computed styles for that element.

Questions

1. In Illuminate 2.3.x, is --block-color still the correct variable for the category header gradient?
2. Is the gradient applied on an element other than .block-header::before in this version?
3. Is there another container key I should be using on the forum index (e.g., a different data-container-key), or a style property that overrides --block-color later?
4. Any known conflicts with add-ons that could prevent the variable from taking effect?

If helpful, I can provide a short screencast or give you a test account.
Thanks a lot!


—
Domain: behnix.com

 

[Ehren]

Hi @behnix

When I add this code to your site using the browser developer tools, the "Laptop Bios" category turns yellow:

.block--category17,
html[data-container-key="node-17"] {
  --block-color: #ff0;
}

I can also see the code which you've added, but you're using the default blue color so it's probably not standing out visually to you. Replace your code with mine from above and it should hopefully be more obvious.

 

[behnix]

Hi @behnix

When I add this code to your site using the browser developer tools, the "Laptop Bios" category turns yellow:

.block--category17,
html[data-container-key="node-17"] {
  --block-color: #ff0;
}

View attachment 3825

I can also see the code which you've added, but you're using the default blue color so it's probably not standing out visually to you. Replace your code with mine from above and it should hopefully be more obvious.

thank you. solved.