/* Z-Containers: Tableless Skinned CSS Containers Copyright 2009 Roland Corporation Australia - For Roland Corporation JV internal use only Nuri Kevenoglu nuri@rolandcorp.com.au ------------------------------------ USAGE: See containers-test.htm for example HTML usage. Instead of using nested
tags as shown in containers-test.htm, you can use the custom server webcontrol Roland.Client.UI.WebControls.Container to render the same output. The Container server control works well when used in conjunction with the Roland.Client.UI.WebControls.Banner server control as shown in the following snippet from /default.aspx: Featured Products You can also load container programmatically: Dim ProductDetailsContainer As New Container ProductDetailsContainer.ID = "MyContainer" ProductDetailsContainer.CssClass = "container3" ProductDetailsContainer.FindControl("content").Controls.Add(Content) Form.Controls.Add(ProductDetailsContainer) See the last function called AddTabAndContent() in file /products/productdetails.aspx.vb for an example of how to load the tabbed containers programmatically Each /App_Themes/[Theme Name] folder can contain a different set of containers. Each theme should use the same container names for container scenarios: e.g. container1 and container2 are header containers, container3 is general container, etc) Important! The name of the Containers folder must start with an underscore (i.e _Containers) so that the containers.css file is always the FIRST CSS file to be rendered by ASP.NET (they are loaded alphabetically) */ /* Default .content rules below were imported from the original RUS div.leftblock rules */ .content p { margin: 0 0 12px } .content h2.title { font: normal 20px/24px "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif; border-bottom: 1px solid #8bbaca; padding-bottom: 1px; margin-bottom: 12px; } .content h2.title span { display: block; border-bottom: 1px solid #8bbaca; padding-bottom: 3px } .content h3 { border-bottom: 1px solid #e0e0e2; padding: 0 0 2px 0; margin: 0 0 6px 0 } .content a:link { color: #5FACCC; text-decoration: none } .content a:visited { color: #5FACCC; text-decoration: none } .content a:visited { color: #5FACCC; text-decoration: none } .content a:hover { color: #5FACCC; text-decoration: underline } .content label { display:inline-block; width:120px } .content label.option { width:80px } .content ul { margin-left: 0px; padding-left: 0px } .content ul li { font-size:10px; list-style-position:outside; margin-left:18px; padding-left:5px; } .content p.byline { margin:8px 0 10px 0; font-style:italic } /* Container specific rules */ .container1 {width: 100%;} .container1 .t {background:top url(1/t.png) repeat-x} .container1 .tl {background:top left url(1/tl.png) no-repeat} .container1 .tr {background:top right url(1/tr.png) no-repeat} .container1 .title {padding: 8px 5px 1px 10px; text-align:left; color:#555; font:12px Verdana, Helvetica, Arial, sans-serif; top: 0px; left: 0px; } .container1 .content {padding: 13px 7px 0px 0px; color:#555; font: 10px verdana, arial, helvetica, sans-serif} /* Container 2 is used as a half-page wide container e.g. see "Featured Products" and "Current Promotions" on the home page */ .container2 {width: 100%;} .container2 .t {background:top url(2/t.gif) repeat-x} .container2 .tl {background:top left url(2/tl.gif) no-repeat} .container2 .tr {background:top right url(2/tr.gif) no-repeat} .container2 .br a {text-decoration: none} .container2 .title {padding: 8px 5px 1px 38px; text-align:left; color:#555; font:12px Verdana, Helvetica, Arial, sans-serif} .container2 .content {padding: 2px 1px 0px 0px; color:#555; font: 10px verdana, arial, helvetica, sans-serif} /* container3 is used as the primary container for the template */ .container3 {background: #fff; width: 100%} .container3 .t {background:top url(3/t.gif) repeat-x} .container3 .r {background:right url(3/r.gif) repeat-y} .container3 .b {background:bottom url(3/b.gif) repeat-x} .container3 .l {background:left url(3/l.gif) repeat-y} .container3 .tl {background:top left url(3/tl.gif) no-repeat} .container3 .tr {background:top right url(3/tr.gif) no-repeat} .container3 .bl {background:bottom left url(3/bl.gif) no-repeat} .container3 .br {background:bottom right url(3/br.gif) no-repeat} .container3 .title {padding: 13px 5px 1px 12px; text-align:left; color:#333; font:10px verdana, arial, helvetica, sans-serif} .container3 .content {padding: 8px 7px 50px 7px; } .container3 .content img.fileicon { padding:0; margin:0 4px 0 0 } /* container4 is used as tabbed content container (used in tabbed product details tabs - see the last function called AddTabAndContent() in file /products/productdetails.aspx.vb for an example of how to load the tabbed containers programmatically */ .container4 {*position:relative; background:#fff bottom; width: 100%; margin-top:-2px; z-index:-100;} .container4 .t {*position:relative; background:top url(4/t.gif) repeat-x;} .container4 .r {background:right url(4/r.gif) repeat-y} .container4 .b {background:bottom url(4/b.gif) repeat-x} .container4 .l {background:left url(4/l.gif) repeat-y} .container4 .tl {background:top left url(4/tl.gif) no-repeat} .container4 .tr {background:top right url(4/tr.gif) no-repeat} .container4 .bl {background:bottom left url(4/bl.gif) no-repeat} .container4 .br {background:bottom right url(4/br.gif) no-repeat;} .container4 .title {padding: 5px 5px 1px 7px; text-align:left; color:#333; font: bold 10px verdana, arial, helvetica, sans-serif} .container4 .content {padding: 20px 20px 8px 19px;} /* Container 5 is an alternative to container 3 */ .container5 {background:#fff bottom url(5/c.gif) repeat-x; width: 100%} .container5 .t {background:top url(5/t.gif) repeat-x} .container5 .r {background:right url(5/r.gif) repeat-y} .container5 .b {background:bottom url(5/b.gif) repeat-x} .container5 .l {background:left url(5/l.gif) repeat-y} .container5 .tl {background:top left url(5/tl.gif) no-repeat} .container5 .tr {background:top right url(5/tr.gif) no-repeat} .container5 .bl {background:bottom left url(5/bl.gif) no-repeat} .container5 .br {background:bottom right url(5/br.gif) no-repeat} .container5 .title {padding: 13px 5px 1px 12px; text-align:left; color:#333; font:10px verdana, arial, helvetica, sans-serif} .container5 .content {padding: 8px 7px 8px 7px; color:#555; font:10px/13px verdana, arial, helvetica, sans-serif} /* Container 6 is an alternative to container 4 (tabbed content container) - not used in the initial version of the Roland template */ .container6 {background:#fff bottom url(6/c.gif) repeat-x; width: 100%} .container6 .r {background:right url(6/r.gif) repeat-y} .container6 .b {background:bottom url(6/b.gif) repeat-x} .container6 .l {background:left url(6/l.gif) repeat-y} .container6 .bl {background:bottom left url(6/bl.gif) no-repeat} .container6 .br {background:bottom right url(6/br.gif) no-repeat} .container6 .title {padding: 5px 5px 1px 7px; text-align:left; color:#333; font: bold 10px verdana, arial, helvetica, sans-serif} .container6 .content {padding: 7px 7px 8px 7px; text-align:justify; color:#555; font: 10px verdana, arial, helvetica, sans-serif} /* Containers 7 and 8 are not used but provided as examples */ .container7 {background: #fff; width: 100%} .container7 .t {background:top url(7/t.png) repeat-x} .container7 .r {background:right url(7/r.png) repeat-y} .container7 .b {background:bottom url(7/b.png) repeat-x} .container7 .l {background:left url(7/l.png) repeat-y} .container7 .tl {background:top left url(7/tl.png) no-repeat} .container7 .tr {background:top right url(7/tr.png) no-repeat} .container7 .bl {background:bottom left url(7/bl.png) no-repeat} .container7 .br {background:bottom right url(7/br.png) no-repeat} .container7 .title {padding: 3px 5px 3px 5px; text-align:left; color:#fff; font:bold 10px verdana, arial, helvetica, sans-serif} .container7 .content {padding: 6px 5px 6px 5px; text-align:justify; color:#222; font: 10px verdana, arial, helvetica, sans-serif} .container8 {background:url(8/c.gif); width: 100%} .container8 .t {background:top url(8/t.gif) repeat-x} .container8 .r {background:right url(8/r.gif) repeat-y} .container8 .b {background:bottom url(8/b.gif) repeat-x} .container8 .l {background:left url(8/l.gif) repeat-y} .container8 .tl {background:top left url(8/tl.gif) no-repeat} .container8 .tr {background:top right url(8/tr.gif) no-repeat} .container8 .bl {background:bottom left url(8/bl.gif) no-repeat} .container8 .br {background:bottom right url(8/br.gif) no-repeat} .container8 .title {padding: 15px 3px 3px 15px; text-align:left; color:#8bbaca; font:bold 10px verdana, arial, helvetica, sans-serif} .container8 .content {padding: 5px 15px 20px 15px; color:#eee; font: 10px verdana, arial, helvetica, sans-serif}