User talk:Notjusttired/common.css

Installing common.css

Hi User:Notjusttired! I see that your common.css code has not yet been integrated into the MEpedia Common.css file. If you can identify which of your common.css code is absolutely safe to be integrated, I can see if it can be integrated. I know you said the collapsing list code was a bit funky, so we don't want to accidentally introduce anything that would be hard for an admin to troubleshoot. And obviously we would ignore that last bit you labeled for personal use. Cheers!
Pyrrhus (talk) 22:00, 13 April 2019 (EDT)

Great! Thanks for clarifying the code below. The fact that these are new classes and not changes to existing classes makes it much safer to implement. I’m going to try to put together a quick test page to test the code on all the currently installed skins. I may need your help on this...

Pyrrhus (talk) 11:38, 14 April 2019 (EDT)

---

Here's the CSS - all copied from elsewhere - it simply adds CSS classes and doesn't change any existing classes. You should be able to see it working on the existing collapsible list I linked to. It was the templates rather than the CSS that was problematic - mostly the toggle and the indentation.

/* 
  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;
}

This extra code would also be appreciated, it is used only in Template:Read_more and uses the same classes as advice

/*
Copied from Wikipedia shared.css for Read more template 
*/

/* hide initially collapsed collapsable tables */
table.collapsed tr.collapsable {
	display: none;
}

notjusttired (talk) 09:08, 14 April 2019 (EDT)

Stripey table code

If this CSS could be added it would be helpful - it greatly improves readability - it's copied from elsewhere (probably WikiMedia's Commons) and introduces new classes to give different alternate row colors on tables that have the extra class added. I've requested this previously.

/* 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 use here: Common_symptoms_in_ME/CFS - this might need extra adding when a dark skin is added (just to the dark skin). notjusttired (talk) 09:08, 14 April 2019 (EDT)