FANDOM


  • 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? Thank you.

    an example of the code I currently have to set themes is: (this is for the meiko theme)

    {
        background: #CC3333;
        color: linear-gradient(#CB2320, #6C0218);
         text-shadow: 2px 0 0 #BDBDBD, -2px 0 0 #D8D8D8, 0 2px 0 #A4A4A4, 0 -2px 0 #E6E6E6, 1px 1px #D8D8D8, -1px -1px 0 #F2F2F2, 1px -1px 0 #D8D8D8, -1px 1px 0 #848484;
    } 
    
      Loading editor
    • It doesn't look like Template:Color is being used in the infobox.

      I would recommend you re-ask the question at the Help, Questions and Answers board on the Portability wiki. They have experts there for this kind of thing, since it is a portable infobox.

        Loading editor
    • Thanks. I will ask there.

        Loading editor
    • 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.

        Loading editor
    • Thank you again.

        Loading editor
    • Unfortunately the FANDOM staffer gave me an ambiguous answer about whether the Portability forums are still being monitored. Asked for clarification.

        Loading editor
    • I still have not recieved a response to my message on that forum. It might or might not be active, though they do not seem to get to every message.

      So far, all I can find is info on background gradients, and nothing on text gradients. It may be possible that what I have requested is somewhat complicated.

        Loading editor
    • I don't think it is too complicated, you just have to know the right class in the infobox to apply the gradient.

        Loading editor
    • 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.

        Loading editor
    • 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).

        Loading editor
    • Do you still need help with this?

        Loading editor
    • Though it is not something urgent, I would like help with this, if it is possible.

      Thanks.

        Loading editor
    • 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.

        Loading editor
    • Well if it does not work on all browsers then I might as well keep the text the way it is.

      These two websites were where I got the idea from https://cactusthemes.com/blog/css-text-gradient/, http://creative-punch.net/2014/02/colorful-gradient-text-css3/, though the code to put in the gradients I got from mozilla's website. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

      I would only like to create a gradient that has only two colors.

        Loading editor
    • 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:

      selector {
          background-color: red;
          color: blue;
      }
      @supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
          selector {
              background-color: transparent;
              background-image: linear-gradient(to bottom right, red, blue);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
          }
      }

      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.

        Loading editor
    • Thank you. I am wondering though, will the gradient code support text shadows?

        Loading editor
    • I am not sure, probably? You can always just try it and find out.

        Loading editor
    • I am recieving an error in the CSS that states:

      Unknown @rule: @supports

      How do I fix this to cause the code to work properly?

      This is what I have so far:

      .pi-theme-meiko .pi-title,
      .pi-theme-meiko .pi-header,
      .pi-theme-meiko .pi-navigation,
      .pi-theme-meiko .pi-navigation a,
      [data-theme="meiko"] selector {
      background: #CC3333;
      color: #6C0218;
      text-shadow: 2px 0 0 #D8D8D8, -2px 0 0 #D8D8D8, 0 2px 0 #D8D8D8, 0 -2px 0 #F2F2F2, 1px 1px #F2F2F2, -1px -1px 0 #F2F2F2, 1px -1px 0 #F2F2F2, -1px 1px 0 #D8D8D8;
      } @supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
      selector {
      background-color:transparent
      background-image: linear-gradient(to bottom right, red, crimson);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 2px 0 0 #D8D8D8, -2px 0 0 #D8D8D8, 0 2px 0 #D8D8D8, 0 -2px 0 #F2F2F2, 1px 1px #F2F2F2, -1px -1px 0 #F2F2F2, 1px -1px 0 #F2F2F2, -1px 1px 0 #D8D8D8;
      } }

      Themes CSS

        Loading editor
    • Ignore the warning. The syntax checker that Wikia uses just hasn't been updated to recognize that rule yet.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.