MediaWiki talk:Common.css

Discussion of changes: Ticklist?
Can we please have some standards agreed before more changes are made here? Changes here are critical and immediately affect everyone. I would like to agree some standards going forward to minimize future issues, perhaps add a ticklist before changes are made. I think this will help avoid errors and act as a prompt for us to consider different choices, and more opportunity to have different people feedback on suggested changes. I suggest these below. User:Pyrrhus User:Kmdenmark User:JaimeS User:JenB ~Njt (talk) 18:58, November 12, 2019 (EST)

Comments welcome ~Njt (talk) 18:58, November 12, 2019 (EST)
 * 1) Color changes: should only be made here in exceptional circumstances, and with dark skin alternatives added to MediaWiki:Timeless.css at the same time, otherwise they should go on the relevant skin's page only. Our dark Timeless is a higher contrast / low vision / accessible skin, using specific shades to avoid common color blindness issues, and AA contrast where possible (calculated contrast 4.5 or higher). See Wikipedia's Help:Colours and dark and light palettes for recommendations and colors to avoid.
 * 2) Images or icons: should not be added if possible, given that alternatives will be needed for dark skins like Timeless. It may be possible to use symbols from HTML instead, or we could look into font awesome icons (lazy load - at the end of the css - for less frequently used images). Images affect layout and color contrast. Grayscale / white / black are best.
 * 3) Some changes may be best suited only to desktop users, or only to certain skins. Media screen queries for screen size already exist to target tablets, or mobile devices. Mobile views may not need all features, less crowded improves readability.
 * 4) Images: must use external URLs, not use relative paths, except when we are waiting for those files to server's https://www.me-pedia.org/resources/assets - this should be marked as an outstanding issue on the talk page. This is because the relative paths can easily change in future or images may be accidentally changed or deleted by other editors.
 * 5) Icon images must have a fallback, typically icons should be svg with fallback to png format. Converters are available online.
 * 6) Design principles should be followed as per Wikipedia, with MEpedia red and blue shades for branding, some screens show the same color code very differently.
 * 7) Changes should be infrequent, and not be made here without being tested elsewhere first eg on a user's own common.css, to minimize needing to make corrections on the same day.
 * 8) Test on all skins: Changes must be tested on all skins first, eg using a "useskin" link or changing user preferences
 * 9) Different screen sizes: Changes must be tested on different device sizes, eg using a tool like http://www.infobyip.com/testwebsiteresolution.ph. This can be combined with the "useskin" option, eg [http://www.infobyip.com/testwebsiteresolution.php?url=https%3A%2F%2Fwww.me-pedia.org%2Findex.php%3Ftitle%3DBateman_Horne_Center%26useskin%3Dtimeless&width=320&height=480&in_browser=false Bateman Horne Center in Timeless skin on iPhone 4. This will help show when layout problems occur or font size changes are needed.
 * 10) Code should be validated first: eg on https://jigsaw.w3.org/css-validator/#validate_by_input, outstanding "red" errors will prevent that section running.
 * 11) New classes: Careful thought should go into introducing new class names. Existing MediaWiki class names and ids cover many templates eg infoboxes, features like wrap / nowrap and plainlinks. Standard ones include ns-, ca-, p- and others. Extras may appear in Vector but not in other skins.
 * 12) Less common CSS can cause issues browser compatibility issues, eg the :before pseudoclass is ignored on old Safari and IE browsers. Caniuse.com or css-tricks can check this. CSS3-only features should be avoided.
 * 13) Images included by MediaWiki can be found by searching Github
 * 14) Particular issues with colors exist when colored backgrounds are used in tables, eg Notable studies, and on Portal boxes.
 * 15) Different skins use different fonts, which can slightly alter layout or readability.
 * 16) System messages: should not refer to position of things on the screen or screen colors, as per MediaWiki standards. Avoid referring to "the red button", "the first option". These may be more longer or shorter when translated.
 * 17) Use detailed comments in the edit summary to describe all changes. This makes uncommon problems much easier to trace when the problem has not been noticed until several edits later.
 * 18) Code snippets from elsewhere should be referred to either in the code or on the talk page.

Please copy the code below to MediaWiki:Common.css (but without the "pre" tags). This makes collapsible lists work, improves file upload from mobiles by making things fit in the screen better, and means the "Read more" feature on this page should work now, and hide completed requests unless you click "read more". notjusttired (talk) 20:28, June 3, 2019 (EDT)
 * I’m going to add a small bit to this request, in order to center the donate button in the sidebar. I have tested this on all installed skins.  If you have a chance, User:Kmdenmark, please add the following code to the END of this page.  Please let us know if you have any questions.  Thanks!
 * Pyrrhus (talk) 14:14, June 8, 2019 (EDT)
 * Just a friendly ‘ping’, User:Kmdenmark! Cheers!
 * Pyrrhus (talk) 17:50, June 11, 2019 (EDT)

/*  Collapsible list or collapsible elements eg buttons  */

/* move list toggle to left for list */ .collapsed span.mw-collapsible-toggle, .collapse ul.mw-collapsible-toggle, .collapse div.mw-collapsible-toggle, .collapsed span.mw-collapsible-toggle expanded { float: left; }

