Forum:CSS for navboxes

Phew! It took longer than I expected, but I finally have some working code. Please take a look at User:Rigel Kent/Experimental navbox for screenshots and mockups of how the simplified template code will look. I can make adjustments if needed, so if there's room for improvement, please let me know. Rigel Kent (talk) 14:53, October 11, 2015 (UTC)

All right, I lined up the margins and cleaned up the classes, I think it's as good as I'm going to get it for now. If everything looks good, please add everything in User:Rigel Kent/wikia.css to MediaWiki:Wikia.css, and everything in User:Rigel Kent/monobook.css to MediaWiki:Monobook.css. Rigel Kent (talk) 08:33, October 12, 2015 (UTC)

◄► Tephra ◄► 19:12, October 13, 2015 (UTC)
 * What does it do? From what I can see in the image samples, it doesn't look like an improvement, especially for Monobook. I see you added v/t/e, but that doesn't really even need CSS changes to be done.


 * I've uploaded some new previews with annotations. The main two benefits are fluid layout and simplified wikitext.
 * In Wikia (Oasis) skin, the fluid layout is almost unnoticeable, because the skin itself comes in just four fixed widths that aren't too different from each other. The tablet landscape width is a bit narrower, so it's nice that the navboxes can adjust to that smaller width.
 * The big difference is in Monobook. Monobook is itself fluid, so the available width could be literally anything. Super narrow, super wide, it depends on the user. The navbox will take up as much width as it can (up to a point), and lines will reflow as needed.
 * Was your problem with the narrow preview of Monobook? It'll only appear that way if it's forced to, by the user having a small browser window. As the window gets bigger or smaller, the navbox automatically adjusts on the fly. I've actually been amusing myself by dragging my browser's window edge left and right, and watching the navboxes magically shrink and grow, it's kind of neat to watch. Rigel Kent (talk) 05:11, October 14, 2015 (UTC)

◄► Tephra ◄► 06:21, October 14, 2015 (UTC)
 * It's the Sorceress Builds box that looks the worst. It looks bad at all sample sizes. The rest of them aren't really bad, it's that one specifically that caught my attention.


 * One thing I don't like about that one is the potential for an "orphan" item, i.e., the way the line wraps it just happens to leave one item all by itself at the end. I think I can code a way to prevent that, if that'll help? Rigel Kent (talk) 06:30, October 14, 2015 (UTC)
 * edit: never mind, I don't think that's possible
 * The other thing I don't like is that it's justified, with the spaces between items growing so the line takes up full width. But that's necessary to hide the bullets. I can also do a version more like the current navboxes, where it's centered and non-justified, but the bullets will have to display either at the start of the lines or at the ends (also like the current navboxes). Rigel Kent (talk) 07:27, October 14, 2015 (UTC)

◄► Tephra ◄► 07:41, October 14, 2015 (UTC)
 * It is the justified text that makes it look bad. I could accept an orphan item, but all that unnecessary blank space between items is the problem.

Back to the drawing board... I have Monobook mockups for 5 different alternatives at File:Rigel Kent experimental 2.png, adding some additional boxes to see how they look (a weird one, Bul-Kathos, a short one, Eledamage, a medium one, Sorcbuilds, and a long one, D3A5Tomes). Rigel Kent (talk) 11:51, October 14, 2015 (UTC)

Oh noes! I was hoping that, by squinting at them for a few days, I'd be able to pick a favorite. But I still like them all equally! Anyone else have a preference? Rigel Kent (talk) 22:13, October 18, 2015 (UTC)


 * My order of preference:

◄► Tephra ◄► 22:54, October 18, 2015 (UTC)
 * 1) No justify but bullets appear before line wraps
 * 2) No justify but commas instead of bullets
 * 3) Left-aligned instead of centered
 * 4) Wide side margins to reduce justify gaps
 * 5) As proposed

OK, that should do it. Just copy User:Rigel Kent/wikia.css into MediaWiki:Wikia.css, and User:Rigel Kent/monobook.css to MediaWiki:Monobook.css. The definition lists will be the same as my original set of screenshots. The un/ordered lists will be centered and non-justified, with bullets at the end of lines only, like the next-to-last option in my last set of screenshots. Rigel Kent (talk) 01:31, October 19, 2015 (UTC)

◄► Tephra ◄► 23:04, October 19, 2015 (UTC)
 * The Rune Words template has text going past the border on Monobook. I don't know if any others also have this problem.
 * Hmm, it's okay in my browser. What browser are you using, and can you get a screenshot? Rigel Kent (talk) 23:41, October 19, 2015 (UTC)

I tested it with three browsers. This only seems to happen in Internet Explorer (although Firefox was having issues too until I updated to the latest version). While testing various browsers, I noticed Wikia on IE is also acting up, although it is not cutting off text, it is wrapping it in the middle of words. Chrome renders the text slightly larger than IE and FF, though this doesn't seem to cause any problems other than wrapping the lines at different words. ◄► Tephra ◄► 01:45, October 20, 2015 (UTC)

◄► Tephra ◄► 01:57, October 20, 2015 (UTC)
 * I had a look through a few more templates using Monobook on IE, and it seems only the templates that are not centered are not wrapping properly, such as the aforementioned Rune Words and Template:D2 NPCs. The templates that are simple lists function correctly.
 * That's weird. Both types of list use a similar line break rule. I'll look into it and try to figure out what's confusing IE. Rigel Kent (talk) 04:38, October 20, 2015 (UTC)


 * Temporary patch for IE
 * User:Rigel Kent/wikia.css?oldid=140425 overwrite MediaWiki:Wikia.css (diff)
 * User:Rigel Kent/monobook.css?oldid=140426 overwrite MediaWiki:Monobook.css (diff)
 * This won't fully fix the wrap problem in IE (unless I've gotten lucky). It will make Monobook break in the middle of words, the same as Wikia, instead of refusing to break at all. I'll keep working on a proper wrap fix. Rigel Kent (talk) 10:06, October 20, 2015 (UTC)

