Pembuatan Container pada DotNetNuke, selama ini lebih banyak menggunakan Table. Sebenarnya ada alternatif lain yang lebih mudah daripada harus memotong gambar bagian perbagian.
Rounded corner boxes using CSS, merupakan salah satu tehnik yang sebenarnya bisa digunakan untuk pembuatan Container DotNetNuke.
Cukup menggunakan satu box image yang masih utuh, anda sudah bisa membuat Container anda sendiri.
CSS Code :
/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(demobox.png) no-repeat bottom right;
}
.cssbox {
width: 100% !important; /* intended total box width - padding-right(next) */
width: 100%; /* IE Win = width - padding */
padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
margin: 20px auto; /* use to position the box */
}
/* set the top-right image */
.cssbox_head {
background-position: top right; margin-right: -15px; /* pull the right image over on top of border */
padding-right: 145px; /* right-image-gap + right-inside padding */
}
/* set the top-left image */
.cssbox_head h2 {
background-position: top left;
margin: 0; /* reset main site styles*/
border: 0; /* ditto */
padding: 25px 0 10px 25px; /* padding-left = image gap + interior padding ... no padding-right */
height: auto !important; height: 1%; /* IE Holly Hack */
}
/* set the lower-left corner image */
.cssbox_body {
background-position: bottom left;
margin-right: 25px; /* interior-padding right */
padding: 5px 0 10px 25px; /* mirror .cssbox_head right/left */
}
Your Container :
<div class="cssbox" align=left style='width:100%'>
<div class="cssbox_head">
<h2>
<dnn:ACTIONS runat="server" ID="dnnACTIONS" />
<dnn:ICON runat="server" ID="dnnICON" />
<dnn:TITLE runat="server" ID="dnnTITLE" CssClass="title" />
</h2>
</div>
<div class="cssbox_body">
<div id="ContentPane" runat="server" align="center" style='width:100%;'></div>
<br />
<div>
<dnn:ACTIONBUTTON2 runat="server" ID="dnnACTIONBUTTON2" CommandName="SyndicateModule.Action"
DisplayIcon="True" DisplayLink="False" />
<dnn:ACTIONBUTTON3 runat="server" ID="dnnACTIONBUTTON3" CommandName="PrintModule.Action"
DisplayIcon="True" DisplayLink="False" />
<dnn:ACTIONBUTTON4 runat="server" ID="dnnACTIONBUTTON4" CommandName="ModuleSettings.Action"
DisplayIcon="True" DisplayLink="False" />
</div>
<p>
</p>
</div>
</div>