/** Lifted from wikipedia - Sandbox/CollapsibleDemo.css Toggles between right arrow and up arrow images for collapsible elements - lists or bullets See Wikipedia Manual:Collapsible_elements/Demo/Advanced **/ display: none; } display: block; }
 * 1) collapse-pre-one .mw-collapsible-toggle .up,
 * 2) collapse-pre-one.mw-collapsed .mw-collapsible-toggle .down {
 * 1) collapse-pre-one .mw-collapsible-toggle .down,
 * 2) collapse-pre-one.mw-collapsed .mw-collapsible-toggle .up {

/* Lifted from WikiMedia Make sure the license dropdown of the upload form doesn't extend beyond the browser's window, even if there are some long license descriptions. (If that happens, the description box *also* goes beyond the right edge of the window.) width: 100%; overflow: hidden; }
 * 1) wpLicense {
 * 1) wpLicense {

/* Give the upload form a little breathing space. */ padding-bottom: 8px; } padding-bottom: 8px; } /* end of WikiMedia code */
 * 1) upload * td {
 * 1) mw-upload-table * td {

/* Copied from Wikipedia shared.css for Read more template */ /* hide initially collapsed collapsable tables */ table.collapsed tr.collapsable { display: none; } /* end of Wikipedia code

/* * What: Center donate button in sidebar * Who: Pyrrhus * When: 8 june 2019 */ text-align: center; }
 * 1) n-donate {

New font code request
(Completed Jun 2 2019)


 * User:Notjusttired Done! Kmdenmark (talk) 17:02, June 3, 2019 (EDT)
 * Thank you! notjusttired (talk) 17:29, June 3, 2019 (EDT)

Please add tweet icon -- notjusttired (talk) 17:03, July 7, 2019 (EDT)
User:Kmdenmark Please add the code below (except for the "pre) bits. This should create a twitter type icon, so we can have a Cite tweet if we want at some point. notjusttired (talk) 17:03, July 7, 2019 (EDT)

.ref-cite-tweet { background-image:url("https://www.me-pedia.org/images/1/16/Ref-cite-tweet.svg") }

Minor change for ref-cite-tweet icon
User:Kmdenmark Can you please change the end section from:

.ref-cite-tweet { background-image:url("https://www.me-pedia.org/images/1/16/Ref-cite-tweet.svg") }

to:

.oo-ui-icon-ref-cite-tweet, .ref-cite-tweet { background-image:url("https://www.me-pedia.org/images/1/16/Ref-cite-tweet.svg") }

This should (hopefully) display the tweet icon in the Cite, Tweet option from visual editor. Thanks notjusttired (talk) 05:32, August 3, 2019 (EDT)


 * Done! Kmdenmark (talk) 11:12, August 3, 2019 (EDT)
 * Thanks, it's working! notjusttired (talk) 14:38, August 4, 2019 (EDT)

Ambox code
/* Not sure what these settings are for */ table.ambox{... This is styling for all article message boxes, eg Cleanup templates, and is used by Template:Ambox, anything calling (invoking) Module:Ambox, and anything calling Module:Mbox on articles. Hope this helps. ~Njt (talk) 18:59, October 26, 2019 (EDT)
 * Thanks! that's very helpful! now updated.
 * Pyrrhus (talk) 19:31, October 26, 2019 (EDT)
 * Thanks User:Pyrrhus ~Njt (talk) 13:20, October 27, 2019 (EDT)

Alternance table striping
Please add the following to the end of the existing code. This allows for tables to have different colors when the new classes "alternance" are used in a table. ~Njt (talk) 08:42, October 24, 2019 (EDT)
 * Pyrrhus (talk) 12:51, October 24, 2019 (EDT)
 * Thanks ~Njt (talk) 18:59, October 26, 2019 (EDT)
 * Thanks ~Njt (talk) 18:59, October 26, 2019 (EDT)

/* ALTERNANCE */ /** Classes allowing alternating line colors
 * in tables according to the number of header lines:
 * .alternance if odd number
 * .alternance2 if even number.
 * .odd is to be kind to IE<9 which does not implement
 * the selector :nth-child, applied via Common.js (?)
 * .sortable: sortable tables require reversing
 * the alternance.
 * .sortable: sortable tables require reversing
 * the alternance.

.alternance, .alternance2 { border-collapse: collapse; } table.alternance > * > tr > th, table.alternance2 > * > tr > th { background: #e6e6e6; } .alternance tr, .alternance th[scope="row"] { background: #fcfcfc; } .alternance:not(.sortable) tr:nth-child(odd), .alternance.sortable      tr:nth-child(even), .alternance:not(.sortable) tr:nth-child(odd) th[scope="row"], .alternance.sortable      tr:nth-child(even) th[scope="row"] { background: #eeeeee; } .alternance .odd, .alternance .odd th[scope="row"] { /* be kind to IE<9 */ background: #eeeeee; } .alternance2 tr, .alternance2 th[scope="row"] { background: #eeeeee; } .alternance2 tr:nth-child(odd), .alternance2 tr:nth-child(odd) th[scope="row"] { background: #fcfcfc; } .alternance2 .odd, .alternance2 .odd th[scope="row"] { /* be kind to IE<9 */ background: #fcfcfc; }

Example in use
(please leave in place for testing on different skins)