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 {{
Magic 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 {{Magic item}}) be bolded? Should the second column's text be left-aligned or right?
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 :)
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.
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).
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?
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.
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.
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 {
border-bottom: 1px solid #A9A78A;
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;}
