MediaWiki talk:Common.css

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history


Colored text for use on pages

Can this be added to the end of the existing code, it will allow several colors of text that will change to a lighter shade on this skin. User:Kmdenmark. See related changed at MediaWiki_talk:Common.css. This will be useful in some tables and for positive / negative symbols, possibly for viruses and bacteria. Thank you ~Njt (talk) 01:36, August 22, 2020 (UTC)

✓ Done Kmdenmark (talk) 13:24, August 24, 2020 (UTC)

/* text colors */
.green { color: #007000; }
.red { color: #FF2000;}
.blue { color: #00008b;}
.gray { color: #454545;}

/* off-white text shadow, for use on dark backgrounds */
.shadow { text-shadow: 2px 2px 4px #fff;}

Just a few lines to test it works:

Background color #f8f8f8.
This is green. This is red. This is blue. This is gray. This text should have a white shadow.

- ~Njt (talk) 01:36, August 22, 2020 (UTC)

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)

  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.

Comments welcome ~Njt (talk) 18:58, November 12, 2019 (EST)

Thank you for all the work you are doing to improve this site. I don't have the technical knowledge to response to any of the points outlined. I will graciously defer to other techies. Kmdenmark (talk) 10:14, November 14, 2019 (EST)
I have adapted the above checklist and included it in the interface explanation at the top of this page.
Pyrrhus (talk) 22:15, December 31, 2019 (EST)
Thanks User:Pyrrhus ~Njt (talk) 15:48, February 23, 2020 (EST)
completed code request - updated 8 Jun 2019

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 **/
#collapse-pre-one  .mw-collapsible-toggle .up,
#collapse-pre-one.mw-collapsed .mw-collapsible-toggle .down {
 display: none;
}
#collapse-pre-one .mw-collapsible-toggle .down,
#collapse-pre-one.mw-collapsed  .mw-collapsible-toggle .up {
 display: block;
}

/* 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.)
*/
#wpLicense {
 width: 100%;
 overflow: hidden;
}

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

/* 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
 */
#n-donate {
 text-align: center;
}

New font code request

(Completed Jun 2 2019)

User:Kmdenmark User:JaimeS Please add the following code to the start of MediaWiki:Common.css, without the <pre> tags. This will allow for a #MEpedia logo without it needing embedding in an image. It won't work unless on the first line. Thanks notjusttired (talk) 16:41, May 24, 2019 (EDT) - edited May 30th for permanent marker

@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
/* fonts must go on top line only */
/* #MEpedia logo fonts and classes */

.logo-me {
 font-family: Oswald, sans-serif;
  font-style: italic;
  font-variant: normal;
}
section#middle-nav .title a {
  font-family: Oswald, sans-serif;
  font-style: italic;
  font-variant: small-caps;
}
.logo-pedia {
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-variant: small-caps;
  padding-left: 0.15em;
}
(hide)
(read more)
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)

✓ Done
Pyrrhus (talk) 12:51, October 24, 2019 (EDT)
Thanks ~Njt (talk) 18:59, October 26, 2019 (EDT)
content hidden
/* 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.
*/

.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)

content hidden
class wikitable alternance Header text Header text
Example Example Example
Example Example Example
Example Example Example
Example Example Example
Example Example Example
Example Example Example
class alternance2 col2 col3
Example Example Example
Example Example Example
Example Example Example
Example Example Example
Example Example Example
Example Example Example
class wikitable alternance2 col2 col3
Example Example Example
Example Example Example
Example Example Example
Example Example Example
Example Example Example
Example Example Example

Temporary holiday notice problem (dark skin) -- ~Njt (talk) 18:22, December 22, 2019 (EST)

The code for the temporary notice sets the font color to black without setting the background color in mw-dismissable-notice. This means on the dark Timeless skin it's black text over very very dark grey background. I suggest taking out the font color line (which should allow it to be inherited, and default to nearly black except on Timeless which should default to off-white). I made suggestions earlier on this page of a ticklist that should help spit possible issues. Unfortunately I've now dismissed the notice so not sure how to test the changes. User:Pyrrhus

.mw-dismissable-notice { 
    color: #000; 
 ~Njt (talk) 18:22, December 22, 2019 (EST)

Re: Temporary holiday notice problem (dark skin) -- DariusC (talk) 12:07, December 23, 2019 (EST)

I've commented out the colour property of the temporary fundraising site notice. I've switched to "Timeless" to check and it looks good, very readable. It's light grey (#ccc) on dark grey (almost black #333). If you notice any other issue here, let me know.
Thank you Darius. ~Njt (talk) 16:14, December 28, 2019 (EST)

Category banner size (mobiles and tablets) -- ~Njt (talk) 14:48, February 23, 2020 (EST)

In addition to the minor changes I suggested in MediaWiki_talk:Common.js, can the following be added to the end of Common.css to shrink the banner for all mobiles and tablets. Currently this link this link to Responsinator shows different mobile layouts using the Potential comorbidities banner for testing (vector skin). This means that the banner used for Potential treatments / Potential comorbidities / Medical hypothesis will have smaller text and won't have a full black line above and below (on mobiles this doubles the height of the banner). See Slack for before / after screenshots. New code, please copy from source view:

/* Mobiles and tablets - smaller category banner */
@media (max-width: 768px) {

  h1 {
   font-size: 1.4rem;
   margin-top: 4px;
   margin-bottom: 4px;
  }

  h1 div, .firstHeading {
   font-size: 1.25rem;
   padding: 2px!important;
   margin-left:0;
   margin-right: 0;
   color: #333;
   text-shadow: none;
 }
}
 

User:Kmdenmark User:Pyrrhus user:Aletheia2020

~Njt (talk) 14:48, February 23, 2020 (EST)

Dismissable site notice on mobiles and tablets -- ~Njt (talk) 15:54, February 23, 2020 (EST)

Can the following code by made, assuming it looks ok. The idea is to use the gap on the left of the notice for text on snake screens (left to right languages only - the gap on the right is for the word "dismiss"). Small changes like less indentation for numbering too. User:Pyrrhus I hope this is ok since very foggy now. I don't know why but I can't seem to nest the ul and ol list code inside the top ltr- statement. Possibly causing issues with rtl languages. I am not sure how many will be using those though - possibly nobody right now? I am not sure if right to left is recognized for those without accounts. Hebrew is one language that could be tested. ~Njt (talk) 15:54, February 23, 2020 (EST)

/* Mobiles and tablets - dismissable site notice
- remove large gap on left to reduce the space it takes up plus shrink top and bottom margins 
and reduce left margin on numbered lists
*/
@media (max-width: 768px) {
   .sitedir-ltr .mw-dismissable-notice-body {
  margin: 2px 4.5em 2px 0.5em;
}
   .mw-dismissable-notice {
     font-size: 90%;
   }
   ul { 
     padding-left: 0.25em;
    }
   ol {
    margin-left: 2em;
   }
}