/* 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) */ .g .container3 .content {min-height: 599px;} /* 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 dd { margin-bottom:8px} .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; } /* 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 {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; color:#555; font:10px/13px verdana, arial, helvetica, sans-serif;} /* 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, .container4 * { *margin:0; *position:relative;} /* fix IE only gap under tab headers */ .container4 {background:#fff; width: 100%; margin-top:-2px; z-index:-100;} .container4 .t {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;} .container4 .content,.container4 .content p, .container4 .content td, .container4 .content li { font: 11px/14px Verdana, Helvetica, Arial, sans-serif; } .container4 .content p { text-align:left} .container4 .content p.byline { margin:8px 0 10px 0; font-style:italic } .container4 .content ol li { margin: 6px 0 6px; text-align: justify } .container4 .content h2, h3, h4, h5, h6 { margin: 0 0 12px 0} .container4 .content h1 { margin: 0 0 11px 0;} .container4 .content h1 a {display: block; width: 173px; height: 32px; color: #5FACCC } .container4 .content h2 { font: normal 20px "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif} .container4 .content h2 span { font: normal 16px "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif; color: #8bbaca} .container4 .content h3 { margin: 0 0 12px 0; padding: 0; text-align:left} .container4 .content img {padding: 10px;} /* 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} /* Container 9 is made by Gareth Adams for the Twitter feed on the RUK homepage */ .container9 {background:#fff bottom url(9/c.gif) repeat-x; width: 805px;} .container9 .t {background:top url(9/t.gif) repeat-x} .container9 .tl {background:top left url(9/tl.gif) no-repeat} .container9 .tr {background:top right url(9/tr.gif) no-repeat} .container9 .r {background:right url(9/r.gif) repeat-y} .container9 .b {background:bottom url(9/b.gif) repeat-x} .container9 .l {background:left url(9/l.gif) repeat-y} .container9 .bl {background:bottom left url(9/bl.gif) no-repeat} .container9 .br {background:bottom right url(9/br.gif) no-repeat} .container9 .title {padding: 5px 5px 1px 7px; text-align:left; color:#333; font: bold 10px verdana, arial, helvetica, sans-serif} .container9 .content {padding: 7px 7px 8px 7px; text-align:justify; color:#555; font: 10px verdana, arial, helvetica, sans-serif} /* Container 10 is made by Gareth Adams for the MyRoland section on RUK */ .container10 {background: top left url(10/bkgd.jpg) no-repeat; background-color: black; width: 100%;} .container10 .t {background:top url(10/t.gif) repeat-x} .container10 .r {background:right url(10/r.gif) repeat-y} .container10 .b {background:bottom url(10/b.gif) repeat-x} .container10 .l {background:left url(10/l.gif) repeat-y} .container10 .tl {background:top left url(10/tl.gif) no-repeat} .container10 .tr {background:top right url(10/tr.gif) no-repeat} .container10 .bl {background:bottom left url(10/bl.gif) no-repeat} .container10 .br {background:bottom right url(10/br.gif) no-repeat} .container10 .title {padding: 13px 5px 1px 12px; text-align:left; color:#333; font:10px verdana, arial, helvetica, sans-serif;} .container10 .content {padding: 8px 0px 50px 0px; color:#BDBDBD; font:10px/13px verdana, arial, helvetica, sans-serif; margin-left: 17px; margin-right: 17px;} .container10 .content p { color:#BDBDBD; font-size: 11px; } .container10 .content fieldset legend { color:#BDBDBD; } .container10 .content fieldset div { padding: 10px; } .container10 .content label {width: 120px; color:#BDBDBD; } .container10 .content fieldset label {width: 120px;} .container10 .content ul li { color:#BDBDBD; } .container10 .content a:link { color: #FF256A; text-decoration: none } .container10 .content a:visited { color: #FF256A; text-decoration: none } .container10 .content a:visited { color: #FF256A; text-decoration: none } .container10 .content a:hover { color: #FF256A; text-decoration: underline }