User:Davidgothberg/Navibox demo

To see the examples on this page you need to copy the CSS code to your personal monobook.css. See explanation below.

David's navigation box demo

This page is part of David's demonstration of code for the generic navigation box. It uses some meta templates which in turn use some CSS classes for pretty much all their looks. (Note, most of these features were suggested by others. I just coded it together.)

The navibox template

The demo navibox templates themselves are at User:Davidgothberg/Navibox and User:Davidgothberg/Navibox subgroup.

CSS code

Note! To correctly see the navigation boxes below you need to add this CSS code to your personal monobook.css since these classes do not yet exist in MediaWiki:Common.css.

Don't forget to remove this code from your monobook.css once we deploy this since if we use the same naming of the classes then you will only see the version you have in your monobook.css instead of the version in MediaWiki:Common.css that everyone else sees.

/* David's navibox template style, v0.4 */
div.navibox {                  /* Outer border */
  clear: both; 
  margin: 0em;
  width: 100%; 
  border: 1px solid #aaa; 
  background: #fcfcfc;         /* Navbox background */
}
div.navibox-padding {
  padding: 4px;                /* Padding inside the outer border */
}
table.navibox th,
table.navibox td { 
  border: 2px solid #fcfcfc;   /* Cell margins / Navbox background */
}

/* Begin non-skinnable, do not edit */
table.navibox {  
  border-collapse: collapse; 
  width: 100%; 
  background: transparent; 
}
.navibox-border-none {
border: none !important; 
}
.navibox-border-left {
border-top: none !important;
border-right: none !important; 
border-bottom: none !important; 
}
.navibox-border-top {
border-right: none !important;
border-bottom: none !important; 
border-left: none !important; 
}
.navibox-border-right {
border-top: none !important;
border-bottom: none !important; 
border-left: none !important; 
}
.navibox-border-top-right {
border-bottom: none !important;
border-left: none !important; 
}
/* End non-skinnable */

th.navibox-title {             /* Title cell */  
  background: #ccf;
  text-align: center;
}
td.navibox-abovebelow {        /* Above and below cell */
  background: #ddf; 
  text-align: center;
  padding: 2px 1em;
}
td.navibox-image {             /* Imageleft and image cells */
  background: transparent;
  text-align: center;
  padding: 0px; 
}
th.navibox-group {             /* Group cells */
  background: #ddf; 
  white-space: nowrap;
  text-align: right;
  padding: 2px 1em;
}
th.navibox-subgroup {          /* Subgroup cells */
  background: #e6e6ff; 
  white-space: nowrap;
  text-align: right;
  padding: 2px 1em;
}
td.navibox-list {              /* List cells */
  width: 100%;  /* Do not edit */
  background: transparent;
  text-align: left;
  padding: 2px 0.25em;
}
td.navibox-even { 
  background: #f5f5f5;         /* Even list cell color */
}

Hardcoded example

Header cell

Above

Group1: Row 1, cell 1

List1: Row 1, cell 2.

Group2: Row 2, cell 1

Group1: Row 1, cell 1	List1: Row 1, cell 2.
Group2: Row 2, cell 1	List2: Row 2, cell 2.

Group2: Row 2, cell 1

List2: Row 2, cell 2.

Below

Hardcoded example using the CSS classes

Too see this example correctly you have to add the CSS code above to your personal monobook.css.

Title

Above

Group1

List1

Group2

Group1	List1
Group2	List2