MediaWiki talk:Common.css

From Dungeons and Dragons Wiki
Jump to: navigation, search

Striped Lists[edit]

I would like the ability to do a striped list. Please add the following to the Common.css:

/* =======Striped list====== */
.zebra {
list-style: none;
padding: 0;
margin: 0;
color: #000;
}
.zebra li:nth-child(3n+1) {
  text-align: left; background:#ffffff; !important;
}
.zebra li:nth-child(3n+2) {
  text-align: left; background:#ffffff; !important;
}
.zebra li:nth-child(3n+3) {
  text-align: left; background:#ddddee; !important;
}

You would need to change the values of #ffffff to match the pink background of the wiki and and #ddddee; to match a light shading in the wiki style. To access it, you would enter the following before the first line item ... <ul class="zebra"> --Rlyehable (talk) 07:17, 8 February 2017 (MST)


  • Thing one
  • Thing two
  • Thing three
  • How many things?
  • so many!


So every third line is highlighted? --Realgenius (talk) 05:55, 13 February 2017 (CST)

Yes the zebra class should only be used for long lists. Every other line was too much IMHO. If you think that every other line would be better, you could replace the ".zebra li:nth-child(3n+1)" to ".zebra li:nth-child (odd)" and remove the 3n+2 and 3n+3 sections.

Perhaps the color of both background color and shading should be closer to #FFCC99 to beter match the color scheme of the wiki. I don't know the actual color code for the background or the shade color used in the zebra class table.--Rlyehable (talk) 11:21, 13 February 2017 (MST)

How about that? Background is 5% darker than the page, to help identify the list and the highlight row is 25% darker. Or did you want the list background to also be the standard page background color? Realgenius (talk) 16:54, 13 February 2017 (MST)

Or maybe match this zebra table for consistency? Realgenius (talk) 17:01, 13 February 2017 (MST)

Stuffs!
Column 1 Column 2 Column 3 Column 4 Column 5
Row 1 Stuff More Stuff Still More Stuff ...
Row 2 Stuff More Stuff Still More Stuff ...
Yeah, that color is kinda gross. Also, it's causing color to be where there's not supposed to be color, such as in the footer for things like classes. It looks real dumb. That needs a fixin'. --Ganteka Future (talk) 23:42, 13 February 2017 (MST)
Ok, take 4. Same columns as the zebra table, and a new name "zebra-list" to prevent unintended styling with existing zebra styles. Better? Realgenius (talk) 04:44, 14 February 2017 (MST)
Looks good. Thanks! --Rlyehable (talk) 12:00, 15 February 2017 (MST)