MediaWiki talk:Common.css

Wikitable classes

Could someone add the following CSS? It'll allow the use of the .wikitable (and .prettytable) class:

table.wikitable,
table.prettytable {
  margin: 1em 1em 1em 0;
  background: #f9f9f9;
  border: 1px #aaa solid;
  border-collapse: collapse;
}

table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td {
  border: 1px #aaa solid;
  padding: 0.2em;
}

table.wikitable th,
table.prettytable th {
  background: #f2f2f2;
  text-align: center;
}

table.wikitable caption,
table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;
}

table.prettytable code,
table.wikitable code {
  background-color: transparent;
}

— This unsigned comment was made by Dinoguy1000 (talk • contribs) 00:05, 25 September 2007 (UTC)

There is actually an alternative method. Wikia ACG has a Box CSS Class system which is a technique created in css which is meant to allow for styling of tables, messages, and many other types of elements. The key thing about it over use of wikitable being it's ability to be used in many different situations, and easily altered to do something different.

This is the class set which is commonly used which basically duplicates the styling of wikitable.

class="box table colored bordered innerbordered type-basic"

The box in there starts the use of the box class, the table defines the various margins, positioning, and other spacing for the element, the colored signals that the table should be colored, the bordered signals that an external border should be placed around the table, the innerbordered signals that the interior td's should have a border, and the type-basic give it the standard greyscale wikitable type coloring.

It can even be expanded to do more. If you want it to fill the width of the page you can add fill-horiz to it. And if you want to have a master td, with lighter td's then you can give the master td a code="mainheader". For something else pretty useful, if you want to have a table in wikitable style with left oriented headers at the left, then you can add cell-align-left or th-align-left and add class="mainheader" to the th headers up top which in turn will have a darker background than the left oriented th's along the left, and also be center aligned like they normally are.

There are a few dozen other uses for the Box class, including easily switching styles to different color schemes, and various other types of element styling. ~NOTASTAFF Daniel Friesen-local (DanTMan, Nadir Seen Fire) ^(talk) Sep 25, 2007 _@ 00:45 ^(UTC)

Awesome, I didn't know that previously. I'll have to test it out (in case you're curious, I was wanting this added originally so I could remove most of the hardcoded CSS from the templates I was developing for user card lists (see my userpage for what I'm talking about)). --Dinoguy1000 ^What?_{I did it!} 01:05, 25 September 2007 (UTC)

Hmm... Now that I try it out, it doesn't seem to be working for me. Looking through the CSS, most of the classes don't actually seem to be present, either. Am I still missing something? Is there a page I can go to that has detailed usage instructions for the Box CSS Class system? --Dinoguy1000 ^What?_{I did it!} 01:12, 25 September 2007 (UTC)

It's a Wikia ACG thing as I said. All the wiki that are part of the Wikia ACG project reference the global code which include the box class. I haven't created documentation on the box class itself yet, but at Anime:Project:Visual Classes I do have information on the other classes such as the fill-horiz. Unless someone posts some objection to Yu-Gi-Oh!:Community Portal#Wikia ACG then the Yu-Gi-Oh! Wiki may join the project as soon as tomorrow, at which point the css here would have the code added to reference the global CSS/JS and the Global templates will be synced here. ^_^ At that point all this stuff will begin to work. ~NOTASTAFF Daniel Friesen-local (DanTMan, Nadir Seen Fire) ^(talk) Sep 25, 2007 _@ 02:18 ^(UTC)

Aah, sorry, my bad... At any rate, I really hope this happens, so I can eliminate a whole lot of CSS (and get to play around with several other interesting classes I noticed on the doc page ;) ). This stuff actually sounds like it would be very useful if implemented across the whole of Wikia, instead of just on this one group of wikis. It would certainly make it easier on those who are just starting up a wiki, in any case... --Dinoguy1000 ^What?_{I did it!} 16:34, 28 September 2007 (UTC)

Add some styles from wikipedia:MediaWiki:Common.css

If no one objects, I'd like some styles added here from wikipedia:MediaWiki:Common.css:

