MediaWiki talk:Common.css

mcwiki-header in mcforum style?
Why not update it to be in style of "article header" at minecraft forums? background: url(http://static.minecraftforum.net//public/style_images/mcf/skin/bg-article-header.png) repeat; border: 2px solid #C2D2DF; padding: .7em 10px; color: white;

– xPaw at 11:24, 29 April 2012 (UTC)


 * Because it looks really bad, and also the header style ties in with the logo. – ultradude25 ( T &#124; C ) at 13:13, 29 April 2012 (UTC)

Adverts forcing horizontal scrollbar on smaller screen resolutions
Can the following code: div.atflb { width: auto !important } be changed to include the bottom advert as well: div.atflb, div.btflb { width: auto !important } Thanks BryghtShadow 15:34, 9 May 2012 (UTC)

Infobox common
Infobox common is far too wide, it looks frankly rediculous on every page I've seen. I'm not sure if it's because members aren't on the same width or if it's just all-round poor judgement but I would suggest changing it. --86.16.72.219 20:10, 23 November 2012 (UTC)


 * I've adjusted the width back to its original 300px. I also removed a little bit of space between the right margin and the content. -- Hower64 07:58, 4 December 2012 (UTC)

Liberation Sans
Please remove Liberation Sans font. It looks terrible. IllidanS4 (talk • contribs • [ logs]) 11:20, 7 December 2013 (UTC)


 * Not going to happen. It's there because it has the same metrics as Arial and is likely to be found on computers that don't have Arial or Helvetica. Even if technical requirements weren't an issue, "looks terrible" is a very weak and subjective argument. -- Orthotopetalk 11:57, 7 December 2013 (UTC)


 * Even if we were to remove it (which would go back to having inconsistent font width on Linux and probably Mac), it would just come back as a default part of mediawiki as they have recently been working on a Typography Update (which I assume will be released in 1.23 or 1.24) that has Liberation Sans as part of its stack. We could maybe change the order to make Arial come before Liberation Sans, however I didn't do that as Arial didn't seem to render as well as Liberation Sans on Linux systems that have it installed, but looks just about as good as Arial on Windows. You can always change your own CSS or your browser settings if a slightly different looking font is really that terrible.
 * Also you signature is a bit excessive, and contains wikicode which should be substed (mainly that if statement and the pointless urlencodes). –Matt ᐸ Talk Contribs ⎜ 13:05, 7 December 2013 (UTC)


 * This looks more like a significant than slight difference to me. Liberation is far worse readable than Arial and the letters look quite distorted. You may at least change the order (as said - fallback when Arial is not found), as it is in the Typography Update (considering Arial 'better' than Liberation). IllidanS4 (talk • contribs • [ logs]) 23:24, 8 December 2013 (UTC)


 * That's not an issue with the font, your browser is rendering it incorrectly. Check your clearfont or truetype settings. This is what it's supposed to look like (Arial on top, Liberation Sans on bottom). ]]    23:51, 8 December 2013 (UTC)

Specific column alignments
Is there a way to set table cell alignment per-column, apart from setting it cell-by-cell in a cumbersome way?

