Container for home page text

 Top  Previous  Next

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:

 

•Container display name: My web site gray box
•Container 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 and create another container:

 

•Container display name: My web site blue box
•Container 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 and configure the editabletext web part in the middle column. Set the Web part container value to My web site gray box and click OK.

 

Configure the editabletext1 web part in the right column and set the Web part container value to My web site blue box. Set the Web part container title value 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:

 

clip0021