Container for home page text

   Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic! Mail us feedback on this topic!  

Now we will create the gray and blue containers for our home page text. Such a container can be re-used for any other web part later. If you do not wish to use a container, you could alternatively insert the surrounding code into the HTML layout of your page template.

 

Go to Site Manager -> Development -> Web part containers and click New container. Enter the following values:

 

•Display name: My web site gray box
•Code name: MyWebSiteGrayBox
•Text before web part:
 

<table cellspacing="0" cellpadding="0" border="0" class="ContainerWithCorners" width="100%">

 <tr class="ContainerWithCornersRow">

   <td class="ContainerWithCornersTopLeft">&nbsp;</td>

   <td class="ContainerWithCornersTop">&nbsp;</td>

   <td class="ContainerWithCornersTopRight">&nbsp;</td>

 </tr>

 <tr>

   <td class="ContainerWithCornersLeft">&nbsp;</td>

   <td class="ContainerWithCornersContent" valign="top">

 

•Text after web part:

 

   </td>

   <td class="ContainerWithCornersRight">&nbsp;</td>

 </tr>

 <tr class="ContainerWithCornersRow">

   <td class="ContainerWithCornersBottomLeft">&nbsp;</td>

   <td class="ContainerWithCornersBottom"></td>

   <td class="ContainerWithCornersBottomRight">&nbsp;</td>

 </tr>

</table>

 

Click OK. Switch to the Sites tab and make sure that the container is assigned to My web site. Now create another container:

 

•Display name: My web site blue box
•Code name: MyWebSiteBlueBox
•Text before web part:
 

<table cellpadding="0" cellspacing="0" style="width: 100%;" class="Blue">

 <tr>

   <td class="BoxTitle">{%ContainerTitle%}&nbsp;

   </td>

 </tr>

 <tr>

   <td class="BoxArea">

 

•Text after web part:

 

   </td>

 </tr>

</table>

 

Now go back to CMS Desk -> Content -> select Home page -> Design tab and configure the editabletext web part in the middle column. Set its Web part container property to My web site gray box and click OK.

 

Configure the editabletext1 web part in the right column and set the Web part container property to My web site blue box. Set the Web part container title property to Contact Us.

 

When you go to the Live site now, you can see the gray box around the home page text and blue box around the Contact Us text:

 

tutorial_clip0113

 

Page url: http://devnet.kentico.com/docs/tutorial/index.html?container_for_home_page_text.htm