|
|
New container/General tab |
|
|
|
|
|
New container/General tab |
|
|
|
|
|
|
New container/General tab |
|
|
|
|
|
New container/General tab |
|
|
|
|
|
|
||
The fields described below are used when creating a new web part container or editing an existing one:
Display name |
The name of the container displayed to users in lists and selectors. |
Code name |
A string identifier for the container that can be used by developers in the API and URLs. Unless you have a reason to set a particular value, you can leave the default (automatic) option, and the system will generate an appropriate code name. |
HTML code |
Here you can enter the HTML content that will be placed around the web part. The position of the actual web part content is represented in the code by a placeholder, so you can add both opening and closing elements.
This field can contain dynamically loaded values of the enclosed web part's properties. You can insert them using expressions in the following format:
{%PropertyName%}
You will most often use the following expression to insert the container title:
{%ContainerTitle%}
These macro expressions are resolved even if macro resolving is disabled for the particular web part instance (through the Disable macros property). |
CSS styles |
This field becomes available if you click the Add CSS styles link.
Here you can define any CSS classes used within the code of the container. The specified styles will be loaded on any page where the given container is used. Please note that this requires the Allow CSS from components setting to be enabled in Site Manager -> Settings -> System -> Performance.
For more information about CSS styles of page components, please see the Development -> CSS stylesheets and design -> CSS for page components topic in the Developer's Guide. |
When editing an existing container, the following actions are available in the header of the General tab:
•
Save - click this button to confirm any changes made to the container.
•
Check out - locks the container, so that other users cannot modify it at the same time. After you finish your edits, you can allow other users to modify the container again using the 
Check in button or you can cancel the checkout by clicking 
Undo checkout.
•
Preview - allows you to edit the web part container side-by-side with a preview of how it appears on the live site. This may only be used for containers that are already placed on one of the website's pages. Please see the Design preview help topic for additional details about the preview mode.
There are two locations where CSS classes used by the web part container can be defined:
•In the general site stylesheet - all the CSS classes are stored in one file, but exporting the container to a site that uses a different stylesheet is more difficult.
•In the CSS styles property of the container - classes are stored separately for containers, which requires an additional resource request, but containers are automatically exported (including staging) with their CSS classes to other sites or Kentico CMS instances.
A stylesheet request link similar to the following will be added to the <head> element of any page that contains web part containers with styles defined in their CSS styles property:
<link href="/KenticoCMS/CMSPages/GetCSS.aspx?_containers=1;14" type="text/css" rel="stylesheet"/>
The value of the containers URL parameter is dependent on the containers used on the page, the example above is for a page that contains the Black box and Orange box containers (identified by their ContainerID values).
If CSS minification is enabled, the request will use the following format instead:
<link href="/KenticoCMS/CMSPages/GetResource.ashx?_containers=1;14" type="text/css" rel="stylesheet"/>
|
Storing files related to web part containers
If your web part container code uses any additional files, such as images used by the classes defined in the CSS styles property, they must be stored in the ~/App_Themes/Components/Containers/<container code name> folder so they can be exported/imported along with the container.
If the used CSS classes are defined in the site stylesheet, any accompanying files should be stored in the ~/App_Themes/<stylesheet code name> folder. |
•Developer's Guide -> Development -> Web parts -> Web part containers -> Containers overview
•Developer's Guide -> Development -> Web parts -> Web part containers -> Creating web part containers
•Developer's Guide -> Development -> Team development -> Object locking
