Admin Forum:How to add color to infoboxes?

This Forum has been archived

Forums: Admin Central Index → General Questions → How to add color to infoboxes?

Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4052 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

Hopefully I'm doing this right. I haven't asked a question yet, but there is plenty I need help with.

I am the only active admin at the Mountain Dew Wiki , and one of the few active members in general. I've recently started adding infoboxes the pages regarding the many flavors of Mountain Dew, and I was hoping there was a way I can change the color of the infobox to match that of the flavor. Here is an example of a flavor page with an infobox .

Is there anyway you could show me on here? That way I could easily do in the future. Trainmaster718 07:37, December 5, 2011 (UTC)

You need to edit your infobox template, to make the background/header color as a variable that can be assigned.

You currently have:

{| class="infobox" style="font-size:89%; width:300px; background-color:#FFF;"
|-
! colspan="2" style="background-color:#3366CC; color:#FFFFFF; font-size:120%; padding:1em;" | {{{Box title|No Title}}}

So you can change that to

{| class="infobox" style="font-size:89%; width:300px; background-color:#{{{background_color|FFFFFF}}}; {{#if:{{{text_color|}}}|color:#{{{text_color}}};}}"
|-
! colspan="2" style="background-color:#{{{header_background_color|3366CC}}}; color:#{{{header_text_color|FFFFFF}}}; font-size:120%; padding:1em;" | {{{Box title|}}}

Then "background_color=xyz" will change the color of the infobox background to any 24-bit hex color you want

similarly for the other four.

"text_color" for infobox text color

"header_text_color" for the headerbar text color

"header_background_color" for the headerbar background color

ForestMonthZero 10:07, December 5, 2011 (UTC)

For a more semantic solution, you can use a #switch for {{{Box title}}} that will pick the color for you based on what the title of the page is. You can even merge that into the above so that it can be overridden with {{{background color}}}, like this:

{| class="infobox" style="font-size:89%; width:300px; background-color:{{{background color|{{#switch {{{Box title|}}}
|Flavor 1 = red
|Flavor 2 = #00f
|#default = #fff
}}}}}; color:{{{text color|{{#switch {{{Box title|}}}
|Flavor 1 = green
|Flavor 2 = #ff0
|#default = inherit
}}}}};"
|-
! colspan="2" style="background-color:{{{header background color|{{#switch {{{Box title|}}}
|Flavor 1 = purple
|#default = #36c
}}}}}; color:{{{header text color|{{#switch {{{Box title|}}}
|Flavor 2 = #060
|#default = #fff
}}}}}; font-size:120%; padding:1em;" | {{{Box title|}}}

You can replace Flavor 1 and Flavor 2 with actual flavors, and add more as necessary. As a side note, it's also best to not hardcode the # in the style rule, because this allows the user to specify a semantic color such as red or orange, like I did above. Monchoman45 Talk Contribs Skystone 13:41,12/5/2011

Admin Forum:How to add color to infoboxes?

Fan Feed