Kentico CMS 7.0 Developer's Guide

Customizing web part layout

Customizing web part layout

 Previous topic Next topic Mail us feedback on this topic!  

Customizing web part layout

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

Layouts allow you to customize the appearance of web parts or add content. Web part layouts are custom skins that replace the HTML code and ASPX markup of the web part.

 

•Each web part has its own list of layouts.

•You can select a different layout for every instance of the web part.

 

To select the layout for specific web part instances:

 

1.Go to CMS Desk.

2.Edit the document containing the web part instance on the Design tab.

3.Configure (Configure) the web part instance.

4.Switch to the Layout tab of the web part configuration dialog.

5.Select an existing layout or write a (New) layout.

oThe (Default) layout uses the markup of the web part's source file.

 

You can also manage the layouts of web parts in Site Manager -> Development -> Web parts by editing web parts on the Layout tab.

 

 

InfoBox_Information

 

Requirement

 

The Control declaration in the markup of the web part's user control file must contain the full relative path to the code behind file in the CodeFile attribute (CodeBehind attribute on web application installations). For example:

 

<%@ Control Language="C#" AutoEventWireup="true"
Inherits="CMSWebParts_Navigation_cmslistmenu"
CodeFile="~/CMSWebParts/Navigation/cmslistmenu.ascx.cs" %>

 

 

 

InfoBox_Exclamation

 

Do not remove controls from the layout

 

Keep all of the default controls inside the code of web part layouts to ensure that web parts work correctly. If you need to hide any of the controls, add the Visible="False" attribute.

 

Note: Your custom web part layouts may not work after upgrading to a new version of Kentico CMS (if the controls in the web part's markup changed). Please test your website carefully after upgrading, and update your custom layouts according to the controls in the default layout if necessary.

 

Example: Customizing the Newsletter subscription dialog

 

In this example, we will customize the newsletter subscription dialog layout. The standard layout looks like this (when no user is logged on):

 

devguide_clip0689

 

Go to CMS Desk -> Content and navigate to the Examples -> Web parts -> Newsletters -> Newsletter subscription page (if you're using the sample Corporate Site).

 

Switch to the Design tab and configure (Configure) the Newsletter subscription web part. Click the Layout tab and choose (New) from the drop-down list. Fill in the following values:

 

•Display name: Narrow layout

•Code name: NarrowLayout
 

Then enter the following Layout code:

 

Please note: If you installed the Kentico CMS project as a web application, you need to rename the CodeFile attribute on the first line to CodeBehind for the code example to be functional.
 

<%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_Newsletters_NewsletterSubscriptionWebPart" CodeFile="~/CMSWebParts/Newsletters/NewsletterSubscriptionWebPart.ascx.cs" %>

 

<%@ Register Src="~/CMSFormControls/Inputs/SecurityCode.ascx" TagName="SecurityCode" TagPrefix="cms" %>

 

<asp:Panel ID="pnlSubscription" runat="server" DefaultButton="btnSubmit" CssClass="Subscription">
  <asp:Label runat="server" ID="lblInfo" CssClass="InfoMessage" EnableViewState="false"

      Visible="false" />
  <asp:Label runat="server" ID="lblError" CssClass="ErrorMessage" EnableViewState="false"

      Visible="false" />
  <div class="NewsletterSubscription">
      <table cellspacing="0" cellpadding="0" border="0" class="Table">
          <asp:PlaceHolder runat="server" ID="plcFirstName">
              <tr>
                  <td>
                      <cms:LocalizedLabel ID="lblFirstName" runat="server" AssociatedControlID="txtFirstName"

                          EnableViewState="false" />
                  <br />
                      <asp:TextBox ID="txtFirstName" runat="server" CssClass="SubscriptionTextbox"

                          MaxLength="200" />
                  </td>
              </tr>
          </asp:PlaceHolder>
          <asp:PlaceHolder runat="server" ID="plcLastName">
              <tr>
                  <td>
                      <cms:LocalizedLabel ID="lblLastName" runat="server" AssociatedControlID="txtLastName"

                          EnableViewState="false" />
                  <br />
                      <asp:TextBox ID="txtLastName" runat="server" CssClass="SubscriptionTextbox"

                          MaxLength="200" />
                  </td>
              </tr>
          </asp:PlaceHolder>
          <asp:PlaceHolder runat="server" ID="plcEmail">
              <tr>
                  <td>
                      <cms:LocalizedLabel ID="lblEmail" runat="server" AssociatedControlID="txtEmail"

                          EnableViewState="false" />
                  <br />
                      <asp:TextBox ID="txtEmail" runat="server" CssClass="SubscriptionTextbox"

                          MaxLength="400" />
                  </td>
              </tr>
          </asp:PlaceHolder>
          <asp:PlaceHolder runat="server" ID="plcNwsList">
              <tr>
                  <td>
                      <asp:CheckBoxList runat="server" ID="chklNewsletters" CssClass="NewsletterList" />
                  </td>
              </tr>
          </asp:PlaceHolder>
          <asp:PlaceHolder runat="server" ID="plcCaptcha">
              <tr>
                  <td>
                      <cms:LocalizedLabel ID="lblCaptcha" runat="server" AssociatedControlID="scCaptcha"

                          EnableViewState="false" />
                  <br />
                      <cms:SecurityCode ID="scCaptcha" GenerateNumberEveryTime="false" runat="server" />
                  </td>
              </tr>
          </asp:PlaceHolder>
          <asp:PlaceHolder ID="pnlButtonSubmit" runat="server">
              <tr>
                  <td align="right">
                      <cms:LocalizedButton ID="btnSubmit" runat="server" OnClick="btnSubmit_Click"

                          CssClass="SubscriptionButton" EnableViewState="false" />
                  </td>
              </tr>
          </asp:PlaceHolder>
          <asp:PlaceHolder ID="pnlImageSubmit" runat="server">
              <tr>
                  <td align="right">
                      <asp:ImageButton ID="btnImageSubmit" runat="server" OnClick="btnSubmit_Click"

                          EnableViewState="false" />
                  </td>
              </tr>
          </asp:PlaceHolder>
      </table>
  </div>
</asp:Panel>

 

Click OK. When you look at the page now, you will see that the dialog looks like this (when no user is logged on):

 

devguide_clip0714

 

Layout styles

 

You can define any CSS classes used within the layout code by clicking the Add CSS styles link below the layout editor and adding the styles into the CSS styles field. If the styles require additional files (such as images), you can add them on the Theme tab, which is available when editing the layout in Site Manager -> Development -> Web parts.

 

For more information about page component CSS styles, please see the Development -> CSS stylesheets and design -> CSS for page components topic.