Container Classes
Attach class names to individual content areas and control styling and what components are selectable.
You can assign container class names to editable HTML areas in three ways:
In Page Templates - specify one or more class names in the ContainerClasses parameter in the Placeholder attribute, like this:
[Placeholder(Id = "content", ContainerClasses="primary,wide", Title = "Content", IsDefault = true)]
public XhtmlDocument Content { get; set; }In Page Types - add or edit an item below your Page Type's "Placeholder Content" folder. On the Settings tab, specify your class names in the "Container Classes" field.
In Visual Editor widgets - in function calls accepting XHTML parameters and data types with XHTML fields you can configure class names using the VisualXhtmlEditor widget's Container Classes parameter.
You can specify one or more class names, separated with space or comma. There are no "magic" container class names - this is an optional feature of C1 CMS that you can use, if you want to deliver a customized experience.
Control Visual Editor styling for specific content elements
The class names you specify will be attached to the <body /> element in the Visual Xhtml Editor users see when editing. This allow you to put area specific styling rules in effect.
- Specify one or more class names in an editable HTML area, via one of the three methods described above
- In the CSS for styling the Visual Xhtml Area content (see Customizing Visual Editor) define a rule
body.{class name}customizing the styling.
Control Component availability for specific content elements
Container Classes you specify will also be used by the Component selection dialog to filter what the user can select. As an example you can set the container class name "blog-main" for a content element on the Blog Page Type and then configure all blog related components to require the container class name "blog-main" - this will ensure these components only show up when editing a blog page.
See Components for more.
Container Class names in nested editable HTML areas
In situations where editable HTML areas are nested - for instance, if a user is editing the main content area of a page and on this page is editing a CMS Function with a HTML content area in it - the following apply:
- Container classes from first editable HTML areas will be inherited to the nested one
- Container classes specified on the nested one (of any) will be compounded with the inherited names
You have the option to control this flow of inheritance by defining class names that cancel the inheritance of specific class names. You can edit ~/App_Data/Composite/Configuration/AntonymClassDefinitions.xml and specify this.
Example:
<Classes>
<Class name="wide" antonym="narrow"/>
<Class name="narrow" antonym="wide"/>
</Classes>In this example a nested editable HTML area with the container class name "narrow" will prevent "wide" from being inherited (and vice versa).Imagine you are using container class names to keep track of the role of editable HTML areas and you style / filter components accordingly. Editing the main content area of a page would have the "wide" container class and allow for voluminous Components to be inserted, like galleries and videos. On this page you also have a CMS Function that let the user define content for 3 columns - for these 3 HTML areas you specify the "narrow" container class name. By defining wide/narrow antonyms, you can ensure that voluminous components will disappear from the user selection.