FANDOM


  • I am trying to create a color provider for my wiki that takes in a set of paremeters and returns a color. I then want to use that color in the style attribute, but so far I've had limited success.

    Here is a sample of my template: {{#switch: {{{Var1|}}} |#default = white |Test = #... }}

    I can confirm that the template spits out the correct text, but when I try to apply that into a css, I get varying success.

    <div style="background-color: {{ColorProvider}}">Test</div> the background changes. However, I try to apply to a table: ​​​​​​

    {| style="background-color:{{ColorProvider}}" ... |}

    The template literally prints "white"

      Loading editor
    • A link to your wiki is ALWAYS helpful...

        Loading editor
    • Henstepl wrote:
      A link to your wiki is ALWAYS helpful...


      Here is a link to the template

        Loading editor
    • Removing hash from hex color codes in ColorProvider and adding it in table instead seems to fix the issue.

      {{#switch: {{{Media|}}}
      |#default = {{#switch: {{{Series|}}}
        |#default = {{#switch: {{{Version|}}}
          |#default = fff
          |1  = f28d01
          |2  = db8bae
          |3  = a97db2
          |4  = 48a7df
          |5  = 00a67e
          |6  = a1c91b
          |7  = ffc900
          |8  = fbb102
          |9  = f499a7
          |10 = 977bb7
          |11 = 54c1e8
          |12 = 00a692
          |13 = 83df56
          |14 = fffa1c
          |15 = fe8d3d
          |16 = ff9ed1
          |18 = 52b3e0
          }}
        }}
      }}
      {|style="background-color: #{{ColorProvider}};"
      ...
      |} 
        Loading editor
    • I think I have partially identified the issue. For some reason, the program Wikia uses to interpret the markup is putting white space in front of the "#". I am thinking it may be related to the fact that "#" in the markup indicates a numbered list. I am thinking it might be either a tab or a newline because a regular space character doesn't matter to CSS. Whatever it is, it causes invalid CSS; thus the browser ignores it.


      Edit:

      <span title="a{{#switch: {{{1|hi}}} | #default = sky | hi = #08bd12}}">Hello</span>
      

      Hello

      <span title="a{{#switch: {{{1|}}} | #default = sky | hi = #08bd12}}">Hello</span>
      

      Hello

        Loading editor
    • The spaces are generated by ColorProvider. To remove these spaces, use
      <includeonly>{{#switch: {{{Media|}}}<!--
      -->|#default = {{#switch: {{{Series|}}}<!--
         -->|#default = {{#switch: {{{Version|}}}<!--
            -->|#default = fff<!--
            -->|1  = f28d01<!--
            -->|2  = db8bae<!--
            -->|3  = a97db2<!--
            -->|4  = 48a7df<!--
            -->|5  = 00a67e<!--
            -->|6  = a1c91b<!--
            -->|7  = ffc900<!--
            -->|8  = fbb102<!--
            -->|9  = f499a7<!--
            -->|10 = 977bb7<!--
            -->|11 = 54c1e8<!--
            -->|12 = 00a692<!--
            -->|13 = 83df56<!--
            -->|14 = fffa1c<!--
            -->|15 = fe8d3d<!--
            -->|16 = ff9ed1<!--
            -->|17 = d8addb<!--
            -->|18 = 52b3e0<!--
            -->}}<!--
          -->}}<!--
      -->}}<!--
      --></includeonly>
        Loading editor
    • I honestly don't think that solves the problem; at least, not in any way that Aiihuan's solution didn't. If the issue was the newlines and spaces, then the following should work.

      <span title="a{{#switch:{{{1|hi}}}|#default=sky|hi=#08bd12}}">Hello</span>
      

      But it doesn't...

      Hello


      Edit:

      It seems to be more than just the #switch.

      <span title="a{{#if:{{{1|}}}|sky|#08bd12}}">Hello</span>
      

      Hello

        Loading editor
    • You can't put colors in tooltips.

        Loading editor
    • I am using tooltips as a way to illustrate what happens. In the OP, the issue is that they are trying to use it to set background-color and it isn't working. I think because of this whitespace.


      Edit:

      A different example:

      a{{#if:{{{1|}}}|sky|#08bd12}}
      

      a

      1. 08bd12

      versus

      a#08bd12
      

      a#08bd12

        Loading editor
    • Oh okay... seemed odd.

        Loading editor
    • Yes, I have reported it though.

        Loading editor
    • Yeah, I noticed that the fix didn't work either. I think I'm going to forego the template and use css to get the colors instead. Thanks for the help.

        Loading editor
    • Well, the whitespace seems to still be there but for some reason is seems to be working for background color now.

      <span style="background-color:{{#switch: {{{1|hi}}}
      | #default = white
      | hi = #08bd12
      }};">Hello</span>
      

      Hello


      Edit:

      For those that know how to use their browser's developer tools, you can still see the space by inspecting the following situation (which intentionally doesn't work).

      <span style="background-color:a{{#switch: {{{1|hi}}}
      | #default = white
      | hi = #08bd12
      }};">Hello</span>
      

      Hello

        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