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

 

作者:Chuck Lu    GitHub