Forum:Changing to Portable Infoboxes

So today, I've seen several links about some new thing called Help:PortableInfoboxes. Apparently it's a new way to code infoboxes that makes them friendlier and more organized on all types of devices.

I know you all hate change, but even if this isn't something Wikia is making us do, we should do it anyways. It will improve our wiki, and even if it's a change, it's a positive one.

We can probably change the colors, etc. And I also find the lines between pieces of info make it easier to read. They also have the benefit that they don't look like they're straight out of 1999. At the very least, we should ditch the grey color scheme on a lot of things.

There's a list here of all our current infobox templates that are non-portable (which currently is all of them?)

I am concerned about how our image switch template will fit in, as well as the weird way our Episode credits work. Though I think straight-up converting the episode credits to the new system might work better than trying to adapt the current table-like system.

Anyways, I'm starting this to get discussion going among those who are actually smart enough to experiment with this. Let's hope we can get something done. 13:52, August 21, 2015 (UTC)

Discussion
Also, we should look to maybe collaborate, steal code, or something with other Anime/Manga wikis that use similar infobox formats (switches, etc) to maybe get one really stable format we all can use, instead of trying to go it alone. 13:56, August 21, 2015 (UTC)

Wikia will certainly be happy if we implement this since they are all crazy about mobile-friendlyness recently and our infoboxes are quite outdated as code. However I'm not sure how these will interact with the switches we use and I don't know if we use other particular codes/templates in the infoboxes, so test needed to be done.

Thanks, Levi. Hopefully someone can get a test going up soon? There's this help page wikia made to get the ball rolling, perhaps someone can take a look at that? I'd start with something simple, like a location infobox or something without a switch first, then move into character & episode boxes, etc.

Another thing: If we have needs that currently can't be met by the new format, and other wikis are in the same boat, we can probably talk to staff about getting it adapted into the format. If a large amount of communities need a change to make staff's shiny new thing usable, they'll probably actually work on it. But only if we act while the thing is still new! 14:08, August 21, 2015 (UTC)

I see the point of this portable infobox thingies. When I use Wikia on mobile, the color schemes are not visible. Sorry I TL;DR'd the help article about this, but does this aim to have the same style of infoboxes on both the usual and mobile versions?

Actually, I don't know if color schemes will be visible either with these portable infoboxes. You don't see the color schemes because the mobile skin doesn't import our CSS.

Well, Ive made a test infobox following that pattern,. You can see how it looks like in an article here. Colorschemes dont work with it but there might be a way to re-do our colosrschemes in order to apply to these templates. Not sure if the switch will work with that, I havent tried it yet. 17:09, August 21, 2015 (UTC)

Hi guys, let me present myself briefly. You can call me Think, I'm from french OP wikia. Emperor Jarjarkine told me about this idea and wants me to help. (really short presentation haha).

First of all, it's a very good idea to implement this new way of infobox. I never try it, but from what I have seen, it looks really clean and simple way to create new infoboxes that can be portable (that makes them just crucial for the future).

For your question Staw-Hat_Luffy, it seems that we will have to use CSS in order to create our own theme, but it's a logical way to do things. (Help:PortableInfoboxes/CSS)

Well, that is it, just wanted to let you know that I'm interested in this project and wanna help you out :D



Profil Think D. Solucer Discussion

Hi! I'm BroOk from the Catalan One Piece Wiki. We use the same infoboxes style than this wiki (and this wiki uses some of our ideas too).

I think Portable Infoboxes are great. There will be more space for information in the infobox and it will look better. However, if we incorporate Portable Infoboxes, we will have to create a new theme for infoboxes. I have to read more help pages and I need more information about it, but can we continue with different colours for different organizations or have we to choose a single colour for all infoboxes?

There are a lot of work (here and in Catalan One Piece Wiki), so I can help you if you want. -- 20:35, August 21, 2015 (UTC)

I think it looks really great, actually. Aside from small color scheme things, it's fine. I even checked it on my phone, and it looks way better there too, especially when you try the old box on mobile.

Is there anyone opposed to changing over most simple infoboxes right now?

The next steps to be concerned about are 1) Episode Box and 2) The switch template.

Any of you guys want to try and tackle those?

And good news, everyone! I made a a comment on the staff blog about the switch template, and the response says they will have some kind of work-around by monday. So something might come out of that, but we should be ready to determine if there are any problems with it. Seems like staff is willing to help out on this one for sure. 21:30, August 21, 2015 (UTC)


 * Colorschemes dont work with it but there might be a way to re-do our colosrschemes in order to apply to these templates.

This is a giant pain in the ass, you can add your custom CSS classes but the way the help page tells you do that is by using, however this parameter won't add the class with exactly the same name, but rather it will rename it like   or something like that. I'll ask staff if there is a workaround.

