Board Thread:Support Requests - Getting Technical/@comment-8719989-20180911100322/@comment-9605025-20180911150134

So, I few things. The way you did it for the character pair box is much different than how you are doing it for the portable infoboxes. Here is how the character pair box works. This has its own issue. The CSS property  (and its values) are properly returned by the template. However, it is given as the value for the CSS property. What this does is cause the first  (and its value) to be interpreted as an invalid value for  ; thus not doing anything. The reason you can still see the gradient is because that first one is there to handle older versions of Firefox. As such, you will only notice the issue if viewing the page using Firefox 3.6 or earlier (which most people probably aren't doing). That can easily be fixed by simply calling the template rather than using it as a value for.
 * 1) Take in parameters "theme1" and "theme2". In your example, "theme1" is "Sailor Uranus theme" and "theme2" is "Sailor Neptune theme".
 * 2) Call the templates of the same names to retrieve the actual color values (without the hash in front). These are Template:Sailor Uranus theme and Template:Sailor Uranus theme.
 * 3) Feed those color values (prefixed with the hash) into Template:Linear-gradient to get the needed inline CSS.
 * 4) Insert that inline CSS to the  inline CSS property.

The issue with your portable infobox is that you have to use site CSS. CSS is one of the languages that MediaWiki uses to generate the content that is displayed. However, only MediaWiki understands all of the languages. The template you use in the character pair box is part of another language so CSS doesn't know what to do with it. What you need to do is use  directly without the template.