how to use webpart container in kentico

https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-web-part-containers 

Webpart Container

webpart container中的orangebox,

 

SELECT *
FROM   dbo.CMS_WebPartContainer
WHERE  ContainerDisplayName LIKE '%orange%';

 

把StyleSheet绑定给站点使用

 

 

站点使用CSS StyleSheet

orangeBox必须要绑定这个stylesheet，否则无法正常显示

.orangeBox .title 
{background: url("~/App_Themes/CorporateSite/Images/orangebox.png") repeat-x scroll 0 0 #e56814;color: #ffffff;font-size: 140%;margin-bottom: 0;margin-top: 0;padding: 8px 10px;
}

 

 

SELECT *
FROM dbo.CMS_CssStylesheet
WHERE StylesheetText LIKE '%orangebox%';

 

分析

首先在style sheet中定义好class

.orangeBox
{border: 1px solid #f59045;margin-bottom: 15px;
}.orangeBox .title 
{background: url("~/App_Themes/CorporateSite/Images/orangebox.png") repeat-x scroll 0 0 #e56814;color: #ffffff;font-size: 140%;margin-bottom: 0;margin-top: 0;padding: 8px 10px;
}.orangeBox .content {padding: 5px;
}

 

在webpart container中使用定义好的css

<div class="orangeBox">
<h3 class="title">{%ContainerTitle%}</h3>
<div class="content">□</div>
</div>

第四行中的□代表的是webpart

 

在webpart的webpart container属性中设置使用哪一个webpart container