Hi ! I just finished this little snippet, it generates round boxes, without any image, just CSS.
example here :
http://wiki.jalakai.co.uk/dokuwiki/doku.php/test/boxes
Adapted from a dokuwiki plug-in, itself based on a css technique "snazzy borders" :
http://www.cssplay.co.uk/boxes/snazzy.html" by stu nicholls,
itself based on the "nifty corners" technique
http://pro.html.it/esempio/nifty/
by Alessandro Fulciniti.
1°) Paste this in one of your CSS :
/* SNAZZY BORDERS & ROUNDED BOXES */
/* You can add classes, change colors tu suit your needs :) */
/* Modx Roundboxes snippet by Vinh CHUC, www.pikkitux.com */
div.box {
width: 50%;
margin: 1em auto;
border: 1px solid;
padding: 4px;
}
/* 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.2em;
}
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.2em;
}
/* floating alignment */
div.box.left {
float: left;
margin-right: 1em;
}
div.box.right {
float: right;
margin-left: 1em;
}
/* colours */
/* default */
div.box, div.box .box_content, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
border-color: #8cacbb;
}
div.box, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
background: #ecf1f4;
}
div.box p.box_title, div.box p.box_caption { background: #dee7ec;}
div.box .box_content { background: #f7fafb;}
/* blue */
div.box.blue, div.box.blue .box_content, div.box.blue .xbox,
div.box.blue .xb1, div.box.blue .xb2, div.box.blue .xb3, div.box.blue .xb4 {
border-color: #bbbbdd;
}
div.box.blue, div.box.blue .xbox,
div.box.blue .xb1, div.box.blue .xb2, div.box.blue .xb3, div.box.blue .xb4 {
background: #e4ecf8;
}
div.box.blue p.box_title, div.box.blue p.box_caption {background: #cad0ee;}
div.box.blue .box_content {background: #f4f8fd;}
/* red */
div.box.red, div.box.red .box_content, div.box.red .xbox,
div.box.red .xb1, div.box.red .xb2, div.box.red .xb3, div.box.red .xb4 {
border-color: #ddbbbb;
}
div.box.red, div.box.red .xbox,
div.box.red .xb1, div.box.red .xb2, div.box.red .xb3, div.box.red .xb4 {
background: #f8ece4;
}
div.box.red p.box_title, div.box.red p.box_caption {background: #eed0ca;}
div.box.red .box_content {background: #fdf4ec;}
/* green */
div.box.green, div.box.green .box_content, div.box.green .xbox,
div.box.green .xb1, div.box.green .xb2, div.box.green .xb3, div.box.green .xb4 {
border-color: #bbddbb;
}
div.box.green, div.box.green .xbox,
div.box.green .xb1, div.box.green .xb2, div.box.green .xb3, div.box.green .xb4 {
background: #e4f8f2;
}
div.box.green p.box_title, div.box.green p.box_caption {background: #c4e4d4;}
div.box.green .box_content {background: #ecfaf6;}
/* orange */
div.box.orange, div.box.orange .box_content, div.box.orange .xbox,
div.box.orange .xb1, div.box.orange .xb2, div.box.orange .xb3, div.box.orange .xb4 {
border-color: #da3;
}
div.box.orange, div.box.orange .xbox,
div.box.orange .xb1, div.box.orange .xb2, div.box.orange .xb3, div.box.orange .xb4 {
background: #f4e8ca;
}
div.box.orange p.box_title, div.box.orange p.box_caption {background: #f0d499;}
div.box.orange .box_content {background: #f8f0da;}
/* must come last to override coloured background when using rounded corners */
div.box.round {
background: transparent !important;
}
/* end plugin:box */
and the snippet
// This plug-in generates Round Boxes without images, just pure CSS. Adapted from a dokuwiki plug-in,
// itself based on a css technique "snazzy borders" : http://www.cssplay.co.uk/boxes/snazzy.html" by stu
// nicholls, itself based on the "nifty corners" technique http://pro.html.it/esempio/nifty/ by Alessandro // Fulciniti.
// Examples here http://wiki.jalakai.co.uk/dokuwiki/doku.php/test/boxes
// Syntax :
//[[Roundboxes? &title=yourtitle&content=yourcontent&round=yes or no&width=width in %&color=a //color&align=left or right]]
// you are not forced to set all the variables, only title and content are really necessary, others have
// default values
// example :
//[[Roundboxes? &title=luke&content=I'm your father&color=green&width=80&round=yes&align=right]]
// Version 1.0 24/12/2005
//Parameters
// The Width of the box in percent, default is 80%
if ( $width == NULL )
{ $width = '80' ;}
// Round or not round corners ? Default is yes, enter no to disable round corners
if ( $round == "no" )
{ $round = NULL; }
else { $round ='round'; }
// The Color of the Boxes, default color is blue, ( blue, red, green, orange )
if ( $color == NULL )
{ $color = 'blue'; }
// the $align variable can be set to left or right, your boxe will then have a float:left/tight property
// The Core of the Snippet :)
$s = ' ';
$var1 ='<div class="box ';
$var2 ='" style="width:';
$var3 ='%;">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xbox">
<p class="box_title">';
$var4 ='</p>
<div class="box_content"><p>';
$var5 ='</p></div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>';
$output = $var1.$align.$s.$color.$s.$round.$var2.$width.$var3.$title.$var4.$content.$var5;
echo $output;
// Plug-in made by Vinh CHUC, [email protected]
sorry if my english sucks
, it’s not my native language, please post any comments or suggestions
bye !
edit : there is a bug if you use the equal sign in the content or title variables, do you know how to solve this ??