Dragon Age Wiki
Dragon Age Wiki
Forums: Index > Wiki DiscussionPortable Infoboxes and why they are important to your community
Note: This topic has been unedited for 1860 days. It is considered archived - the discussion is over. Do not continue it unless it really needs a response.

We're reaching out to a few of our top communities, hoping to get you on board with the migration to the new infobox markup. And we have tools to help!

Why we're doing this

Simply put: Most current infobox structure translates very poorly to mobile experiences, and indeed any device that doesn't use desktop-style displays. On desktops and laptops, they often look amazing. The problem is that Wikia's traffic is trending mobile.

File:Wikia mobile traffic growth.jpg


There is an important graph from our forum post about infoboxes a couple months back, and I want to share it here as well - see to the right.

Mobile is the future. Not just for Wikia, but for the web as a whole. Take a look at the recent trends and future growth predictions for mobile traffic - it's staggering.

We partnered with the Wikia community to create this new markup to make sure that your hard work can be displayed on mobile devices (as well as any future technologies) easily and without any new coding conventions. It'll take some effort up front, to be sure, but we're here to help, and the work you put in now will pay for itself tenfold in the future.

Tools we've designed to ease the process

We've enabled two new features on your community. One is a tool for migrating the "old" infobox code to the new markup. It identifies templates on your wikia that look like infobox templates and places a box on the right rail of the template page. When you click the "Generate draft markup" button in this box, it opens a new tab containing a draft of your infobox using the new markup.

The second is a new feature on Special:Insights that will highlight which infoboxes on your wikia have not been migrated to the new infobox markup. It's fairly intuitive - you can click on the infobox title link itself to see the old markup, or simply click the "Convert!" button on the right, which performs the same action as the "Generate draft markup" button.

Help:PortableInfoboxes is our help page for the new markup, while the migration tool is covered in more depth on Help:InfoboxMigration.

To provide even more information, we have created a Portability Hub that you can visit, check out the latest information and ask questions of our staff.

I encourage your community to ask questions here in this thread and discuss any concerns you may have. We will do our best to answer them and work with you during the conversion process. An example can be provided if requested.

Pinkachu (talk) 19:36, February 4, 2016 (UTC)

While I can see the benefits of doing this, the results that have come from my experimentation with it left a lot to be desired. I used the tool to update the ExploitInfoBox template as it is only one page so it was a good way of testing the outcome. It's visible on Exploits (Origins), but the infoboxes frankly look terrible in my opinion. Compare the aesthetics of our current infobox layouts on such articles as Alistair to the new one: We go from having a multicolored infobox with our red-splatter image on the left to show the field names and black on the right, which helps makes the info look more separate and easier to view. Whereas this new one is just a muddy brown with no real distinguishing look from both field names and field text. I have no real issue with making templates more user-friendly on mobile sites, but I don't like the fact that looks on the main site are being sacrificed in order to do so.
I know there are ways to customize the new boxes, but we're a little short on frequent contributors knowledgable about css so it's an issue I've been reluctant to tackle. this does not look even remotely "simple" to me, nor do any of the other help articles that are available. This is why I personally avoided doing this; if we've got people who can do the modifications needed that'd be great, and hopefully someone will step up here to volunteer. As it is, I'm not crazy about using a portable utility tool that makes articles look bad. --Kelcat Talk 23:13, February 4, 2016 (UTC)

I have to say I strongly agree with Kelcat. This looks fairly terrible not to mention the other problems Kelcat has outlined.

-Seekers of Truth heraldry.pngHD3 (Talk) 01:13, February 5, 2016 (UTC)

Hello, there! I'd be the one doing the migration. If the Infobox on Alistair is the target model, that's something I can easily do with a few lines of CSS. Can I give it a try tomorrow? FishTank (wall) 07:33, February 5, 2016 (UTC)
That would definitely be the target model. You're more than welcome to give it a try! --Kelcat Talk 19:08, February 5, 2016 (UTC)

Has the move been completed? Because it seems like the new infoboxes are quite awkward-looking. I like the new character icon that is displayed in the right top corner, but the table "Specialisation" doesn't fit the table, at least on my machine.


That's how it looks. User signature henioo.png henioo (da talk page) 08:18, March 30, 2016 (UTC)

