FANDOM


  • I used this code to make my profile text rainbow, but for some reason, the large links on the center of my profile disappeared. Is there any way to fix this?

    Link to my page:
    https://big-nate-comments.fandom.com/wiki/Message_Wall:Positive_Elixir_Trade

    Code:

    a[href$="/wiki/User:Positive_Elixir_Trade"]:not(.extiw):not(.external),
    a[href$="/wiki/Message_Wall:Positive_Elixir_Trade"]:not(.extiw):not(.external),
    a[href$="/wiki/User_blog:Positive_Elixir_Trade"]:not(.extiw):not(.external),
    a[href$="/wiki/Special:Contributions/Positive_Elixir_Trade"]:not(.extiw):not(.external),
    a[href="/wiki/User:Positive_Elixir_Trade"],
    a[href="http://big-nate-comments.wikia.com/wiki/User:Positive_Elixir_Trade"],
    a[href="/wiki/Message_Wall:Positive_Elixir_Trade"],
    a[href="http://big-nate-comments.wikia.com/wiki/Message_Wall:Positive_Elixir_Trade"],
    a[href="/wiki/User_blog:Positive_Elixir_Trade"],
    a[href="http://big-nate-comments.wikia.com/wiki/User_blog:Positive_Elixir_Trade"],
    a[href="/wiki/Special:Contributions/Positive_Elixir_Trade"],
    a[href="http://big-nate-comments.wikia.com/wiki/Special:Contributions/Positive_Elixir_Trade"],
    a[href="/wiki/Special:Editcount/Positive_Elixir_Trade"],
    a[href="http://big-nate-comments.wikia.com/wiki/Special:Editcount/Positive_Elixir_Trade"],
    a[href="/d/u/31513065"],
    a[href="http://https://big-nate-comments.wikia.com/d/u/31513065"] {
    font-weight: bold !important; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #D68AB0), color-stop(0.25, #D8CE5D), color-stop(0.5, #6BD85D), color-stop(0.75, #5DB9D8), color-stop(1, #D85DCB)); 
        background-image: -webkit-linear-gradient(left, #D68AB0 0%, #D8CE5D 25%, #6BD85D 50%, #5DB9D8 75%, #D85DCB 100%);
        background-size: 1000% 1000%; 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
        -webkit-animation: Text-Rainbow 4s infinite;
        color: #33cccc; /* Fallback color for non-webkit browsers */
        white-space: nowrap;
    }
     
    @keyframes Text-Rainbow {
        0% {background-position: 0% 50%}
        50% {background-position: 100% 50%}
        100% {background-position: 0% 50%}
    }
      Loading editor
    • The issue is that those portions do not have the text as immediate descendants of the link. Since I have never worked with the background-clip property before, I am not sure how to fix it. However, if I had to guess, I would say the solution would be to apply the background image to the immediately enclosing element of the text.

        Loading editor
    • And what would the enclosing element be?

        Loading editor
    • The numbers are enclosed in em tags and the text after them are enclosed in span tags. I just did a quick check and applying the background settings to those will get the text to appear. However, I am not sure what to do about the animation part.

        Loading editor
    • It's a bit awkward to ask this, but what is the code for that?

        Loading editor
    • .masthead-info-lower .tally em,
      .masthead-info-lower .tally span {
          background-image: -webkit-linear-gradient(left, #D68AB0 0%, #D8CE5D 25%, #6BD85D 50%, #5DB9D8 75%, #D85DCB 100%);
          -webkit-background-clip: text;
      }

      a

        Loading editor
    • Thanks, Andrew. Hella appreciate it!

        Loading editor
    • Just one last thing though, how can this be coded to be on just one user?

        Loading editor
    • body[class*="_Positive_Elixir_Trade"] .masthead-info-lower .tally em,
      body[class*="_Positive_Elixir_Trade"] .masthead-info-lower .tally span {
          background-image: -webkit-linear-gradient(left, #D68AB0 0%, #D8CE5D 25%, #6BD85D 50%, #5DB9D8 75%, #D85DCB 100%);
          -webkit-background-clip: text;
      }
        Loading editor
    • Thanks man! Appreciate it!

        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.