Board Thread:Support Requests - Getting Technical/@comment-84.13.78.6-20121213194645/@comment-188432-20121214202746

Creating a template through CSS is the way to go, because once you've figured out the basic style of your infoboxes, you can just "stamp out" infobox after infobox like an assembly line — and they all have a precisely similar visual style.

If you create the infobox solely through inline CSS — i.e. the bit you can cut and paste by going to someone's template:whatever file — then you run the risk of gradual design decay. Edtior John will come in and tweak the left margin on one infobox but not on others. Editor Sally will come bay and tweak the shade of green on one infobox but not on others. And before you know it, your template:infoboxbook is looking radically different (or worse, annoyingly ''almost-but-not-quite the same") to template:infoboxmagazine.

If you want to take some time to look at how CSS in MediaWIki:Common.css can be used to create a standard look for infoboxes, go to tardis:MediaWiki:Common.css and search for the phrase "Main style for all infoboxes". Then compare the things that are declared there to the things you see in, say, tardis:template:Infobox Person. If you stare at it for a while, you'll be able to see what's creating the text styling for individual items, what's creating the blue background for subheads, and so on.

The way I've laid out the CSS is pretty logical. As you go down the list, you get a gradually more specific declaration. So, first there's the external shell for the box, then there's the broad style of the interior, then there's the style of the various subheads, then the style of what happens to the subheads on hover, and so on.

Before you tackle infobox design, though, you have to get your mind around the HTML way of creating tables. Tons of tutorials on that. But until you understand the difference between , , , and , you'll be at a serious disadvantage in understanding how to style those elements.

This stuff might seem hard, but it's not. You just have to learn it in the proper order. Figure out what a tr is, and you'll understand better how to style it. If all you do is copy and paste from someone else's work, you'll never truly get it, and therefore you'll never have stylistic control over your wiki.

If I can recommend a series of steps to you:
 * Go to Tardis:T:TABLES and read the simple version of how tables are created in wikicode
 * Go to Wikipedia:Help:Table
 * Then go to back to Tardis:T:TABLES and try to reproduce that simple table in terms of HTML declarations
 * Then return to Tardis:Template:Infobox Person and take a guess at what each element is in HTML terms.
 * Then go to Tardis:MediaWIki:Common.css and look at the CSS for the infoboxes, and you really will start to see how each declaration affects each part of the table.

Better still, cut and paste the Tardis css into your own Common.css, and the Tardis Infobox into your template namespace. Then play around with each line of the css. Make the background color red. See what part of the table that "redness" affects. Change the text color or a line to yellow. And so on. Before you know it, you'll have figured out everything.