/* wikitable/prettytable class for skinning normal tables */
table.wikitable,
table.prettytable {
    margin: 1em 1em 1em 0;
    background: #f9f9f9;
    border: 1px #aaa solid;
    border-collapse: collapse;
}
.wikitable th, .wikitable td,
.prettytable th, .prettytable td {
    border: 1px #aaa solid;
    padding: 0.2em;
}
.wikitable th,
.prettytable th {
    background: #f2f2f2;
    text-align: center;
}
.wikitable caption,
.prettytable caption {
    font-weight: bold;
}

/* Default skin for navigation boxes */
table.navbox {            /* Navbox container style */
  border: 1px solid #aaa;
  width: 100%; 
  margin: auto;
  clear: both;
  font-size: 88%;
  text-align: center;
  padding: 1px;
}
table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
  margin-top: -1px;            /* (doesn't work for IE6, but that's okay)       */
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
  text-align: center;      /* Title and above/below styles */
  padding-left: 1em;
  padding-right: 1em;
}
.navbox-group {            /* Group style */
  white-space: nowrap;
  text-align: right;
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
}
.navbox, .navbox-subgroup {
  background: #fdfdfd;     /* Background color */
}
.navbox-list {
  border-color: #fdfdfd;   /* Must match background color */
}
.navbox-title,
table.navbox th {
  background: #ccccff;     /* Level 1 color */
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
  background: #ddddff;     /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
  background: #e6e6ff;     /* Level 3 color */
}
.navbox-even {
  background: #f7f7f7;     /* Even row striping */
}
.navbox-odd {
  background: transparent; /* Odd row striping */
}
 
.collapseButton {          /* 'show'/'hide' buttons created dynamically */
    float: right;          /* by the CollapsibleTables javascript in    */
    font-weight: normal;   /* [[MediaWiki:Common.js]]are styled here    */
    text-align: right;     /* so they can be customised.                */
    width: auto;
}
.navbox .collapseButton {  /* In navboxes, the show/hide button balances */
    width: 6em;            /* the vde links from [[Template:Tnavbar]],   */
}

/* Prevent line breaks in silly places: 
   1) links when we don't want them to
   2) HTML formulae
   3) Ref tags with group names <ref group="Note"> --> "[Note 1]"
*/
.nowraplinks a,
span.texhtml,
sup.reference a { white-space: nowrap; }
 
/* For template documentation */
.template-documentation {
    clear: both;
    margin: 1em 0 0 0;
    border: 1px solid #aaa; 
    background-color: #ecfcf4; 
    padding: 5px;
}
 
.thumbinner {
    min-width: 100px;
}

The very first style set is the above-requested wikitable/prettytable class, which I understand is redundant to some of the Wikia ACG classes (is it still? I haven't actually looked in forever); however, I feel it should be added anyways because so many things we might want to import from Wikipedia and company already use the class, and it would be tedious (and in some cases difficult) to go through every page on every import and replace class="wikitable" with class="holy crap so many class names zomg". The navbox class is primarily useful for {{Navbox}}, but it can probably also be applied to most other navbox templates around here to clean up and standardise their formatting some. The template-documentation class is for {{Documentation}}, and .thumbinner is in there because I'm not 100% sure that it's unrelated to documentation. I also would have included the *mbox classes, except it seems there's already a set of them from a Wikia ACG template.

One last note, I'm perfectly open to discussion prior to these classes being added (if they are), and would greatly appreciate having potential conflicts with existing styles pointed out to me. 「ダイノガイ千？！」^{? · Talk⇒Dinoguy1000} 04:58, October 22, 2009 (UTC)

Toolbar jumping fix

Please add this code to MediaWiki:Common.css, taken from wikipedia:MediaWiki:Common.css: /* Edit window toolbar */

1. toolbar {

   height: 22px;
   margin-bottom: 6px;

}

This prevents the loading of the toolbar from causing the edit window to jump down, and has no effect on users who have disabled the toolbar in their preferences. 「ダイノガイ千？！」^{? · Talk⇒Dinoguy1000} 23:16, April 16, 2010 (UTC)