FANDOM


  • I want to do the following with this Infobox among others on the wiki:

    • Have a secondary bar that changes color to match that of the template.
    • Instead of Multicolored cards/characters/etc being silver, I want them to be half one color and half another.

    Can someone please help with this?

      Loading editor
    • Do you mean some kind of secondary header inside the table just like w:c:elderscrolls:Template:SkyrimLocations has?

      For multicolored cards, you could use a gradient background in CSS3. You can set the transition as rough as you want it to be. This gradient tool can help you out.

        Loading editor
    • Do you see the bar that says "Vital statistics"? I want that bar's color to match that of the header when the header changes color. (e.g. If the header is in blue than Vital statistics in blue as well, Red header with red Vital statistics bar, etc)

      I have five civilizations that each have their own individual color so I need the gradient to change color depending on what civilization I list for each page.

        Loading editor
    • Chimera-gui
      Chimera-gui removed this reply because:
      Unhelpful
      06:07, March 31, 2013
      This reply has been removed
    • Echoblast53 wrote: there is an "invisible" css class affecting the header color, and it is kind of puzzling to figure it out... but i will try to find the correct class

      wait... i am sorry, i thought that you wanted the color to be the same as the nav bar at the top (Wiki Activity, Random page, Videos, Photos, Chat, Forum)...

      if you want, you can set the MediaWiki:Wikia.css to define classes for each of the civilizations. then just classify the table as the specific class.

      in the css, have anything under the class > th box to have a bg color of the one corresponding to the class

      this is as simple as you can get it, but the drawback is that only admins can change this style

        Loading editor
    • If you could please look at the example at the bottom of the page. You will see the following:

      • A silver box that I want to make red and green to fit with the civilizations listed.
      • A bar that says "Vital statistics" which I want to have match the aforementioned box.

      I am an admin for the wiki so that will not be an issue.

        Loading editor
    • you want a mix of colors like Flightmare mentioned?

        Loading editor
    • Chimera-gui
      Chimera-gui removed this reply because:
      Update
      22:09, March 31, 2013
      This reply has been removed
    • So how am I supposed make a gradient that uses these colors:

      • Light = FFF700
      • Water = 3366CC
      • Nature = 339900
      • Darkness = 9700C9
      • Fire = CC0000

      based on what is written in {{{civ}}}?

        Loading editor
    • Very long code, but try to visualize all of this will be inserted into the style tag (don't worry about the line breaks, I negated all the line breaks that need to be negated)

      Note:This is based on theory using the following mediawiki pages:

      Code
      {{#vardefine:Count|0}}{{#vardefine:Light|#FFF700}}{{#vardefine:Water|#3366CC}}{{#vardefine:Nature|#339900}}{{#vardefine:Darkness|#9700C9}}{{#vardefine:Fire|#CC0000}}{{#vardefine:LightTest|False}}{{#vardefine:WaterTest|False}}{{#vardefine:NatureTest|False}}{{#vardefine:DarknessTest|False}}{{#vardefine:FireTest|False}}{{#loop: loopval
      	| 0
      	| 4
      	| {{#switch {{lc: {{#explode:{{{civ}}}| | {{#var:loopval}} }} }}
      		|light = {{#vardefine:LightTest|True}}
      		|water = {{#vardefine:WaterTest|True}}
      		|nature = {{#vardefine:NatureTest|True}}
      		|darkness = {{#vardefine:DarknessTest|True}}
      		|fire = {{#vardefine:FireTest|True}}
      	}}
      }}{{#ifeq: {{#var:LightTest}} | True | {{#vardefine: Count| {{#expr: {{#var:Count}}+1}} }} }}{{#ifeq: {{#var:WaterTest}} | True | {{#vardefine: Count| {{#expr: {{#var:Count}}+1}} }} }}{{#ifeq: {{#var:NatureTest}} | True | {{#vardefine: Count| {{#expr: {{#var:Count}}+1}} }} }}{{#ifeq: {{#var:DarknessTest}} | True | {{#vardefine: Count| {{#expr: {{#var:Count}}+1}} }} }}{{#ifeq: {{#var:FireTest}} | True | {{#vardefine: Count| {{#expr: {{#var:Count}}+1}} }} }}{{#vardefine: stepby | {{#expr: 1/{{#var:Count}} }} }}{{#vardefine:step|0}}background-image: linear-gradient(left, {{#loop: loopval
      	| 0
      	| 4
      	| {{#switch {{#var:loopval}}
      		|0 = {{#ifeq: {{#var:LightTest}} | True | {{#var:Light}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:LightTest | False}}
      		|1 = {{#ifeq: {{#var:WaterTest}} | True | {{#var:Water}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:WaterTest | False}}
      		|2 = {{#ifeq: {{#var:NatureTest}} | True | {{#var:Nature}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:NatureTest | False}}
      		|3 = {{#ifeq: {{#var:DarknessTest}} | True | {{#var:Darkness}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:DarknessTest | False}}
      		|4 = {{#ifeq: {{#var:FireTest}} | True | {{#var:Fire}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:FireTest | False}}
      	}}
      }});background-image: -o-linear-gradient(left, {{#loop: loopval
      	| 0
      	| 4
      	| {{#switch {{#var:loopval}}
      		|0 = {{#ifeq: {{#var:LightTest}} | True | {{#var:Light}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:LightTest | False}}
      		|1 = {{#ifeq: {{#var:WaterTest}} | True | {{#var:Water}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:WaterTest | False}}
      		|2 = {{#ifeq: {{#var:NatureTest}} | True | {{#var:Nature}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:NatureTest | False}}
      		|3 = {{#ifeq: {{#var:DarknessTest}} | True | {{#var:Darkness}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:DarknessTest | False}}
      		|4 = {{#ifeq: {{#var:FireTest}} | True | {{#var:Fire}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:FireTest | False}}
      	}}
      }});background-image: -moz-linear-gradient(left, {{#loop: loopval
      	| 0
      	| 4
      	| {{#switch {{#var:loopval}}
      		|0 = {{#ifeq: {{#var:LightTest}} | True | {{#var:Light}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:LightTest | False}}
      		|1 = {{#ifeq: {{#var:WaterTest}} | True | {{#var:Water}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:WaterTest | False}}
      		|2 = {{#ifeq: {{#var:NatureTest}} | True | {{#var:Nature}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:NatureTest | False}}
      		|3 = {{#ifeq: {{#var:DarknessTest}} | True | {{#var:Darkness}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:DarknessTest | False}}
      		|4 = {{#ifeq: {{#var:FireTest}} | True | {{#var:Fire}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:FireTest | False}}
      	}}
      }});background-image: -webkit-linear-gradient(left, {{#loop: loopval
      	| 0
      	| 4
      	| {{#switch {{#var:loopval}}
      		|0 = {{#ifeq: {{#var:LightTest}} | True | {{#var:Light}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:LightTest | False}}
      		|1 = {{#ifeq: {{#var:WaterTest}} | True | {{#var:Water}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:WaterTest | False}}
      		|2 = {{#ifeq: {{#var:NatureTest}} | True | {{#var:Nature}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:NatureTest | False}}
      		|3 = {{#ifeq: {{#var:DarknessTest}} | True | {{#var:Darkness}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:DarknessTest | False}}
      		|4 = {{#ifeq: {{#var:FireTest}} | True | {{#var:Fire}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:FireTest | False}}
      	}}
      }});background-image: -ms-linear-gradient(left, {{#loop: loopval
      	| 0
      	| 4
      	| {{#switch {{#var:loopval}}
      		|0 = {{#ifeq: {{#var:LightTest}} | True | {{#var:Light}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:LightTest | False}}
      		|1 = {{#ifeq: {{#var:WaterTest}} | True | {{#var:Water}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:WaterTest | False}}
      		|2 = {{#ifeq: {{#var:NatureTest}} | True | {{#var:Nature}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:NatureTest | False}}
      		|3 = {{#ifeq: {{#var:DarknessTest}} | True | {{#var:Darkness}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:DarknessTest | False}}
      		|4 = {{#ifeq: {{#var:FireTest}} | True | {{#var:Fire}} {{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, }}{{#vardefine:FireTest | False}}
      	}}
      }});background-image: -webkit-gradient(linear, left top, right top, {{#loop: loopval
      	| 0
      	| 4
      	| {{#switch {{#var:loopval}}
      		|0 = {{#ifeq: {{#var:LightTest}} | True | color-stop({{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, {{#var:Light}}), }}{{#vardefine:LightTest | False}}
      		|1 = {{#ifeq: {{#var:WaterTest}} | True | color-stop({{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, {{#var:Water}}), }}{{#vardefine:WaterTest | False}}
      		|2 = {{#ifeq: {{#var:NatureTest}} | True | color-stop({{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, {{#var:Nature}}), }}{{#vardefine:NatureTest | False}}
      		|3 = {{#ifeq: {{#var:DarknessTest}} | True | color-stop({{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, {{#var:Darkness}}), }}{{#vardefine:DarknessTest | False}}
      		|4 = {{#ifeq: {{#var:FireTest}} | True | color-stop({{#var:step}}%{{#vardefine:step|{{#expr:{{#var:step}}+{{#var:stepby}}}}}}, {{#var:Fire}}), }}{{#vardefine:FireTest | False}}
      	}}
      }});
      Here is how to implement the code
      1. copy the whole code
      2. find the area where you want to stylize the bg (example [this is part of a table]): ! style="color:black;font-weight:bold;")
      3. put your cursor on the place and paste (example [this is part of a table, the carrot key is symbolizing where you paste]): ! style="color:black;font-weight:bold;^")

      As i said before: I negated all the line breaks that need to be negated

      Here is how you use the code
      1. Set the civ parameter to something like this: |civ = Light darkness wAter Fire (Note: Capitalization and order of keywords will be ignored, but must have a space between the keywords and spelling must be correct)
        Loading editor
    • The problem is that all the templates I want to use the gradient for use some form of this:

      {{#if:{{{civ|}}}|{{!}} '''Civilization''' {{!!}} {{{{{civ}}}}} {{#if: {{{civ2<includeonly>|</includeonly>}}} | / {{{{{civ2}}}}} }} }}

      Would your code be compatible with it?

      Additionally, the civilizations are supposed to go in the following order: Light - Water - Darkness - Fire - Nature

        Loading editor
    • :( bit more twist to the requirement. did my code work ok though?

        Loading editor
    • Chimera-gui wrote: The problem is that all the templates I want to use the gradient for use some form of this:

      {{#if:{{{civ|}}}|{{!}} '''Civilization''' {{!!}} {{{{{civ}}}}} {{#if: {{{civ2<includeonly>|</includeonly>}}} | / {{{{{civ2}}}}} }} }}

      Would your code be compatible with it?

      Additionally, the civilizations are supposed to go in the following order: Light - Water - Darkness - Fire - Nature

      and what is civ2 template?

        Loading editor
    • I didn't use it yet because I didn't know if it would work with the template's format:

      Code
      {| class="infobox" style="font-size:89%; width:300px; background-color:#FFF;"
      |- bgcolor={{#if: {{{color|}}}
        | {{{color}}}
        | {{#switch: {{{type|}}}
              | {{#if: {{{civ2|}}}
              |c0c0c0
                 | {{#switch: {{{civ|}}}
                 | Light = FFF700
                 | Water = 3366CC
                 | Nature = 339900
                 | Darkness = 9700C9
                 | Fire = CC0000
                }}
             }}
          }}
      }}
      ! colspan="2" style="color: #000000; font-size:120%; padding:1em;" |  {{{name|{{PAGENAME}}}}}
      |- style="text-align:center;"
      {{#if: {{{image|}}} | {{!}} colspan="2" style="padding:0.5em;" {{!}} [[File:{{{image|File:Wiki-wordmark.png}}}|{{{imagewidth|250}}}px]]<br/>''{{{caption| }}}'' }}
      |- style="text-align:center;"
      {{#if: {{{map|}}} | {{!}} colspan="2" style="padding:0.5em;" {{!}} [[File:{{{map}}}|{{{mapwidth|250}}}px]]<br/>''{{{mapcaption| }}}'' }}
      |-
      ! colspan="2" style="background-color: #c0c0c0; color: #000000;" | Vital statistics
      |-
      | style="width:30%;" | '''Type'''
      | style="width:70%;" | {{{type}}}
      |-
      | {{#if:{{{civ|}}}|{{!}} '''Civilization''' {{!!}} {{{{{civ}}}}} {{#if: {{{civ2<includeonly>|</includeonly>}}} | / {{{{{civ2}}}}} }} }}
      |-
      | '''Location'''
      | {{{location}}}
      |-
      | '''Inhabitants'''
      | {{{inhabitants}}}
      |}
        Loading editor
    • so what is civ 2 suppose to be?

        Loading editor
    • Civ 2 means that something is linked with two civilizations rather than just one, here is an example.

        Loading editor
    • so there is a maximum of two civ?

        Loading editor
    • At the moment, yes.

      However, a sister wiki has a maximum of five civs.

        Loading editor
    • lol, luckily you didnt test the code, because wikia doesn't use those mediawiki stuff.

      so if a civ a certain color, then the color order from left to right will only be:

      • Light, Water
      • Darkness, Fire
      • Light, Nature
      • Light, Darkness
      • Fire, Nature
      • Water, Fire

      (a few examples)
      right?

        Loading editor
    • Sounds about right.

        Loading editor
    • will civ and civ2 be out of order? (not following the Light - Water - Darkness - Fire - Nature guideline?)

        Loading editor
    • No, my co-administrator is very clear that two civilizations being listed together are to be listed in that order.

        Loading editor
    • good, that will take care of the unnecessary stuff...

        Loading editor
    • what about lowercase/uppercase?

        Loading editor
    • I apologize for any inconvenience.

        Loading editor
    • Chimera-gui wrote: I apologize for any inconvenience.

      naw, i welcome clarity and double checking... it should be me who needs to apologize for the redundancy.

        Loading editor
    • Echoblast53 wrote: what about lowercase/uppercase?

        Loading editor
    • To answer your question, uppercase.

        Loading editor
    • Flightmare wrote: Do you mean some kind of secondary header inside the table just like w:c:elderscrolls:Template:SkyrimLocations has?

      For multicolored cards, you could use a gradient background in CSS3. You can set the transition as rough as you want it to be. This gradient tool can help you out.

      (thx for the gradient tool)

        Loading editor
    • Chimera-gui wrote: To answer your question, uppercase.

      so it needs to be in fixed uppercase?

        Loading editor
    • I'm afraid that I don't understand what that means.

        Loading editor
    • when using the template, someone will say:

      • |civ = DARKNESS

      instead of:

      • |civ = darkness

      and also, spelling is required?

        Loading editor
    • For templates, it should be:

      • |civ = Darkness

      And yes, spelling is required.

        Loading editor
    • Chimera-gui wrote: For templates, it should be:

      • |civ = Darkness

      And yes, spelling is required.

      ok then, i have the code ready...

      (note: only allows two parameters)

        Loading editor
    • {{#if: {{{civ2|}}} | background-image: linear-gradient(left, {{#switch: {{{civ}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 25%, {{#switch: {{{civ2}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 75%);background-image: -o-linear-gradient(left, {{#switch: {{{civ}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 25%, {{#switch: {{{civ2}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 75%);background-image: -moz-linear-gradient(left, {{#switch: {{{civ}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 25%, {{#switch: {{{civ2}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 75%);background-image: -webkit-linear-gradient(left, {{#switch: {{{civ}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 25%, {{#switch: {{{civ2}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 75%);background-image: -ms-linear-gradient(left, {{#switch: {{{civ}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 25%, {{#switch: {{{civ2}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 75%);background-image: linear-gradient(left, {{#switch: {{{civ}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 25%, {{#switch: {{{civ2}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}} 75%);background-image: -webkit-gradient(linear, left top, right top, color-stop(0.25, {{#switch: {{{civ}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}}), color-stop(0.75, {{#switch: {{{civ2}}}|Light = #FFF700|Water = #3366CC|Nature = #339900|Darkness = #9700C9|Fire = #CC0000}}));
      | background-color: {{#switch: {{{civ}}}
      |Light = #FFF700
      |Water = #3366CC
      |Nature = #339900
      |Darkness = #9700C9
      |Fire = #CC0000}};
      }}
        Loading editor
    • Here is how to implement the code
      1. copy the whole code
      2. find the area where you want to stylize the bg (example [this is part of a table]): ! style="color:black;font-weight:bold;")
      3. put your cursor on the place and paste (example [this is part of a table, the carrot key is symbolizing where you paste]): ! style="color:black;font-weight:bold;^")
        Loading editor
    • You might want to include the full template code so I know where it should go.

        Loading editor
    • i personally inserted the code, but i cant find a place where an example is (for both 1 and 2 civ)

        Loading editor
    • Unfortunately, it doesn't seem to work.

        Loading editor
    • examples?

        Loading editor
    • Look at the page now.

        Loading editor
    • oh... i messed up the main portion...

        Loading editor
    • i am so sorry, but i didnt realize that the gradient could only be located in the MediaWiki:Wikia.css page... (all this for nothing...)... let me "try again"

        Loading editor
    • What do you need me to do?

        Loading editor
    • sit back and relax? :) i am writing a whole different code, and i already reverted all the changes i made to your template

        Loading editor
    • Chimera-gui
      Chimera-gui removed this reply because:
      Update
      22:10, April 2, 2013
      This reply has been removed
    • So any luck?

        Loading editor
    • nope... i have to write out every single scenario using classes... i am not sure if it will work.

        Loading editor
    • this is what i have so far:

      .light {
      	background-color:#FFF700;
      }
      .water {
      	background-color:#3366CC;
      }
      .nature {
      	background-color:#339900;
      }
      .darkness {
      	background-color:#9700C9;
      }
      .fire {
      	background-color:#CC0000;
      }
      .light.water {
      	background-image: linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
      	background-image: -o-linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
      	background-image: -moz-linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
      	background-image: -webkit-linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
      	background-image: -ms-linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
       
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #FFF700),
      		color-stop(0.75, #3366CC)
      	) !important;
      }
      .light.nature {
      	background-image: linear-gradient(left, #FFF700 25%, #339900 75%) !important;
      	background-image: -o-linear-gradient(left, #FFF700 25%, #339900 75%) !important;
      	background-image: -moz-linear-gradient(left, #FFF700 25%, #339900 75%) !important;
      	background-image: -webkit-linear-gradient(left, #FFF700 25%, #339900 75%) !important;
      	background-image: -ms-linear-gradient(left, #FFF700 25%, #339900 75%) !important;
       
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #FFF700),
      		color-stop(0.75, #339900)
      	) !important;
      }
      .light.darkness {
      	background-image: linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
      	background-image: -o-linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
      	background-image: -moz-linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
      	background-image: -webkit-linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
      	background-image: -ms-linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
       
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #FFF700),
      		color-stop(0.75, #9700C9)
      	) !important;
      }
        Loading editor
    • Let me know when you have the full code then.

        Loading editor
    • got it... but this time, i am going to test it before i actually give it to you

        Loading editor
    • Sounds good.

        Loading editor
    • ok, the code is ready:

      Template:
      {| class="infobox" style="font-size:89%; width:300px; background-color:#FFF;"
      |- 
      ! class="{{lc: {{{civ|}}} {{{civ2|}}} }}" colspan="2" style="color: #000000; font-size:120%; padding:1em;" |  {{{name|{{PAGENAME}}}}}
      |- style="text-align:center;"
      {{#if: {{{image|}}} | {{!}} colspan="2" style="padding:0.5em;" {{!}} [[File:{{{image|File:Wiki-wordmark.png}}}|{{{imagewidth|250}}}px]]<br/>''{{{caption| }}}'' }}
      |- style="text-align:center;"
      {{#if: {{{map|}}} | {{!}} colspan="2" style="padding:0.5em;" {{!}} [[File:{{{map}}}|{{{mapwidth|250}}}px]]<br/>''{{{mapcaption| }}}'' }}
      |-
      ! colspan="2" style="background-color: #c0c0c0; color: #000000;" | Vital statistics
      |-
      | style="width:30%;" | '''Type'''
      | style="width:70%;" | {{{type}}}
      |-
      | {{#if:{{{civ<includeonly>|</includeonly>}}}|{{!}} '''Civilization''' {{!!}} {{{{{civ}}}}} {{#if: {{{civ2<includeonly>|</includeonly>}}} | / {{{{{civ2}}}}} }} }}
      |-
      | '''Location'''
      | {{{location}}}
      |-
      | '''Inhabitants'''
      | {{{inhabitants}}}
      |}<noinclude><br style="clear:both;" />
      {{documentation}}</noinclude>
      MediaWiki:Wikia.css
      .light {
      	background-color:#FFF700;
      }
      .water {
      	background-color:#3366CC;
      }
      .nature {
      	background-color:#339900;
      }
      .darkness {
      	background-color:#9700C9;
      }
      .fire {
      	background-color:#CC0000;
      }
      .light.water {
      	background-image: linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
      	background-image: -o-linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
      	background-image: -moz-linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
      	background-image: -webkit-linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
      	background-image: -ms-linear-gradient(left, #FFF700 25%, #3366CC 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #FFF700),
      		color-stop(0.75, #3366CC)
      	) !important;
      }
      .light.nature {
      	background-image: linear-gradient(left, #FFF700 25%, #339900 75%) !important;
      	background-image: -o-linear-gradient(left, #FFF700 25%, #339900 75%) !important;
      	background-image: -moz-linear-gradient(left, #FFF700 25%, #339900 75%) !important;
      	background-image: -webkit-linear-gradient(left, #FFF700 25%, #339900 75%) !important;
      	background-image: -ms-linear-gradient(left, #FFF700 25%, #339900 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #FFF700),
      		color-stop(0.75, #339900)
      	) !important;
      }
      .light.darkness {
      	background-image: linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
      	background-image: -o-linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
      	background-image: -moz-linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
      	background-image: -webkit-linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
      	background-image: -ms-linear-gradient(left, #FFF700 25%, #9700C9 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #FFF700),
      		color-stop(0.75, #9700C9)
      	) !important;
      }
      .light.fire {
      	background-image: linear-gradient(left, #FFF700 25%, #CC0000 75%) !important;
      	background-image: -o-linear-gradient(left, #FFF700 25%, #CC0000 75%) !important;
      	background-image: -moz-linear-gradient(left, #FFF700 25%, #CC0000 75%) !important;
      	background-image: -webkit-linear-gradient(left, #FFF700 25%, #CC0000 75%) !important;
      	background-image: -ms-linear-gradient(left, #FFF700 25%, #CC0000 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #FFF700),
      		color-stop(0.75, #CC0000)
      	) !important;
      }
      .water.nature {
      	background-image: linear-gradient(left, #3366CC 25%, #339900 75%) !important;
      	background-image: -o-linear-gradient(left, #3366CC 25%, #339900 75%) !important;
      	background-image: -moz-linear-gradient(left, #3366CC 25%, #339900 75%) !important;
      	background-image: -webkit-linear-gradient(left, #3366CC 25%, #339900 75%) !important;
      	background-image: -ms-linear-gradient(left, #3366CC 25%, #339900 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #3366CC),
      		color-stop(0.75, #339900)
      	) !important;
      }
      .water.darkness {
      	background-image: linear-gradient(left, #3366CC 25%, #9700C9 75%) !important;
      	background-image: -o-linear-gradient(left, #3366CC 25%, #9700C9 75%) !important;
      	background-image: -moz-linear-gradient(left, #3366CC 25%, #9700C9 75%) !important;
      	background-image: -webkit-linear-gradient(left, #3366CC 25%, #9700C9 75%) !important;
      	background-image: -ms-linear-gradient(left, #3366CC 25%, #9700C9 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #3366CC),
      		color-stop(0.75, #9700C9)
      	) !important;
      }
      .water.fire {
      	background-image: linear-gradient(left, #3366CC 25%, #CC0000 75%) !important;
      	background-image: -o-linear-gradient(left, #3366CC 25%, #CC0000 75%) !important;
      	background-image: -moz-linear-gradient(left, #3366CC 25%, #CC0000 75%) !important;
      	background-image: -webkit-linear-gradient(left, #3366CC 25%, #CC0000 75%) !important;
      	background-image: -ms-linear-gradient(left, #3366CC 25%, #CC0000 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #3366CC),
      		color-stop(0.75, #CC0000)
      	) !important;
      }
      .nature.darkness {
      	background-image: linear-gradient(left, #339900 25%, #9700C9 75%) !important;
      	background-image: -o-linear-gradient(left, #339900 25%, #9700C9 75%) !important;
      	background-image: -moz-linear-gradient(left, #339900 25%, #9700C9 75%) !important;
      	background-image: -webkit-linear-gradient(left, #339900 25%, #9700C9 75%) !important;
      	background-image: -ms-linear-gradient(left, #339900 25%, #9700C9 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #339900),
      		color-stop(0.75, #9700C9)
      	) !important;
      }
      .nature.fire {
      	background-image: linear-gradient(left, #339900 25%, #CC0000 75%) !important;
      	background-image: -o-linear-gradient(left, #339900 25%, #CC0000 75%) !important;
      	background-image: -moz-linear-gradient(left, #339900 25%, #CC0000 75%) !important;
      	background-image: -webkit-linear-gradient(left, #339900 25%, #CC0000 75%) !important;
      	background-image: -ms-linear-gradient(left, #339900 25%, #CC0000 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #339900),
      		color-stop(0.75, #CC0000)
      	) !important;
      }
      .darkness.fire {
      	background-image: linear-gradient(left, #9700C9 25%, #CC0000 75%) !important;
      	background-image: -o-linear-gradient(left, #9700C9 25%, #CC0000 75%) !important;
      	background-image: -moz-linear-gradient(left, #9700C9 25%, #CC0000 75%) !important;
      	background-image: -webkit-linear-gradient(left, #9700C9 25%, #CC0000 75%) !important;
      	background-image: -ms-linear-gradient(left, #9700C9 25%, #CC0000 75%) !important;
      	background-image: -webkit-gradient(
      		linear,
      		left top,
      		right top,
      		color-stop(0.25, #9700C9),
      		color-stop(0.75, #CC0000)
      	) !important;
      }
        Loading editor
    • for anything else that needs to be colored, add this: class="{{lc: {{{civ|}}} {{{civ2|}}} }}"

        Loading editor
    • So I just stick the CSS code at the bottom of the Wikia.css page then?

        Loading editor
    • yes

        Loading editor
    • Doesn't seem to have worked.

      Here is the Wikia.css

        Loading editor
    • just wait for it:

      while you are waiting... look at my verion:

      w:c:lightorbit:Template:Infobox_location

        Loading editor
    • looks like it work (on your wiki, mine sort of broke again)

        Loading editor
    • is it ok?

        Loading editor
    • I applied the class to some other templates that I wanted the color for but it hasn't set in yet, Infobox location works though.

        Loading editor
    • ok. hope it works!

        Loading editor
    • you had the parameter wrong (i fixed it for {{#NewWindowLink:w:c:kaijudo:Template:Infobox character|Template:Infobox character}})

        Loading editor
    • It works, thank you so much for this.

        Loading editor
    • glad i helped :)

        Loading editor
    • Yami Michael
      Yami Michael removed this reply because:
      b
      10:12, April 3, 2013
      This reply has been removed
    • Yami Michael wrote: It works great. Is it too crazy to have it work for 3/4/5 colors? Seems like it would be asking too much for the gradients.

      are you still requesting for the 3/4/5 color?

        Loading editor
    • Actually got it working, so I removed my post. Thanks for all the help though. :)

      Gaial Ore Dragon, the Vainglory for an example of a 5.

        Loading editor
    • Yami Michael wrote: Actually got it working, so I removed my post. Thanks for all the help though. :)

      Gaial Ore Dragon, the Vainglory for an example of a 5.

      nice job... i just didnt understand your "b" reason :)

        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.