Kentico CMS 7.0 Context Help



Previous topic Next topic Mail us feedback on this topic!  


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

This dialog is displayed when creating a new web part layout or editing an existing one.


The following actions are available in the header of the tab:


Save Save - click this button to confirm any changes made to the web part layout.

CheckOut Check out - locks the layout, so that other users cannot modify it at the same time. After you finish your edits, you can allow other users to modify the layout again using the CheckIn Check in button or you can cancel the checkout by clicking UndoCheckoutNew Undo checkout.

NavigateToDocument Preview - allows you to edit the layout's code side-by-side with a preview of how the web part appears on the live site. Please see the Design preview help topic for additional details about the preview mode.


You can use the fields described below to configure the web part layout and specify its content:


Display name

Name of the layout which will be displayed in the layout list.

Code name

A unique name that will be used to identify the layout (e.g. in code).


Can be used to enter an optional text description for the web part layout.

Layout code

This is where you can enter the code that defines the custom layout for the given web part. You may use the same type of code as when editing a standard ASCX user control.


Adding CSS styles to the web part layout


Web part layouts allow you to directly define any CSS classes used within the layout code.


Requirement: The Allow CSS from components setting must be enabled in Site Manager -> Settings -> System -> Performance.


1. Click Add CSS styles below the layout's code. The CSS styles editor appears.


2. Enter the definitions of the required CSS classes.


3. Click Save Save.


All pages containing a web part that uses this layout automatically load the specified styles.


Additional resources


Developer's Guide -> Development -> Web parts -> Overview

Developer's Guide -> Development -> Web parts -> Modifying web parts -> Customizing web part layout

Developer's Guide -> Development -> Team development -> Object locking

Developer's Guide -> Development -> CSS stylesheets and design -> CSS for page components