User:Davidgothberg/Navibox demo

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
  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.

  Group2 List2   </TABLE> <TR> <TD class="navibox-abovebelow navibox-border-top" style="">Below </TABLE>