Infobox Wikia

Mentoring:Danganronpa Wiki

224pages on
this wiki
Add New Page
Talk0 Share
Mentoring requests Danganronpa Wiki

What is your username? Scottier.

Are you an admin on the wiki you are asking about? Yes

Please link to the wiki (or the specific templates or pages you want help with) here:

What would you like help with (e.g. styling or making an infobox or page portable)? Essentially I'm part of a very new team of admins, who have taken over the running of a wiki where despite having some extensive CSS styling, a lot of it is outdated and the person who implemented it (and as far as I know, the only admin the wiki has had with css experience) has left the wiki many years ago. Our major issue is I'd like to improve our portable infoboxes template to be more in line with what our non-portable boxes look like, because the ones we have are pretty ugly and have an issue with images sizes (images much wider than the box they are in), presumably because of something funky in the CSS that was left behind but I haven't been able to determine what the problem is. I'd also like help with running me through how to make additional classes of the default portable box design so that we can have colour options.

Additionally, it would be really helpful if someone could help with labeling our CSS more thoroughly so it's clearer to see which pieces are controlling what, because it can be frustrating to know what to edit in order to make changes for both me and future admins.

Any other information (e.g. links, screenshots, or snippets): An example of our portable infoboxes:
The major issues are:

  • the padding for the field labels (eg "Japanese") - we'd like the background colour to fill the whole label box.
  • label fields tend to overflow on desktop browsers, leading to things like "Performer

s" on two separate lines.

  • images load wider than the box they are in

What we'd like them to look like, preferably with the page name field given a separate background colour to the image field, and labels/categories based off our navbar color, pre-collapsed on page load (we have templates that contain spoilers and ease of collapsing is one of the major reasons we want to move to portable), and with rounded corners to gel with the rest of our site styling:

In order to ensure you can implement and maintain a Mentoring solution, how would you classify your technical (in CSS, Templates, and Infoboxes) skill level (or those of whomever will be maintaining your Templates)? Intermediate. I'm pretty comfortable with changing sizes, colours, adding background images, borders, rounded corners, basically simple styling etc and have been editing Tumblr themes for a few years - I built/styled everything on our current homepage - and I'm pretty comfortable building templates, I'm just unfamiliar with CSS as it relates to Wikia. If I was just stripping out all the CSS and building it it myself by learning from tutorials I would find it much easier but as I'm new to CSS as it relates to Wikia it's difficult to pinpoint which sections are changing what part of the Wiki since it has been implemented by someone else, particularly as some of the code left behind in our wiki doesn't even do anything anymore. I'd appreciate someone's guideance explaning how to make sense of all this code that's been dumped on me!

Scottier (talk) 13:15, March 18, 2017 (UTC)


Hi, Scottier (and happy birthday!). I did some of the initial drafts for Danganronpa's PIs, but the drafts never got approved. I'm happy to work with you on the new theme you've got going. Give me a day or so to put something together. 😀 FishTank @fandom (wall) 02:47, March 22, 2017 (UTC)

Hi! Sorry about the delay in replying, I completely missed your answer! Thanks so much for offering to help. Your draft is from before my time (our current mod team largely joined in January, and I as pulled in at the start of March), at the time I believe the admin who answered you was the singular active admin, so I'm not surprised it got left behind. We're very interested in introducing portable infoboxes now because our whole Wikia is flourishing now that we have an active admin team behind it for the first time in years, and so we're building a bunch of new categories and portable infoboxes are just so much easier for those on the team that don't know how to code. I'd appreciate any help you can offer. Scottier (talk) 11:00, March 30, 2017 (UTC)
Happy to help, and to rebuild the PIs. It's actually fairly straightforward. There is one issue, though: you're assigning different accent colors (for title, header, and background) on each infobox, which we can't really support so easily. That's a lot of customization, and I'm not sure how much you would be willing to simplify that. The native solution is an accent color (defined per-article) for titles and headers (one color for both). The preferred solution is to have those colors actually mean something (like Alive, Dead, etc.) using themes. So, let me build the drafts with some defaults and we'll work on more specific per-article styling and themes when we get to those, if necessary. Could you be more specific when you say "labels/categories based off our navbar color"? FishTank @fandom (wall) 19:12, April 1, 2017 (UTC)
Oh don't get me wrong, I wasn't under any impression that that kind of article-specific colour customisation was something that was available in portable infoboxes, we were just running with it with our non-portable boxes because it was an option available to us! We're more than happy to simplify the number of colours we have to choose from.
For our franchise, dead and alive-type themes won't work because our content kind of pings around in the timeline. I think in our case, we would ideally need 6 colour options total:
  • 4 for our main game series characters, because each game has a unique cast, and identifying which game they came from by colour would be very useful. If it helps they can be labeled something along the lines of "DR1" "DR2" "DRAE" and "DRV3".
  • 1 for characters who originated in expanded media only, like books or the anime series.
  • 1 basic "misc" colour, for non-character articles.
