I've stumbled upon a buggy interaction of Template:Infobox ethnic group with Template:Plainlist in article Ainu people. There, the list after "Religion" has the list markers, despite being generated using template {{plainlist}}. In the generated HTML, somehow the tags <ul>...</ul> are missing. Only the outer wrapper <div class="plainlist">...</div> and list items (<li>...</li>) are present in the HTML. This makes it so that CSS code list-style: none from Template:Plainlist/styles.css#L-5 isn't triggered, because the CSS selector for the rule is .plainlist ol, .plainlist ul.

I have reduced the reproducing sample to two test cases at Template:Infobox/testcases#Template:Plainlist. Feel free to rename and/or move it as you see fit. This only happens when there is a list in |label(n)= and Template:Plainlist is in the next |data(n+1)= (or in |data(n+2)= if there is a |header(n+1)=). Compare label1 with a list vs label1 without a list. —⁠andrybak (talk) 21:49, 10 October 2023 (UTC)

On one hand, this might be a case of "don't do it if it hurts". On the other hand, such action at a distance between two lists is definitely some kind of bug, probably in Module:Infobox. —⁠andrybak (talk) 17:27, 11 October 2023 (UTC)

I'd start with "don't do it if it hurts". Putting an HTML list in a label misses the point of what a label is.

As a guess this probably has to do with fixChildBoxes in some way. Either it's not covering some remixing, or it's not doing it in the right place, or it's not being called on such and sundry inputs. Izno (talk) 18:17, 11 October 2023 (UTC)

adding a newline between the templatestyles and the <div> seems to fix it here? Frietjes (talk) 00:11, 12 October 2023 (UTC)

I would like to use the infobox template to create a new particular infobox template (an ancient polis infobox template) and employ it in multiple articles for the Ancient Greek Wikipedia.

I've tried to do so; however, I encountered problems, because (apparently) the existent module could only be used in the English Wikipedia. Thus, I re-created (i.e., copy-pasted) the module in the Ancient Greek Wikipedia Incubator. Here is the copy-pasted module: https://incubator.wikimedia.org/wiki/Module:Wp/grc/Infobox

I also had to re-create many modules and templates, necessary to make the infobox template work, in particular this, since I got an error message: https://incubator.wikimedia.org/wiki/Module:Wp/grc/Infobox/styles.css

Here is the "ancient polis" infobox template, the new template I created based on the infobox module: https://incubator.wikimedia.org/wiki/Template:Wp/grc/Πινάκιον_Ἀρχαία_Πόλις

Here is an article in which I use the new template: https://incubator.wikimedia.org/wiki/Wp/grc/Ἀγύριον_(ἀρχαία_πόλις)

As you can see:

1) The style is not right (the infobox should look more or less like this: https://en.wikipedia.org/wiki/Megara );

2) Furthermore, I'm unable do add images;

3) Lastly, I'm unable to add an interactive map.

Could someone kindly help?

Thank you very much!

- Anaxicrates (talk) 14:55, 11 November 2023 (UTC)

@Anaxicrates 1) Since your wiki is 'new', you should copy Module:Sandbox/Izno/infobox-styles.css into incubator:Module:Wp/grc/Infobox/styles.css. 2+3) No idea what issues these are. Izno (talk) 16:50, 11 November 2023 (UTC)

I am very grateful to you, Izno!

As you can see (https://incubator.wikimedia.org/wiki/Wp/grc/Ἀγύριον_(ἀρχαία_πόλις) ), I've managed to improve the style a lot (thanks to you!) and also to include images and a location map (in this case, I just had to understand the code and re-create the location map template). However, the location map is shown inside a frame for some reason... probably because I entered it as an image. There should be a better way, but I have yet to figure it out.

I've some other questions: could you be so kind to give them a look?

1) How could I improve my template so as to include cell background colours and grid-lines (see this example: https://it.wikipedia.org/wiki/Abacano )?

2) Currently, the "location map" template recognises coordinates in this format "coordinates = 37.65624055°N 14.5259926°E". Is there a way I could make it recognise this format instead: "coordinates = 37.65624055, 14.5259926"? (I have 1000 data in this format, so that would be useful!)

3) In Greek (both modern and ancient), the question mark symbol is ";". If I enter this symbol alone in an infobox cell, however, for some reason it's not properly interpreted as plain text, and the cell is shown as blank (perhaps because ; has some meaning in coding?). I had the same problem with the "-" symbol, but in that case it sufficed to use another Unicode character with identical appearance. How can I make sure that the Wikipedia editor recognises ";" (or any other character) as text and not as code?

Thanks again! Anaxicrates (talk) 18:14, 12 November 2023 (UTC)

1) can be answered by reading the documentation here. 2) I do not know. 3) If that is the semicolon, that is indeed wikitext when used to start a line. I would suggest you ask the question on the primary Greek wiki to see what they do as it is not an issue we have. Regarding - (the hyphen), that is only wikitext when it is preceded by | and both appear at the beginning of the line. A similar comment about asking there. Izno (talk) 18:36, 12 November 2023 (UTC)

Thank you very much! I've solved most of the problems. Regarding question number 1, however, I've only managed to change the background colour: on the other hand, I could not make the grid lines visible as in the example I provided, nor find a guide in order to do that. This style choice seems standard for all Infoboxes in the Italian Wikipedia, while it's non-Standard in the English one. However, I cannot find where the coding is different. Do you have any clue? Anaxicrates (talk) 23:30, 13 November 2023 (UTC)