Yeah I figured that, well the thing is still new, we should give staff sometime and Im sure they will do something about that. We can live without coloschemes in the infoboxes for a month or so I think. 12:59, August 22, 2015 (UTC)

Just wait until they fix it. We can't actually live without them since the arc is ending soon meaning we'll most likely have new characters being introduced/old ones that need new custom color schemes. SeaTerror (talk) 20:03, August 22, 2015 (UTC)

I posted on the staff blog here about the color schemes. Feel free to reply or whatever, as more posts means a more quick and detailed response from staff. 12:49, August 23, 2015 (UTC)

The way that user on CC suggested to edit them, our templates would look much worse. http://i.imgur.com/AI8PreI.png Thats how it looks if you re add the colorscheme manually. 23:20, August 23, 2015 (UTC)
 * You need to set the padding to 0: http://imgur.com/cwpZaep.png--~Ultimate Supreme  13:12, August 24, 2015 (UTC)

Update: Staff came here and make a workable version of the switch template, as described. It seems to work alright. If someone could do a bit more testing with 3 image characters, like Capone Bege (post manga only) and Coby (post anime only), as staff didn't test that.

Also, Staw has been experimenting with getting the color scheme stuff right, and it seems to be in order. I gave him temp admin rights to deal with the mediawiki stuff and told him to expand to all location pages. He'll post a little more one what we could do to alter them too later. Soon, we'll expand to all simple 1 image boxes, I think. 15:13, August 24, 2015 (UTC)

As JSD said, I have replaced the island box with the new template, and need to manually add the colorschemes now. If anyone wants to improve something to the design, please say so and I will try to do it. 16:03, August 24, 2015 (UTC)

I don't really understand the technical aspect of this, and what it means for desktop and mobile viewings (and if someone wants to humor my ignorance and explain it in layman's terms, I'd listen), but I do know that from a strictly visual perspective, this is what we describe as 'butt-ass fugly'. And I, for one, would like to have pages that aren't butt-ass fugly. UltimateSupreme's screenshot with the padding at 0 looked exceptionally tolerable. So if we can get these without a honking yellow border, that'd be the way to go. I wish I could contribute more than my nobody-cares criticisms, but this stuff just goes over my head. 20:36, August 27, 2015 (UTC)

Get rid of the yellow border and colored backgrounds for every section headline. 20:38, August 27, 2015 (UTC)

UltimateSupreme's looks better but the blue would eventually clash with custom color schemes. It would be best to just go with white. Also is it possible to make the boxes themselves a bit smaller like the original template? SeaTerror (talk) 21:18, August 27, 2015 (UTC)

First off, why are you all so angry in this forum? This is a work in progress, and so far none of you have actually given input on this until today. Do you have to jump to such an angry tone right away?

Anyways, I don't care for the thick yellow border around the title, etc. But I do like the thin yellow border that surrounds the whole box. And I agree with ST that the default blue does create some clashing with certain color schemes. THat's why I like the white box too. However, the pure white box makes a problem when compared to the stock box: I really liked the small lines that divided each piece of info in the box. With white, I think we lose those. That's why I like the information headings to have the color scheme as well. 03:24, August 28, 2015 (UTC)

Hi! I’ve almost done changing infoboxes on Russian OP Wiki. That might be the most useless time spent in my life, but well…

Not much to explain, better see for yourselves: our infoboxes, main css and two imported files, CS.css - for common colorschemes, like here, and DF.css - for Devil Fruits – yes, I’ve parsed all DF pages and made css, feel free to use it (might differ a little from colors used here).

You can use theme="XXX" and/or theme-source="XXX" attributes of the infobox tag to set its style (explained here a here), and actual css class should have name .pi-theme-XXX. So, for example, colorscheme

.AccinoFamilyColors { background:#000000; color:#808000; } Should be converted to

.AccinoFamilyColors, .pi-theme-AccinoFamilyColors .pi-header, .pi-theme-AccinoFamilyColors .pi-title { background-color:#000000; color:#808000;} (it’s backward compatible).

Main problem is that you can’t use different styles for headers in one infobox. So, there is no simple way to convert Char Box with its Devil fruit header. Only workaround I’m thought of is creating additional template wrapping it with    test Char Box and its usage. Additional hack required in that case:

.GomuGomuColors .portable-infobox { margin: -16px 0px 15px 15px; }

Tabber and switch can be used inside navigation tag with globally defined padding:

.pi-navigation { padding: 5px 0px 0px 0px !important; } Image sizes in switch should be set manually to correspond infobox width (default 270px). Works fine, as you can see on my test Char Box.

Have no idea what to do with Episode Box.

Hope my info was helpful.Valdy (talk) 22:27, September 7, 2015 (UTC)

Yeah, that looks great! 23:21, September 8, 2015 (UTC)


 * Continuing the discussion on Forum:Changing to Portable Infoboxes - Got Questions?