Forums: Helping Hand > Standardizing infoboxes

Use the following template for a nicely presented post:

{{Forum post|Write your message here!|~~~~}}

Right now, our infoboxes are all pretty similar, but differ in minor ways. For example, most unnecessarily use a table-within-a-table approach to form the background and border colors for the infobox. Others, such as {{Item}}, don't. Some of the templates rely on formatting that's not in the CSS files we use on this wiki, and were presumably copied over from other wikis. I would like to standardize how all of the infoboxes work. This is as simple as (with Fw190a8's help) defining a couple CSS classes and tweaking the existing code.

For anyone familiar with CSS, I could use some help choosing which sections could be standardized. I would include:

  • A "table.infobox" class, which would make it so the table floats to the right of the text, sets the border-width and default border-color, margin, etc.
  • A "table.infobox > img" for defining the dimensions of images in the infobox. This could really help with the problem of over-large images by setting max-width to 250px.
  • A "table.infobox > .header" for the name/title parameters of the box. This would set the line-height and boldness, mostly. The background-color would still have to be set manually.
  • A "table.infobox > .subheader". I like the way some of our templates have sub-sections ({{Location}} has subsections for Geographic, Societal, Political, and Historical information). It breaks up the information to make it more easily readable. This would be very similar or even the same as the .header section, defining line-height and such.

If you don't know CSS, that's fine too. Assuming I get approval to update the templates, I'd like input on HOW exactly the infoboxes should look. Should the text be the same size as that in {{Location}}? Should the parameter title (for example, the phrase 'Caster level' in the example shown in {{Item}}) be bolded? Should the second column's text be left-aligned or right?

Cronje (talkcontribs) 23:34, February 8, 2012 (UTC)

Cronje, personally I love using the infoboxes!!! I completely agree with Thom, we need a Building template... I actually like to look of the Locations and Persons... not Magical items... for one thing the Magical item text is so much bigger than the writing on the page... take Bracers of the Blinding Strike vs. Tower of Twilight... the text on Tower is more like Wedge Antilles on wookeepedia... the infobox does not dominate the page... it is a reference... a quick snapshot to the article... and with Bracers... the words are all bold and take away from the page... but I do agree all the infoboxes need to be similar and updated :)
Darkwynters 23:49, February 8, 2012 (UTC)

Here here, a bit of standardisation across the infoboxes would be great, it oo like to maximise as much info as i can into the infobox when writing a page. The person and location boxes are great, like darkwynters says, they are not intruding on the page, the colour scheme is mellow and its simply organised. I have no knowledge of CCS so I cant help you out, but I totally support what you're doing.
Thomaslove92 09:51, February 9, 2012 (UTC)

I've edited my sandbox page to show the basic layout of what the 'standard' infobox will look like, with the suggestions made by Darkwynters. It should be easy enough to convert to CSS to make the writing of new infoboxes even simpler. Is the sandbox infobox everything it should be? What, if anything, needs to be changed still?

I'd like to hear some more of our members, particularly some of the admins (Fw1908a, in particular, as I'm not sure who has the power to edit the wiki's CSS rules).

Cronje (talkcontribs) 06:00, February 11, 2012 (UTC)

What determines the width of the wiki app and thus the usable width of our pages? Are we restricted by wikia to conform to a certain width? I would like to see infoboxes increase to at least 300px wide because we are cramming a lot of stuff in them and it causes line-wraps and often the image is too scaled down to be useful (thinking about some maps here but it could be any image), but I don't really want to scrunch the text to the left of the info box. Can we get another 100-200px for our page width?
Moviesign 14:58, February 11, 2012 (UTC)

