Where are these screenshots from?

https://catchteenieping.fandom.com/wiki/Charmping

https://catchteenieping.fandom.com/wiki/Stickping

https://catchteenieping.fandom.com/wiki/Wannabeping

Ok, they use an interesting method I wasn't even aware is possible.

The infobox is called with a color parameter:

Then, in the infobox template, they wrap the whole infobox into a <div>, in which they define a color-variable from this parameter, using inline styles. I didn't know it is possible to define css-variables with inline css up to now. I actually wonder if this is intended or a bug.

Then, in their comon.css, they use that variable to style the infobox.

Search for "--infobox-color" to see where this is used in the css.

The more "regular" way would be to use "theme-source", but this is indeed an interesting solution here.

If you want to do it the same way like they did, you have to edit your infobox and add that div wrapping their infobox. I linked their infobox above and you can also see it in the screenshot.

<div class="infoboxContainer" {{#if: {{{color|}}} | style="--infobox-color: {{{color}}}"}}><infobox type="Character">
 ...
 ...
 ...
</infobox></div>

Then, on every page you add the infobox, you have to define the parameter "color".

{{Character info box
| title = Example
| color = _your_color_here_
| image = Example.jpg
 ...
 ...
}}

Also, by copying all their css you have now added more color variables.

These are css variables:

--variable-name

and this is how they are used:

background: var(--infobox-color);

You need to define the colors for the variables you copied.

They define it on top of their css, lines 2 - 11, but you may want to use your own colors. I'm not sure if it's a good idea to make your wiki look like an exact copy of another one? Anyway, that's not my business, but you should at least credit them somewhere.

Still getting error messages on the infobox template, whenever I put it in, it messes up the whole thing, would it be possible if you went in and fixed it yourself??

You're not supposed to copy my example codes that literally, lol.

The dots ... stand for your current infobox code. ;)

Add the div with the code in it before your infobox,

<div class="infoboxContainer" {{#if: {{{color|}}} | style="--infobox-color: {{{color}}}"}}><infobox type="Character">

and add the closing div after your infobox:

</infobox></div>

Yeah... As I said before, I know nothing about coding, and I did that and it still doesn't work 🥲

I've made the edit...

OMG THANK YOU, you are actually a lifesaver, this was bothering me so much so thank you!! I will be crediting them btw, I'm really only coping because I like how their info boxes look and I have no idea how to customize it on my own, lol. But thank you for your help again!!!