While researching dark mode (and alternatives to the current invert approach), I becamecurious about the background (pardon the pun) of the background colors used on infoboxes and was only able to find the historic artifact Wikipedia:Infobox_colours (not sure if there is a modern alternative?).

For example on Paris the infobox-subheader has a background color of #cddeff, COVID-19 has an .infobox-above with a background of #ccc. In COVID-19_pandemic_in_Hubei it is red... I am not sure what these colors mean... Generally I see infoboxes have a #f8f9fa background (e.g. Drew Barrymore)

Has anyone ever discussed replacing/reinforcing them with patterns/icons or removing those colors altogether? If they're not recommended is their a style guide with agreed recommendations on wiki?

(Side note: The Trello feature and this blog post makes very interesting reading https://wearecolorblind.com/examples/trello-colorblind-friendly-mode/ and I was curious if any of it could be applied to in article content)

@TheDJ: @Izno: who likely can give me the history lesson I need here (please do ping others!)... Jdlrobson (talk) 02:29, 18 November 2023 (UTC)

Any customizations made to infoboxes are totally organic, no standardization or color guidance provided or similar anywhere besides the base style (.infobox for color) and our desire for WP:COLOR adherence (contrast requirement at the minimum). I know that several areas color their infoboxes similar to their topic (sports and their teams, transportation and their routes). There are one or two colors lying around that is the same as/similar to the navbox coloration (Paris), but that's only because it used to be one of the navbox classes before those got taken out of Common.css and not any other reason that I know of. WP:MILHIST standardized their navbox and infobox colors, as did WP:COMICS for their half dozen infoboxes. I have no idea where the grey that I've seen in several places comes from ({{infobox character}}, COVID-19).

TheDJ might have more history but I doubt it. This is one of those places where there was teeth pulling in ancient times just to get people to use {{infobox}} so it might have been at the time "get people using the central infobox and then we can worry about standardizing colors and then never did". It might not have been too.

I have added support a while ago for TemplateStyles for specific infobox templates like Template:Infobox TV episode now uses to adjust the coloration, and I'd say it's in my far-future plan to get colors moved over to using those. Izno (talk) 02:38, 18 November 2023 (UTC)

Like Izno said, there isn't a standardization, just what infobox designers think is appropriate. Take {{Infobox YouTuber}}, {{Infobox Twitch streamer}}, {{Infobox TikToker}} or {{Infobox Instagram personality}}: their title colors match the brand colors of the social media platform. SWinxy (talk) 05:35, 18 November 2023 (UTC)

Thank you !! This is all very helpful! Jdlrobson (talk) 17:06, 18 November 2023 (UTC)

In mobile, infoboxes collapse to full screen at lower resolution. It's been annoying me that this behaviour is not present in Vector 2022 as I've been increasingly experimenting with using this skin on mobile.

The code in question is here and is pretty well battle-tested (over 10 years in production): https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/hacks.less#L37

Would it be controversial to move these infobox related styles intoModule:Infobox/styles.css or some other on-wiki stylesheet?

Thanks in advance for your thoughts! Jdlrobson (talk) 20:09, 27 December 2023 (UTC)

This is blocked by our fixing infoboxes, the previous discussion of which is at MediaWiki talk:Common.css#Infobox and TemplateStyles. I agree that supporting mobile directly in Module:Infobox/styles.css is a worthy end goal. (See also musings about infobox structure at User:Izno/Sandbox/Infobox, which is inhibited by the styles not being in our control.)

I do think hacks.less should live in MobileFrontend rather than in Minerva, since hacks are indeed hacks and MF is essentially a hack-as-extension to support mobile. This particular case (and much of hacks.less) is in the set of things I think shouldn't be controlled by a skin. Not all of it - I do see a few selectors which are appropriately in the skin. Izno (talk) 21:19, 27 December 2023 (UTC)

I suggest to think how could we improve the accessibility and semantics for bulleted subheaders like this (see Alaska) which are present in many infoboxes in some varieties (e.g. bold, not bold, with different spacing). Not only is there no semantic/accessible markup here, there is no markup here at all, these are just plain  • .

I find it difficult to say, though, how this should be structured best. Semantically, I think, "Language" and "Time zones" on the screenshot are sections/divisions of the table with a title, so "Official languages" and "Spoken language" are like the other table headers, just inside this section. But we can't use multiple <tbody> elements in MediaWiki, so I'm not aware how such sections could be isolated.

There are other complexities as well. Sometimes you have a section header that is a key in a key–value pair itself (e.g. "Government" in {{Infobox country}}, see Antigua and Barbuda: "Government: Unitary parliamentary constitutional monarchy"). There can also be "subitems" like "Summer (DST)" on the screenshot.

For key–value pairs, <dl> element is best suited (generated by ;: markup), so one could come up with a structure like this:

; East of 169°30'
: UTC−09:00
:; Summer (DST)
:: UTC−18:00

that would translate into this HTML:

<dl>
<dt>East of 169°30'</dt>
<dd>
UTC−09:00
<dl>
<dt>Summer (DST)</dt>
<dd>UTC−18:00</dd>
</dl>
</dd>
</dl>

But then you would have difficulties to style the elements in such a way that all headers are on the left, and all values are on the right – and to make the widths of the left and right precisely match their widths in the rest of the inbofox.

That said, using semantic tags is not the only way to make an accessible layout: ARIA roles and attributes may come in handy just as well. Jack who built the house (talk) 15:24, 6 January 2024 (UTC)