From what I've read over on the Community Wikia site, the admins of the respective wikis don't have complete control over how the page displays, including the width of the 'main' section of the page. Keep in mind, this was months ago, so something may have changed. I've been using the Stylish addon for Firefox to force the page to display how I want, but of course we can't make everyone use it and similar mods.
Cronje (talkcontribs) 19:53, February 11, 2012 (UTC)
Since any Wikia user is allowed to choose any theme as their preferred way of viewing, we must make all articles display correctly on the default theme (just log out if you've forgotten how this looks).

I think Cronje has done an awesome job at creating the default infobox template to which I think, as others have mentioned, all infoboxes should conform.

There isn't actually a title or a subtitle on the infobox as it currently stands, so it would be good to add that in there too.

One thing to check would be if the 'parameter' text was very long, or the 'data' text was very long, and it wrapped onto multiple lines, would this still look okay, or would there be issues?

Finally one thing to bear in mind is that we have over 10,000 articles, so this new format must work universally with all the old articles. If we have to change several thousand articles (except very minor changes) I think we would be in for a difficult time.

Just let me know what CSS you would like to be added to the main wiki stylesheets and I can make this happen.

Fw190a8 09:28, February 18, 2012 (UTC)

It should be easy enough to make the infoboxes backwards-compatible with older formats, so hopefully it won't require much individual article tweaking. So long as the new CSS styles don't overwrite older classes in the individual theme files, that shouldn't be an issue. I'll have to do some playing around to make sure text wrapping will work correctly (vertically-aligning the rows should handle this, but I want to be sure), but other than that, I should have some code for you later today or tomorrow.
Cronje (talkcontribs) 19:35, February 18, 2012 (UTC)
Here's what I have for the CSS so far. My only question is, should the infobox's width be fixed width (say, 350 pixels) or proportional (i.e. 10% of the screen)? Also, instead of using infobox as the class name, it should be something less generic so that it doesn't accidentally overwrite existing infobox code in the individual themes. Even something as simple as infobox2 would work.
table.infobox {
 background-color: #FFFFFF;
 border:           1px solid #A9A78A;
 color:            #000000;
 float:            right;
 font-size:        88%;
 max-width:        350px;
 vertical-align:   top;

table.infobox > tr {vertical-align: top;}

table.infobox td.infoboximage {text-align:    center;}
table.infobox td.infoboximage > img {max-width: 300px;}

table.infobox td.title, table.infobox td.subtitle {
 background-color: #BDBCAD;
 font-weight:      bold;
 line-height:      1.2em;
 padding:          0.25em 0.33em 0.33em;
 text-align:       center;
table.infobox td.title    {font-size: larger;}
table.infobox td.subtitle {background-color: #DFDECF;}

table.infobox tr td:first-child {
 min-width:  150px;
 text-align: left;
table.infobox tr td:last-child {text-align: right;}

table.infobox td.categories {text-align: right;}
Cronje (talkcontribs) 20:44, February 18, 2012 (UTC)

Looks great dude, i'm psyched for this. All we need now is admin to do the last leg.
Thomaslove92 00:20, February 24, 2012 (UTC)
Sorry this took a while to put in place. It is there at MediaWiki:Common.css now, under 'infobox2' as you suggested. For what it's worth, don't use relative sizing (such as 10%) for the infobox width, because the main Wikia skin is fixed. I think 350px is probably going to be too wide to have text wrapping alongside it comfortably, but I suppose we should see about that.

I am looking forward to seeing the new standardised format in action!

Fw190a8 11:45, March 3, 2012 (UTC)

Ok, so how do use this new infobox? how do i create an infobox on a p[age with this formatting?
Thomaslove92 14:29, March 3, 2012 (UTC)

Well, the CSS is there, but now it's up to Cronje to create a standard 'base' infobox template. Once that is done, the individual templates like {{Organization}} and {{Building}} can be made to use this base template. Right now, there's not a lot to see or try out.
Fw190a8 14:47, March 3, 2012 (UTC)

Aaaah, cool.....i wait eagerly.
Thomaslove92 15:19, March 3, 2012 (UTC)

I don't know if it's just some weird caching problem, but I think the new CSS rules might only be applying to the Monobook skin for some reason. Also, some unforeseen problems seem to be cropping up, but they're easily fixable, if you (Fw190a8) are willing to fiddle with the code some. Besides making it work in the 'New Wikia Look' skin, the only thing that needs changing is for both instances of 'text-align: center' to be changed to 'text-align: center !important;', as one of the other rules was overriding it.
Cronje (talkcontribs) 23:48, March 3, 2012 (UTC)

Hmm. I have made the changes to both MediaWiki:Common.css and MediaWiki:Wikia.css. Perhaps one is for Monobook and the other is for the Wikia skins?
Fw190a8 11:13, March 4, 2012 (UTC)

Ah, there it goes. It's working now. I'll get started on updating the infoboxes soonish. Thanks!
Cronje (talkcontribs) 20:17, March 4, 2012 (UTC)

I added the titles parameter to the infobox and removed the ageyear paremeter from {{Person}}, since the latter was typically used to give the "current" in-universe year, which is no longer policy. This won't break any article that has the parameter; it just won't display. I can add this back in easily enough if you guys feel we need it.

I removed the input parameter from {{Computer game}}, as there was no documentation on what it's supposed to represent on either this wiki or the one it's based off of.

I left {{Discipline}}, {{Evocation}}, {{Exploit}}, {{Hex}}, {{Prayer}}, and their individual sub-templates alone, as the only difference between them and {{Spell}} is their coloring. All of them are pretty much different names for their class's abilities; hex for warlock, prayer for divine spellcasters, etc.. I know User:Niirf-sa put a lot of work into them, but they don't really add much to the wiki and I vote to get rid of them. If you prefer, I can easily add a new parameter to {{Spell}} for changing the background-color of the title parameter and have each of the other templates call on the Spell template.

For the same reason as above, I did not modify {{Primordial}}, as it's just a differently-colored {{Deity}}.

I also left {{Help}} alone, since it doesn't really fit with the other infoboxes and should have its own sort of style, in my opinion.

For {{Item}}, I added several new parameters for sentient items. Communication is for how the item communicates, languages for the item's known languages, and alignment for if the item has an alignment.

For {{Organization}}, I've removed the reckoning, formedday, formedmonth, formednotes, disbandedday, disbandedmonth, and disbandednotes parameters, as they're unnecessary. The template doesn't do any calculations between the time of forming/disbanding the organization (as {{Person}} does for birth/death/destruction), so editors can put everything in the formed and disbanded parameters. As for reckoning, I've never seen anything dated using another calendar besides Dalereckoning. I'll go through each page that uses the template to make sure nothing got broken. I've similarly removed the page parameter, though I've made this backwards-compatible so it doesn't throw anything off.

Finally, I had to edit {{Alignment grid}}, as it didn't agree with the new infobox for some reason. Now it's fixed width.

I still need to fiddle with {{Conflict}}. It's going to take a bit more work, since it has four columns instead of two. Then I need to back and see which articles use {{Organization}} to make sure I didn't break anything by removing the reckoning parameter. Please let me know if you see anything that looks wrong.

Cronje (talkcontribs) 09:32, March 5, 2012 (UTC)
Great work! It looks really good and I'm pleased we were able to standardise so much.

I'm afraid I still think the template is too wide though. I do think we should fix the width at 275px, and have every infobox at this width, to provide further uniformity. At the moment, there is no left margin on the infobox, so some text looks a bit scrunched against its edge. If you were to add a left margin on a 350px infobox, call that 360px, the width of the text area on the default skin is only 680px, so there is less than half of the room left for the article text, which does make it look scrunched up.

Fw190a8 20:05, March 5, 2012 (UTC)

Ah, you're right. I use an extention to expand the stupid fixed width Wikia skin and based the infobox width off of that, when I should have disabled it for testing. You're right, let's lower it to 275. And I also completely forgot about the outside margin; good catch!
Cronje (talkcontribs) 21:37, March 5, 2012 (UTC)
Do I need to change the CSS to achieve that? If so could you let me know what you'd like to change?
Fw190a8 21:44, March 5, 2012 (UTC)

Under table.infobox2 {}, change 'max-width: 350px;' to 'max-width: 275px;' and above that put 'margin: 0 0 15px 15px;' (20px might be better, but that cuts into the article space too). While you're at it, please change 'table.infobox2 > tr' to table.infobox tr' (no > symbol). I always forget that browsers add a tbody element to tables, so 'tr' is not a direct descendant of 'table'.

There's also a weird display bug happening for certain articles in some browsers. For example, if I go to the Harpers article in Chrome, the infobox takes up the entire available space, and in Internet Explorer it takes up about 95% of the available space. However, in Firefox, SeaMonkey, Flock, and Opera, it appears as intended. I'm still trying to track down why this is.

Cronje (talkcontribs) 02:16, March 6, 2012 (UTC)

You fixed the Person template! Hurrah! That's been bugging me for ages. Thank you! :)
BadCatMan 03:45, March 6, 2012 (UTC)
I have fixed the width at 275px with both max-width: and width:. This appears to have fixed the width issue in Chrome. Perhaps someone could check in Internet Explorer as I can't test it?

There is a min-width set on the first td element, which means that on, for example, Harpers, despite none of the labels being that long, the "Enemies" of the Harpers wrap more than I think is necessary. I think it might be better to lose the min-width and perhaps replace it with some right margin on the first td element? What do you think?

Fw190a8 20:00, March 6, 2012 (UTC)
Actually, any alignment grid tables that appear within the infoboxes are also subject to the min-width rule, so the left column of the alignment grid appears really wide as well, so I am going to remove it. I will replace it with a nowrap to try to prevent labels wrapping onto two lines where possible.
Fw190a8 20:03, March 6, 2012 (UTC)
I've had a go at changing {{Location}} to the new format, but I always seem to encounter the same problem when I do table-based layouts, which is that there is extra whitespace creeping in somewhere.

I could never find the problem, and as far as I can see I have done everything exactly the same as the {{Person}} template. See Bell Market to see what I mean.

Can anyone help, urgently, to get rid of the whitespace from where it shouldn't be?

Fw190a8 21:20, March 6, 2012 (UTC)

I think the whitespace issue has something to do with the line returns between my if statements, which the wiki code translates as <br /> and <p />; I'll fix that now. Just a heads up: it looks like you did away with the min-width property in MediaWiki:Wikia.css, but not MediaWiki:Common.css, so Monobook users will still have the issue.
Cronje (talkcontribs) 22:05, March 6, 2012 (UTC)

I agree with Cronje, you can see the extra space in the page source:
<td colspan="2" class="title"> Bell Market
<td colspan="2" class="subtitle"> Geographical information
<td> Area </td>
Moviesign 23:11, March 6, 2012 (UTC)

Actually, the whitespace issue would be a lot easier to resolve if I use HTML instead of going through the wiki table code. Any objections to doing that instead?
Cronje (talkcontribs) 22:12, March 6, 2012 (UTC)
No issues with using HTML instead of wiki table code if you think it will help. However, isn't that going to make the template more complicated than my original div-based version?
Fw190a8 21:55, March 7, 2012 (UTC)

Actually, now that I've given it some thought (I've been pretty sleep-deprived most of the week), I can do it just as easily with wiki code. This will also have the advantage of maybe even simplifying the code. I'll get to work now!
Cronje (talkcontribs) 00:12, March 8, 2012 (UTC)

All the infoboxes in Category:Infoboxes (except for {{Conflict}}, which I'll get to after class tonight) have now been updated/simplified and should no longer have any extra whitespace. Please let me know if you find any more problems.

The reason {{Location}} wasn't updated was that it wasn't categorized, and so I overlooked it. Sorry about that!

Cronje (talkcontribs) 15:37, March 8, 2012 (UTC)
This is top work, and I'm excited to finally have standarised infoboxes that actually work properly! Bell Market (and others) looks a lot better for sure.
Fw190a8 23:47, March 8, 2012 (UTC)

I think I'm finally done. The only issue remaining is in {{Conflict}}: because much of the infobox has a variable number of columns, whoever wrote the original infobox used a table within the infobox table, and I've followed that plan. The problem is, for the wiki code to process it, the 'start table' code ({|) has to be on its own line, meaning there's a line break between the start of the cell the table begins in and the sub-table. If none of the sub-table's parameters (combatant#, commander#, strength#, casualties#) are used, there will be a visible whitespace that I have no idea how to get rid of. If anyone has a solution, feel free to fix it please!
Cronje (talkcontribs) 00:43, March 9, 2012 (UTC)

Cronje, I wish I could help... but you have gone light ages past my understanding and the boxes are looking great... I have notice one thing under the Building template... services does not seem to show... have a look at the Elfsong Tavern... I seem to have figured out how to have the Category link with "the" places as well, but if you can think of something better, please do... just have look and great job!!! Darkwynters 01:43, March 9, 2012 (UTC)
Looks like I accidentally deleted the services parameter somehow. It's fixed now.
Cronje (talkcontribs) 02:19, March 9, 2012 (UTC)
Regarding "start table" wiki code needing to be on its own line, can you, in this instance, use standard HTML table elements?
Fw190a8 14:53, March 10, 2012 (UTC)

After taking that suggestion and getting ready to test it, it occurred to me that I could place the cell table that contains all of the sub-table within IF statements would probably work. After testing that idea, it seems to work. There should be no more whitespace.
Cronje (talkcontribs) 19:46, March 10, 2012 (UTC)

I've just added a true name parameter to {{Person}}, for when the person's true name is known. I know for that the Seven Sisters' true names are in The Seven Sisters sourcebook and will be adding them to their articles, but don't know of any others; if anyone can recall any, please add them to the appropriate articles.
Cronje (talkcontribs) 16:06, May 17, 2012 (UTC)

Great idea with he true name parameter. I do however think that the spacing between name and true name should be less obvious. Maybe even, no spacing at all. Just my thoughts!!
-Thomas Love Star_tiny.png [talk] 21:24, May 17, 2012 (UTC)

Do you mean a single line break (as opposed to the two used now) or something else? I've tweaked my sandbox to show what it would look like with only one. I think that does look better, but only when there's no citation next to it. Considering that (I think) we're moving toward individual citations for infobox parameters, as opposed to the one source parameter, there will always be a citation next to the true name.
Cronje (talkcontribs) 21:32, May 17, 2012 (UTC)

Going back a bit... I've noticed (working on Halarglautha) that on a number of dragons, the old age parameter was used to show age categories: e.g., Imvaernarhro, Skuthosiin. That line's been removed, so this dragon aging information has been hidden. I was wondering if this line could be restored. Age categories are important to a number of monsters, such as dragons. We could also use it to show ages of characters, as before, at least at a certain time. To remove from the timeline, this should be accompanied by a date, so "Age: 23 in 1372 DR" or "Age: Great wyrm in 13th century DR". Does this sound okay? Thanks.
BadCatMan (talk) 00:49, July 16, 2012 (UTC)

I've added it back, per your request. I should point out that the use of the age parameter to show something like "Age 23 in 1372 DR" should not be used. If we know the character is 23 in 1372, then we know he was born in 1349 or 1350 (based on the month) and can put that information in the born parameter.
Cronje (talkcontribs) 01:01, July 16, 2012 (UTC)

Cool, thanks!

Well, unless we have a time traveller or something... :) Or preservation or stasis. Birth-date and age aren't always clear. Say a character who appears 23 is in fact 123. Or in cases like Drizzt where his age and time-line are regularly adjusted, but that's a matter for an appendix discussion, with most recent information accepted, etc. That shouldn't be a common problem anyway. Would you like to put a note in the documentation about putting age categories in Age: too? I could write it, but I'm not sure I'm allowed too.

BadCatMan (talk) 05:39, July 16, 2012 (UTC)

What do you mean by age categories? You mean the things in dragon aging? And of course you're allowed to make changes!
Cronje (talkcontribs) 14:01, July 16, 2012 (UTC)

Yes, to say that Age can be used for monster age categories as well.

Okay, I've made some slight adjustments to Template:Person/doc. I added the Age parameter back to the example template, and added a line about monster age categories. I also removed the bit about the current year, understanding that to no longer be valid. Let me know if that's all right and good, thanks.

I think exact ages would be appropriate here as well. In the example you give of a character aged 23 in 1372, implying a birth year of 1349 or 1350, working back from that date implies an age of 22 or 23 in 1372, which adds uncertainty to the measurement.
BadCatMan (talk) 00:54, July 19, 2012 (UTC)
Community content is available under CC-BY-SA unless otherwise noted.