MediaWiki talk:Standard.css

From Wikipedia, the free encyclopedia

Contents 1 Crissov's proposals 1.1 Table-like definition lists 1.2 Nicer tables 1.3 Enhanced readability etc. 1.4 Enhanced printing 1.5 No Quickbar while editing 2 Fixing image layout incompatibilities 3 Coordinates in article heading 4 div.topicon 5 Change to div.tleft

[edit] Crissov's proposals

user:Crissov proposes the following additions.

[edit] Table-like definition lists

Has problems in IE.

dl {line-height: 1.2;}
dt, dd {border-top: 0.1em solid gray; margin: 0.2em 0; padding: 0.2em 2.25%;}
dt {width: 20%; font-weight: bolder}
dd {width: 70% /*<= 100-25-2·2.25*/; margin-left: 25% /*>= 20+2·2.25*/;
       margin-top: -2.0em;}
dt+dd {margin-top: -1.9em} /* That is the negative value of
    line-height(dd) + padding-top(dd) + border-top-width(dd) +
  + margin-bottom(dt) + border-bottom-width(dt) + padding-bottom(dt)
  = 1.2em + 0.2em + 0.1em + 0.2em + 0.0em + 0.2em = 1.9em */
dd:first-child,
dd+dd {margin-top: 0}

/* Make Talk pages with long, nested discussion better readable: */
dl dl dt {width: 5%; padding: 0.2em 1%}
dl dl dd {width: 87.5% /*<= 100-7.5-2·2.25*/; margin-left: 7.5% /*>= 5+2·1*/;}

[edit] Nicer tables

table {
  border-collapse: collapse; /* incl. border-spacing: 0;*/ border-style: solid;
  margin: 1em; padding: 0.25ex; font-size: 100%;
}
table[align="right"], table.right  {margin-right: 0}
table[align="left"],  table.left   {margin-left:  0}
table[align="center"], table.center{margin-right: auto; margin-left: auto;}

/* caption */
caption {font-weight: bold; font-size: large; background: #DDD; color: #000}

/* borders */
tr {border-top: thin solid;}
th {border:     thin solid;}
/* no vertical borders between data cells */

/* cells */
th, td {
  vertical-align: top; text-align: left; text-align: ",";
  min-height: 1em; padding: 0.25em;
  font-size: 100%;
}

/* row and column headers, works well for most tables */
@media screen, projection {
 tr:first-child>th,
 tr>th:first-child {background-color: silver; color: black;}
}
tr:first-child>th {text-align: center;} /* column headers */
tr>th:first-child {text-align: left;}   /* row headers */

/* highlight row on mouse-over */
#article tbody>tr:hover,
#article tbody>tr:hover>* {
  background-color: silver; color: black;
} /* diff tables should be excluded */

[edit] Enhanced readability etc.

p, dt, dd, li, td, th, address, blockquote {
  min-width: 6ex; max-width: 80ex;
}
sup, sub {line-height: 0.1em; font-size: 1ex;}

[align]+* {clear: both}

pre {
  white-space: pre-wrap /* CSS 2.1 */;
  font: 95%/1.15 monospace;
  background: #CDE; color: #000;
}

code {color: navy}
var  {color: green}

:link:hover, :visited:hover {color: blue; text-decoration: underline}

