Hello!
Portable infoboxes are back. This time I'd like to discuss with you the biggest elephant in the room - custom infobox theming!
We have noticed that some communities prefer to theme their infoboxes per article. Usually to reflect the unique set of colors, characteristic to article's topic. For example: super hero color theme. Right now the only option to do this is through using JS or per-article theming. Both of which are hard to code, maintain and to be frank, not portable (color info is lost on non-desktop devices).
That's why together with our team we bend our minds on how to support it. We would like to hear your honest feedback and ideas how to make it better. All kinds of constructive criticism and support are also welcome. We would also like to hear if this solution would work for your community or not (please let us know why so we can fix it).
Remember it is a first step ;)
Here goes our idea
To support custom header colors we want to introduce new infobox tag attributes. These tags will allow control of infobox headers and titles colors. Users will be able to define these colors from both template page and while using template in article.
Basic, per template tags
accent-color-default - sets the color for all titles and headers backgrounds. Accepts hex color valuesin template. Useful if you want to define color per template.
accent-color-text-default - same as accent-color-default, but for text color.
More advanced options, that will allow per article styling
accent-color-source - portable infobox attribute that accepts variable name. Think of it as source in data tag, but for styling the whole infobox.
accent-color-text-source - same as accent-color-source, but for text color.
What we found cool about these tags is that they override themselves. So if you define per template color, you can always override it per usage in article. Exactly like with default tags in <data> fields.
Usage Examples
When using such template.
<infobox
accent-color-default="#aaa"
accent-color-source="headercolor"
accent-color-text-default="000"
accent-color-text-source="headerfontcolor">
<title source="name"></title>
<group>
<header>Section name</header>
</group>
</infobox>
Invocation without accent colors specified
{{InfoboxTemplate
|name=Page name}}
will use defaults and return:
<aside>
<h2 style="background-color: #aaa; color: #000;">Page name</h2>
<section>
<h2 style="background-color: #aaa; color: #000;">Section name</h2>
</section>
</aside>
When user specifies accent colors
{{InfoboxTemplate
|name=Page name
|headercolor="#bbb"
|headerfontcolor="11111a"}}
they override defaults
<aside>
<h2 style="background-color: #bbb; color: #11111a;">Page name</h2>
<section>
<h2 style="background-color: #bbb; color: #11111a;">Section name</h2>
</section>
</aside>
If it proves successful we will add it to infobox builder.
