User:DoggoBit/Sandbox/Infobox board: Difference between revisions
< User:DoggoBit | Sandbox
No edit summary |
No edit summary |
||
| Line 29: | Line 29: | ||
}} | }} | ||
</pre> | </pre> | ||
==Implementation details== | |||
All CSS properties are implemented via variables, so style inheritance applies. I.e. surrounding the template in a div that overrides any one of the values will propagate the changes. For example: | |||
<pre> | |||
<div style="--infobox-color: green;"> | |||
{{Infobox board | |||
... | |||
}} | |||
</div> | |||
</pre> | |||
The ''"logical"'' elements of the box are also captured via CSS classes, so any styles could be incorporated into the website's [[Special:common.css]]. Each element has two classes: <code>nix-wiki</code> and <code>infobox-something</code>. | |||
I wold ''personally'' love to top-align the content cells, so that we don't get the staggered lines on multi-line cells, but that would be a lot of manual work now, and would result in an overly complicated template. However, it should be a common.css one-liner. | |||
</noinclude> | </noinclude> | ||
Revision as of 23:27, 3 June 2025
An infobox to be used on board-specific pages, e.g. NixOS_on_ARM/Raspberry_Pi_5.
Usage
{{Infobox board
|title=Raspberry Pi 5
|image=Raspberry_Pi_5,_8_GB_RAM.jpg
|manufacturer=Raspberry Pi Foundation
|architecture=AArch64
|support-status=Limited community efforts
|soc=BCM2712
}}
Implementation details
All CSS properties are implemented via variables, so style inheritance applies. I.e. surrounding the template in a div that overrides any one of the values will propagate the changes. For example:
<div style="--infobox-color: green;">
{{Infobox board
...
}}
</div>
The "logical" elements of the box are also captured via CSS classes, so any styles could be incorporated into the website's Special:common.css. Each element has two classes: nix-wiki and infobox-something.
I wold personally love to top-align the content cells, so that we don't get the staggered lines on multi-line cells, but that would be a lot of manual work now, and would result in an overly complicated template. However, it should be a common.css one-liner.