textarea,       input[text]       {background-color: #EEE}
textarea:focus, input[text]:focus {background-color: #FFF}

#topbar, #footer, #quickbar {font-size: smaller}
#article                    {font-size: medium}

[edit] Enhanced printing

@media projection, print {
 h1, h2, h3, h4, h5, h6, table {
   page-break-before: always;
   page-break-after:  avoid;
 }
 h1+h2, h2+h3, h3+h4, h4+h5, h5+h6,
 h1+table, h2+table, h3+table, h4+table, h5+table, h6+table {
   page-break-before: avoid;
 }
 ul, ol, dl {
   page-break-inside: avoid;
 }
 p, li, blockquote {
   page-break-inside: avoid;
 }

 .subtitle {display: none}
}

[edit] No Quickbar while editing

     body[onload]    #quickbar {display: none !important}
html body[onload=""] #quickbar {display: block !important}

I don't think we should put this in the standard stylesheet. I often use the quickbar while editing (for example, it'll use the history or view article/view project page link and open it in another tab. -- Finlay McWalter | Talk 15:23, August 5, 2005 (UTC)

[edit] Fixing image layout incompatibilities

Monobook (which, let's face it, almost everyone seems to use, and which 99% of visitors inevitably use) handles the following (very common) markup differently from classic:

  
 [[image:foo]]
 [[image:bar]]
 

Monobook lays out the two images with one above the other. Classic lays them out differently, with the two beside (horizontally) one another (or sometimes does fairly horrible things, on a congested page). While we could argue which is correct, I suggest we fix standard.css (which drives classic's look and feel) to behave like Monobook. To do so, we need only add the following to the stylesheet:

 div.tright {
   clear: right;
 }

This makes images stack vertically, the way they do in Monobook. I know of no problems with this. Does anyone object to my making this change? -- Finlay McWalter | Talk 22:21, July 28, 2005 (UTC)

Gosh - if it is as easy as that, and there are no side-effects, please do it straight away! This is a fix that I have been waiting for for years (well, dog-years). -- ALoan (Talk) 11:05, 31 July 2005 (UTC)

I've tried it in my standard.css and it seems to work: if anyone else wants to try it, see Finlay McWalter's instruction in my talk page archive. -- ALoan (Talk) 10:09, 5 August 2005 (UTC)

Please, please, please make this change! I raised the issue a while ago [1] and I'd really like to see it fixed! I'm hesitant to fix it myself because I don't understand the Wikipedia style sheets very well and I don't want to break anything for other users. Note that someone has pointed out the same problem with the Cologne Blue skin, too; I don't know where that style sheet is, but if someone could fix it there as well that would be great! - Brian Kendig 15:48, 8 August 2005 (UTC)

It's done. If no-one has a problem over the next couple of days, I'll look into making the same change for Cologne Blue. -- Finlay McWalter | Talk 17:33, August 8, 2005 (UTC)

[edit] Coordinates in article heading

#coordinates {  
 position:absolute;
 z-index:1;
 border:none;
 background:none;
 right:24px;
 top:4.5em;
 float:right;
 margin:0.0em;
 padding:0.0em;
 line-height:1.5em;
 text-align:right;
 text-indent:0;
 font-size:85%;
 text-transform:none;
 white-space:nowrap;
}

Image:Chicago with Standard top 4.5em coordinates.pdf

--William Allen Simpson 09:14, 27 April 2006 (UTC)

[edit] div.topicon

At least in IE, the Featured Article star (which is affected by this) displays in the wrong place on the screen in this skin, and so is broken (the absolute placing on the star is affected by things like the other-languages list). Could an admin please comment this section of code out (the entire div.topicon definition)? --ais523 11:31, 7 July 2006 (UTC)

Done. howcheng {chat} 17:39, 7 July 2006 (UTC)

[edit] Change to div.tleft

Per Wikipedia:Village pump (technical)#Left thumbnail image and bullet list overlap issue, I suggest adding the following definition of div.tleft (which will override the one in common/common.css - the difference is the addition of the border-width line). If anyone objects, please speak up. -- Rick Block (talk) 21:16, 29 July 2006 (UTC)

div.tleft {
        float: left;
        margin-right: .5em;
        border-width: .5em 1.4em .8em 0;
}

Well, I have no objections over this. --Siva1979^{Talk to me} 16:19, 30 July 2006 (UTC)

I've made this change, but it doesn't seem to work (after a forced reload, and all that). Anyone have any ideas why not? If I look at the HTML for an article, the css import list looks like this:

@import "/skins-1.5/common/wikistandard.css?1";
@import "/w/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css&smaxage=2678400";
@import "/w/index.php?title=MediaWiki:Standard.css&action=raw&ctype=text/css&smaxage=2678400";
@import "/w/index.php?title=User:Rick_Block/standard.css&action=raw&ctype=text/css";

div.tleft is specified in both MediaWiki:Standard.css and common/common.css (which is imported by common/wikistandard.css). Does the first CSS definition win or something? -- Rick Block (talk) 18:50, 4 August 2006 (UTC)