I'm not expecting you to know which colours fit each of our games best! But if you can make some with some random primary colours, I'm quite sure that I'll be able to understand what's going on enough to change the colours to fit our needs, colour is at least a part of coding which I can handle, haha!
As for my comment about "labels/categories based off our navbar color" - I'm sorry that I wasn't clearer. Basically, I would prefer that the basic "misc" non-character article portable infobox, which would ideally be the one that pops out when you use the Infobox creation wizard, used an accent colour based on the colour of our navbar, which is this blue. Our current default portable is totally grey, and doesn't fit with our general look at all, because our series is very colourful. This grey box is, I think, based on stuff currently already in our CSS, but I've been struggling with getting it to change (it looks very different to our character infoboxes in general and none of us like it). I'm not sure if it's possible to have that colour be set by default or if someone would need to go in and manually add the class afterwards?
Thanks again. Scottier (talk) 01:10, April 2, 2017 (UTC)
🆗. I'm placing the PI CSS code in your Themes.css. In order to avoid some very ugly breakage, I'm removing the bg color, category color, and label color fields. In {{Character Infobox/Draft}} I've added a parameter called origin (which should work for themes DR1, DR2, DRAE, DRV3, manga, anime, and novel (these last three are equivalent now, but you might change that in the future)). The absence of these is your default (no need for a misc when you have a default 🙂), based on your ThemeDesigner colors. I'm going to annotate the CSS more thoroughly before I'm done. Also, I've used CSS Variables (which should work on everything except Microsoft Edge) with the legacy fallback for Edge. (Though it should support them in its next major edition.)
Now for a little different choice: sizing. Our Europa skin is overall bigger, and more touch friendly. Your existing model is much smaller, which is causing some of the overlap problems you mentioned. You'll be able to toggle Europa on or off at the community level, and I'm making the boxes so that they'll work with both options. I'll have a screenshot of the differences shortly. This isn't a choice you'll have to make now. I'll have more for you soon. FishTank @fandom (wall) 21:05, April 3, 2017 (UTC)
Oh! One more thing: the existing coding of your images puts the tabber inside the name parameter, which is causing very odd issues. I've added an image parameter that will format it properly. You're going to want to change that when you move to the new boxes, and I can help with that. FishTank @fandom (wall) 21:09, April 3, 2017 (UTC)
We spotted you editing earlier! We really appreciate you helping us out.
Yes, I'd noticed the issues with the name field when trying to add colours to the non-portables and finding editing that section coloured the image box, I'm glad it's something you were able to identify and i'd appreciate you helping us remedy that.
The way tabs are rendered on that mid-size theme looks fantastic, I must say, I passed it around the Admin Discord and the team were thrilled. We're definitely happy to change our width to be more standard, none of us know why the infoboxes were made narrower in the first place, haha. Scottier (talk) 00:28, April 4, 2017 (UTC)
Great! I noticed that there are several variations of Character templates, though most are mostly compatible. When I run the bot, would you like me to consolidate those to the new template? FishTank @fandom (wall) 02:27, April 4, 2017 (UTC)
Yes please! We have a ridiculous amount of templates that have been grandfathered-in, part of the reason we wanted portables was so we didn't need so many and could start combining them without someone having to deal with all the if-statements. It will be a lot easier to do that with portables! Scottier (talk) 11:42, April 4, 2017 (UTC)Scottier

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.