|
|
|
New container/General tab |
|
|
|
|
|
|
New container/General tab |
|
|
|
|
New container/General tab
|
|
|
New container/General tab |
|
|
|
|
|
|
New container/General tab |
|
|
|
|
The following properties can be entered when creating a new web part container, or editing an existing one:
Display name |
The name of the container displayed to the users. |
Code name |
The name of the container used in code. |
HTML before web part |
HTML content displayed before the web part - the beginning of the envelope. |
HTML after web part |
HTML content displayed after the web part - the closing part of the envelope. |
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. |
The HTML before/after web part fields can contain dynamically inserted values of the contained web part's properties. You can insert them using the following expression:
{%propertyname%}
You will most often use the following expression to insert the container title:
{%ContainerTitle%}
These macro expressions are resolved even when macro resolving for the particular web part (Disable macros property) is disabled.
Defining CSS styles
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_6.0/CMSPages/GetCSS.aspx?containers=BlackBox;OrangeBox" type="text/css" rel="stylesheet"/>
The value of the containers URL parameter is dependant on the containers used on the page, the example above is for a page that contains the Black box and Orange box containers.
If CSS minification is enabled, the request will use the following format instead:
<link href="/KenticoCMS_6.0./CMSPages/GetResource.ashx?containers=BlackBox;OrangeBox" 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. |
More resources can be found at:
| • | Developer's Guide -> Development -> Web parts -> Web part containers -> Creating web part containers |
