I would like to create a text gradient inside the Media Wiki themes CSS. I have tested the code in MDN Web docs by Mozilla, and was able to get the colors I desired. When I placed them into the section for the text color though, the text has become white. I am wondering how I need to alter the color (text) template in order to get this to work. Or is there some other CSS code I need to add to Themes CSS?
an example of the code I currently have to set themes is: (this is for the meiko theme)
I saw you posted your question on the Portability wiki. Unfortunately, it looks like not many helpers there have been checking the boards, so you might not get a response right away. I pinged a FANDOM staff/admin there, so that might help.
I am unsure as to what code I need to place in the Wiki to cause it to appear though. I know where the linear-gradient setup "code" goes for applying it to pages, it's just the code to apply the design element to the infoboxes I am having issues with.
Whenever I attempt to add the linear-gradient property, the code for that section breaks.
Most likely you're applying it at the wrong class level. Sometimes it is better to wrap the text you want in a span with a specific class (i.e. <span class="textgradient1">Some text</span>) inside the part of the infobox and then just apply to the CSS to the span class (i.e. textgradient1).
Can you provide a link to the page where you saw this being done? I am aware that some websites do have griadients as text colors but I have never seen it done this way. Even with the way I have seen it done, it involves a non-standard CSS property so it may not work on all browsers; certainly not older ones.
I see. Well, I am still not sure where you got your CSS from because both of those sites do it "properly" and different from how you are trying to do it. What your CSS is doing is setting the "color" property to a linear gradient; which cannot be done on any browser (as far as I am aware).
What you can do is provide some plain-looking styling for all browsers and then use "@supports" to apply the text gradient only if the browser does support the properties. For example:
For browsers that don't support the necessary properties, the text will appear in blue on a red background. For browsers that do support the necessary properties, the text will appear with the desired gradient.