If not, could we do a solution like the following: (found at http://stackoverflow.com/questions/24494604/mediawiki-table-efficiently-applying-different-alignment-for-different-column):

Add these rules:

table.col-1-center td:nth-child(1) { text-align: center; } table.col-2-center td:nth-child(2) { text-align: center; } table.col-3-center td:nth-child(3) { text-align: center; } ... table.col-3-center td:nth-child(n) { text-align: center; }

table.col-1-right td:nth-child(1) { text-align: right; } table.col-2-right td:nth-child(2) { text-align: right; } table.col-3-right td:nth-child(3) { text-align: right; } ... table.col-9-right td:nth-child(n) { text-align: right; }

Use it like so: – Sealbudsman talk/contr 21:45, 13 January 2017 (UTC)
 * I could see this being used in :Renewable resource/table. It would probably be good for other tables as well., can you both participate in this discussion? The BlobsPaper.png 14:50, 14 January 2017 (UTC)
 * A better way of implementing this might be to use a  custom attribute in the topmost cell of a column, and have some JS search for such attributes and apply the styles in them to the whole column. This would allow any CSS to be applied to table columns, not just whatever CSS was decided should have its own class, and would thus prevent a potential proliferation of such classes. 「 ディノ 奴  千？！ 」? · ☎ Dinoguy1000 16:49, 14 January 2017 (UTC)
 * The BlobsPaper.png 17:03, 14 January 2017 (UTC)


 * , can you give a code example of a table using that custom attribute? – Sealbudsman talk/contr 20:05, 14 January 2017 (UTC)


 * To use your first example:


 * Obviously, the name  could be changed for a different one if desired. In addition, having a class on tables using this feature might make the JS more efficient, by allowing it to search only for that class instead of having to check all tables for any data attributes. 「 ディノ 奴  千？！ 」? · ☎ Dinoguy1000 21:17, 14 January 2017 (UTC)


 * While the versatility of that is nice, setting styles with JS is very much undesirable. So I'll just add the alignment styles, since that's all we'd probably ever use anyway. –Majr ᐸ Talk Contribs 11:43, 16 January 2017 (UTC)

Flair
I notice the where we've put  it uses an underscore, and the flair doesn't seem to be working, whereas other names that use spaces like "Jeb mojang" do have the flair. I bet it needs a plain space.

Also, flair is given to  where ^= is a selector for "starts with". Probably should be the equals sign, right? – Sealbudsman talk/contr 03:34, 20 April 2017 (UTC)

Fix spacing of horizontal lists with sublists
, a weird formatting issue with the navboxes was mentioned on the community portal some time ago: Weird list formatting in Navboxes, and I've figured out the cause of this. Could you maybe replace the statement  with the statement   at the selector  ? That should do it nicely, thanks – [ Jack McKalling ] 00:06, 7 December 2017 (UTC)


 * , let me know if something breaks or it's not fixed or whatever. 「 ディノ 奴 千？！ 」? · ☎ Dinoguy1000 02:46, 7 December 2017 (UTC)

Error in TOC level hiding
The CSS selector that hides levels of the TOC when using TOC or TOC limit, prevents you from hiding down from just level 3, as it would also hide level 2: I suggest to fix this by changing the second mention of  to. I wonder if there was any specific reason for this, or if it's just an overlook. Thanks in advance. – Jack McKalling 09:46, 27 September 2018 (UTC)


 * Fixed by Majr. – Jack McKalling [ Book and Quill.png Diamond Pickaxe.png ] 11:13, 27 September 2018 (UTC)


 * Also checked all whatlinksheres of both templates, and no page uses, so all is done. – Jack McKalling [ Book and Quill.png Diamond Pickaxe.png ] 11:37, 27 September 2018 (UTC)

Change formatting for hatnotes
Add this:

Fadyblok240 (talk) 12:29, 14 September 2020 (UTC)


 * Why? What does this CSS change, and why is it better than what we have right now? We are not in the habbit of random CSS changes for no reason. – KnightMiner  t/c 15:24, 15 September 2020 (UTC)
 * It reduces line spacing between hatnotes and enables cancellation of italics within hatnotes. Also you should remove the styling for dablink and copy the contents of hatnote/sandbox to replace the contents of hatnote.Fadyblok240 (talk) 00:07, 16 September 2020 (UTC)

Dark icons
The sound icons are black by default (example: Wood§Sounds), which makes it easy to see on light theme, but that is not the case on dark theme.

We can easily make it white by using the CSS  filter for the dark theme, like so:

This can also be used for other icons which you may want to be white on dark theme (or vice versa with the light theme). You can make an utility class, and then add it to the image like this. That way, for example, if you want a black icon such as SlotSprites to be white, you make a utility class (or use the ones already in use for that particular case, such as :

And then add it into the image:

That way these icons will be way easier to see on dark theme, specially for partially blind people. Alternatively, if you want to use any other color than white/shades of gray, there is a tool for that.

Greetings.

Polymeric 20:43, 26 November 2021 (UTC)

Highlighted ref is not readable in dark mode

 * This discussion has been moved from MediaWiki talk:Fandomdesktop.css. —⁠andrybak (talk) 00:15, 24 December 2021 (UTC)

Screenshot to demonstrate the issue:. For the highlighted ref, the text color is defined via theme variable: ... which is good. The background color is hard coded: ... which is not so good. Disabling  makes background color fallback to the default CSS: ... which gives good contrast:. I think it might be better to remove the custom rule for  or replace it with a different highlight, e.g. a border or underline. —⁠andrybak (talk) 23:45, 23 December 2021 (UTC)
 * Hmm, I double checked and I can't actually find out where  is coming from. I just assumed that it was MediaWiki:Fandomdesktop.css or another CSS page in the MediaWiki namespace, because I was crossreferencing this behavior with two other wikis, which just have the rule with  . —⁠andrybak (talk) 00:10, 24 December 2021 (UTC)
 * Ah, found it! It is actually in MediaWiki:Common.css. I'm not sure why the search for C1DAF2 didn't give the correct page. —⁠andrybak (talk) 00:15, 24 December 2021 (UTC)
 * I just realized that in light mode,  and   produce the same color. This raises the question: why is the hardcoded color needed in the first place? —⁠andrybak (talk) 00:22, 24 December 2021 (UTC)
 * The rule was added long before we had a dark mode. I changed the background color to use the variable. MarkusRost (talk) 09:49, 24 December 2021 (UTC)