Getting closer... Good news / bad news. Bad news is I only have IE 8. Good news is I've gotten IE 8 to look pretty good (edit:image replaced and unlinked), while keeping Chromium looking the same. Specifically, I got rid of the extra bullet after the last item on a centered list (this was an IE 8-only issue, IE 9+ never had the extra bullet). I also got IE 8 to wrap after bullets in the two-column style list. Finally, I got rid of the temporary Monobook fix from the last update, that was just a desperation hack. Hopefully, it'll also look good for you in IE 9+. I'll keep working on hiding the bullets in IE, as well as IE 9+ problems if any turn up. Rigel Kent (talk) 22:47, October 20, 2015 (UTC)
 * User:Rigel Kent/wikia.css?oldid=140474 overwrite MediaWiki:Wikia.css (diff)
 * User:Rigel Kent/monobook.css?oldid=140473 overwrite MediaWiki:Monobook.css (diff)

◄► Tephra ◄► 03:56, October 21, 2015 (UTC)
 * I've got some bad news / more bad news. The template is not fixed for IE (testing using IE11), it went back to looking like the image above. Additionally, I had a look at it with Android, both Wikia and Monobook have the bullets inside (overlapping) the text, and the template border also stretches off the edge of the screen with Wikia (although the text still wraps at the right spot).
 * Argh. The tiniest little cut and paste error screwed up IE11. Sorry. Here's the fix.


 * User:Rigel Kent/wikia.css?oldid=140488 overwrite MediaWiki:Wikia.css (diff of shame)
 * User:Rigel Kent/monobook.css?oldid=140487 overwrite MediaWiki:Monobook.css (diff of shame)
 * Weird you should mention Wikia skin fixed-width issues. I had a responsive layout for testing Wikia skin in a small window, and then scrapped it when I was done because I assumed people would never view Wikia skin on a mobile browser. Oops. I'll be more than happy to get the page history and reimplement that, though.
 * I still want to go back to IE to try bullet hiding again, but it sounds like I should look into the margin/padding issues in Android first. What device are you using? Rigel Kent (talk) 04:37, October 21, 2015 (UTC)

◄► Tephra ◄► 04:49, October 21, 2015 (UTC)
 * I used a Nook to view the site with Android. I don't typically use mobile devices, but it occurred to me to try it as well since Wikia has been encouraging wikis to become more mobile friendly.

Responsive lists I made some minor changes to help appearance in smaller screens. It switches from a two-column list to a "stacked" list, if the screen is under 640px wide. It also adjusts the width in Wikia skin if the screen is under 768px. And it slightly narrows the side padding for all browsers. I'm still working on the overlapping bullets bug, but I might have to borrow a friend's smartphone before I can make progress. Rigel Kent (talk) 00:24, October 23, 2015 (UTC)
 * User:Rigel Kent/wikia.css?oldid=140635 overwrite MediaWiki:Wikia.css (diff)
 * User:Rigel Kent/monobook.css?oldid=140637 overwrite MediaWiki:Monobook.css (diff)

◄► Tephra ◄► 03:31, October 23, 2015 (UTC)
 * The reduced side padding has made the columns in the template more noticeable in a lop-sided way; that is, the right side looks less padded than the right side. I wonder if the right side could be slightly more padded than the left side without causing additional issues? If not, that's fine.

New stuff Rigel Kent (talk) 04:17, October 27, 2015 (UTC)
 * User:Rigel Kent/wikia.css?oldid=140949 overwrite MediaWiki:Wikia.css (diff)
 * User:Rigel Kent/monobook.css?oldid=140950 overwrite MediaWiki:Monobook.css (diff)
 * I padded the right side of the definition list a bit to compensate for potential unused space on the left.
 * I found a new way of doing the unordered list that no longer needs any IE hacks or fallbacks. The definition list still needs the hack, though.
 * I couldn't replicate the overlapping bullets bug on my sister's iPhone running Safari for iOS 9. Which browser are you guys using? (See whatmyuseragent.com if you need help.)

◄► Tephra ◄► 15:50, October 27, 2015 (UTC)
 * I said I noticed it on Android.
 * I think I've replicated the bug in another old webkit browser: screenshot from Chrome 11. Does this match what you saw? I'll try to fix it for Chrome 11, and hopefully that'll fix it for Android's built-in browser too. Rigel Kent (talk) 20:48, October 27, 2015 (UTC)

◄► Tephra ◄► 00:48, October 28, 2015 (UTC)
 * Yes, that is what it looked like.

Yikes.... Three months without an update. Sorry.

Did some testing. Turns out even fairly recent browser versions had the display bug with definition lists. It wasn't fixed until Chrome 36 or 37 (2014). Are there any major tablets or other devices unable to update and stuck with old webkit?

Navboxes not containing definition lists look good, even on my IE8 machine, so I'll go ahead and keep updating those ones.

Also, Wikia hides navboxes in wikiamobile skin by default. I could circumvent that, but it'd be dodgy; we'd have to "lie" on their template type (mark them as something other than "navbox"), and they take extra work to look good since wikiamobile strips local and inline styles. Wikiamobile users can still navigate to related pages through category links. Is everyone okay with continuing to hide navboxes in wikiamobile? Rigel Kent (talk) 05:05, February 10, 2016 (UTC)

◄► Tephra ◄► 12:39, February 10, 2016 (UTC)
 * I don't really use mobile devices, so I've used up my ability to test them. As far as using "dodgy" code, that's really up to you. Whatever you think is the optimal combination of: easy to work with, least likely to break, and looks good.