Dokuwiki Box Plugin CSS Mods

The following in an updated css file for the popular boxes plugin for the Dokuwiki wiki platform.

I've shared this as I think it's a bit more verbose (in terms of comments) and more flexible to modify than the original CSS.

I have removed all the original color definitions and replaced them with one custom example color definition called greyred. This custom color definition is noted in comments (2 sections of the file) and could be repeated (with a new color name and color definitions of course) to add new colors. Besides this, and the addition of several more verbose comments, the original is unchanged.

/* BOX WITH ROUNDED CORNERS */
 
/* General box div */
div.box {
  width: 50%;
  margin: 1em auto;
  border: 1px solid;
  padding: 4px;
  overflow: hidden;
}
 
/* Setup rounded corners styles from Stu Nicholls snazzy borders,
http://www.cssplay.co.uk/boxes/snazzy.html */
.xtop, .xbottom {background:transparent; font-size:0; line-height: 1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; border-style: solid;}
.xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {border-width:0 1px;}
.xb1 {height: 0; margin:0 5px; border-width:1px 0 0 0;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
 
div.box .xtop, div.box .xbottom {display: none;}
div.box.round > .xtop, div.box.round > .xbottom {display: block;}
 
div.box.round { border: none; padding: 0;}
div.box.round > .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }
 
div.box p.box_title, div.box p.box_caption {
  font-size: 90%;
  margin: 0;
  padding: 2px 6px;
  line-height: 1.2;
}
 
div.box p.box_title { margin-bottom: 4px;}
div.box p.box_caption { margin-top: 4px;}
 
div.box .box_content {
  margin: 0;
  padding: 0 6px;
  border-width: 1px;
  border-style: dashed;
  line-height: 1.2;
}
 
/* floating alignment */
 
div.box.left {
  float: left;
  margin-right: 1em;
}
 
div.box.right {
  float: right;
  margin-left: 1em;
}
 
/* Colours */
/* Default - If nothing else is defined, these should kick in */
div.box, div.box .box_content, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
  border-color:  __dark__;
}
 
div.box, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
  background: __light__;
}
 
div.box p.box_title, div.box p.box_caption { background: __medium__;}
div.box .box_content { background: __lighter__;}
 
 
/* Colours - in this section we use child selectors, which most sane 
browsers should handle fine. However, IE won't, so we need to give it 
some special attention at the end. Just assume IE ignores most of 
this section */
 
/* === CUSTOM SECTION 1 - removed org. colors and added greyred === */
 
/* greyred Outer box border color */
div.box.greyred, div.box.greyred > .xbox, 
div.box.greyred > * > .xb1, div.box.greyred > * > .xb2, div.box.greyred > * > .xb3, div.box.greyred > * > .xb4 {
  border-color: #990000;
}
/* greyred Inner box border color */
div.box.greyred > * > .box_content {
  border-color: #eee;
}
/* greyred Outer box background color */
div.box.greyred, div.box.greyred > .xbox, 
div.box.greyred > * > .xb1, div.box.greyred > * > .xb2, div.box.greyred > * > .xb3, div.box.greyred > * > .xb4 {
  background: #eee;
}
/* greyred Inner box background color */
div.box.greyred > * > .box_content {
  background: #eee;
}
/* greyred Title and caption background colors */
div.box.greyred > * > p.box_title, div.box.greyred > * > p.box_caption {
  background: #eee;
}
 
/* === END CUSTOM SECTION 1 === */
 
 
/* must come last to override coloured background when using rounded corners */
 
div.box.round {
  background: transparent !important;
}
 
/* Now we get into the IE stuff. This uses the "* html" notation that 
only IE will read, so sane browsers should ignore the stuff below */
 
/* Default colors and other IE adjustments */
* html div.box div.box, * html div.box div.box .box_content, * html div.box div.box .xbox, 
* html div.box div.box .xb1, * html div.box div.box .xb2, 
* html div.box div.box .xb3, * html div.box div.box .xb4 {
  border-color:  __dark__;
}
 
* html div.box div.box, * html div.box div.box .xbox, 
* html div.box div.box .xb1, * html div.box div.box .xb2, 
* html div.box div.box .xb3, * html div.box div.box .xb4 {
  background: __light__;
}
 
* html div.box div.box p.box_title, * html div.box div.box p.box_caption { background: __medium__;}
* html div.box div.box .box_content { background: __lighter__;}
 
* html div.box.round .xtop, * html div.box.round .xbottom {display: block;}
* html div.box.round .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }
 
 
/* === CUSTOM SECTION 2 - removed original IE color adjustments 
and added greyred color IE adjustments === */
 
/* greyred IE Outer box border color */
* html div.box.greyred, * html div.box.greyred .xbox, 
* html div.box.greyred .xb1, * html div.box.greyred .xb2, * html div.box.greyred .xb3, * html div.box.greyred .xb4 {
  border-color: #990000;
}
/* greyred IE Inner box border color */
* html div.box.greyred .box_content {
  border-color: #eee;
}
/* greyred IE Outer box background color */
* html div.box.greyred, * html div.box.greyred .xbox, 
* html div.box.greyred .xb1, * html div.box.greyred .xb2, * html div.box.greyred .xb3, * html div.box.greyred .xb4 {
  background: #eee;
}
/* greyred IE Inner box background color */
* html div.box.greyred .box_content {
  background: #eee;
}
/* greyred IE Title and caption background colors */
* html div.box.greyred p.box_title, * html div.box.greyred p.box_caption {
  background: #eee;
}
/* nested greyred IE Outer box border color */
* html div.box div.box.greyred .xbox, 
* html div.box div.box.greyred .xb1, * html div.box div.box.greyred .xb2, 
* html div.box div.box.greyred .xb3, * html div.box div.box.greyred .xb4 {
  border-color: #990000;
}
/* nested greyred IE Inner box border color */
* html div.box div.box.greyred .box_content {
  border-color: #eee;
}
/* nested greyred IE Outer box background color */
* html div.box div.box.greyred .xbox, 
* html div.box div.box.greyred .xb1, * html div.box div.box.greyred .xb2, 
* html div.box div.box.greyred .xb3, * html div.box div.box.greyred .xb4 {
  background: #eee;
}
/* nested greyred IE Inner box background color */
* html div.box div.box.greyred .box_content {
  background: #eee;
}
/* nested greyred IE Title and caption background colors */
* html div.box div.box.greyred p.box_title, * html div.box div.box.greyred p.box_caption {
  background: #eee;
}
 
/* === END CUSTOM SECTION 2 === */
 
/* END BOX CSS */