The move is more than 80% complete, but it's not quite done yet. The problem you're seeing is because the text label is in a somewhat larger font size. That can be fixed with a tweak. Anything else that you see as "awkward-looking"? FishTank (wall) 10:01, March 30, 2016 (UTC)
Looks like it's starting to come together! I did notice that the icons aren't always fitting correctly on on the infoboxes of pages with longer names though (see Sturdy Hunter Mail Schematic or Fade-Touched August Ram Leather (Horn of Valor)). Thanks for the help Smiley.gif. Friendship small.pngLoleil Talk 16:50, March 30, 2016 (UTC)
Yeah, things like the listed properties being above the category, i.e. Gender, and then Male is floating above it; Class, and the Warrior is above it. It works fine when there are multiple things listed, but looks strange when there is only one. It could be more centered, or be in line with the category on the left. User signature henioo.png henioo (da talk page) 17:09, March 30, 2016 (UTC)

Thanks so much for doing this for us, the help is much appreciated! It looks like there's an issue with infobox images as they are all centered a little too the left, thus breaking just a tiny bit outside the box and obscuring the box line on the right side (does that make sense?) See Alistair and Build Watchtowers for examples. --Kelcat Talk 20:49, April 1, 2016 (UTC)

Am I the only one for whom the new infoboxes show up grey-and-white under the Monobook skin? --Koveras Alvane (talk) 14:51, April 4, 2016 (UTC)

As I didn't include styling for Monobook, that is likely to be grey-and-white for everyone. FishTank (wall) 14:57, April 4, 2016 (UTC)
Well, as this wiki has always had good support for Monobook, I think we should make sure the new infoboxes look consistent there, too. If you tell me which CSS classes to modify, I may try it myself. --Koveras Alvane (talk) 17:04, April 4, 2016 (UTC)

You shouldn't need to modify any CSS classes nor selectors. A cut/paste of the "portable infoboxes" section of Wikia.css into Common.css should do it. FishTank (wall) 17:19, April 4, 2016 (UTC)

We'll need an admin for that, unfortunately. :-(
Hey, admins! If anyone's watching this page, could you do that CSS thing that FishTank said? Thanks!--Koveras Alvane (talk) 18:11, April 6, 2016 (UTC)
Added! It's looking good from my end, but let me know if it's not working yet Koveras. Friendship small.pngLoleil Talk 15:08, April 7, 2016 (UTC)
Yep, seems to work fine, thank you. :-) --Koveras Alvane (talk) 21:04, April 7, 2016 (UTC)

Right margin spillover[]

@Admins: I have another suggestion: the current CSS makes the text contents almost spill over the infobox's right boundary (on both Monobook and New Wikia), but it can be fixed by overriding ".portable-infobox.pi-theme-dao .pi-data-value:not(:first-child)" with "{ padding: 0 10px 0 8px; }" in MediaWiki:Common.css. I have tested that in Firebug under both skins and it seems to work fine.

While we are at it, I am also not sure we should have the automatic hyphenation on by default. It's fine for full text fields like descriptions, but when it hyphenates internal item IDs and game titles, it just looks weird. I am putting that up for discussion, however. --Koveras Alvane (talk) 16:59, April 18, 2016 (UTC)

My knowledge of CSS is pretty much nil, but if you can give me detailed instructions on exactly what code to insert/replace where (either here or on my talk page), I can give it a shot. As I said above, we're unfortunately a little short on technically inclined admins due to Tierrie and Loleil having such hectic schedules, though they do as much as they can when they have time. --Kelcat Talk 04:30, May 12, 2016 (UTC)
Just add following code at the end of MediaWiki:Common.css and that should do the trick. --Koveras Alvane (talk) 16:02, May 12, 2016 (UTC)
.portable-infobox.pi-theme-dao .pi-data-value:not(:first-child) {
    padding: 0 10px 0 8px;
Done! --Kelcat Talk 18:52, May 12, 2016 (UTC)
Uhm, you shouldn't have copied the <source> tag, though... It was only there to make sure the code itself wasn't garbled. Could you remove the tag from the CSS? I think it broke the Monobook formatting... --Koveras Alvane (talk) 19:20, May 13, 2016 (UTC)
Yeah, I wondered if I was supposed to include that. Is it working now? --Kelcat Talk 20:44, May 13, 2016 (UTC)
No, the "lang="css">" part should also be removed... --Koveras Alvane (talk) 19:29, May 14, 2016 (UTC)

Okay, sorry about that, shouldn't have copy/pasted from the edit screen. Take a look and see if I got it right this time. --Kelcat Talk 19:44, May 14, 2016 (UTC)

Yup, now it works like a charm! The infoboxes look much neater now. :-) Thanks a lot! --Koveras Alvane (talk) 19:57, May 14, 2016 (UTC)