Block Selector

In C1 CMS v.4.0 or later, you can use the Block Selector. You can select one or more block elements (for example, a few paragraphs) on a page and format them with a specific style (for example, put the paragraphs into 2 columns).

To add your own block style to the Block Selector, you should create an ad-hoc class in a CSS file and add a <format> element in the common.xml with a specific attribute that identifies it as a block style. Make sure the CSS file in use is listed in the common.xml.

  1. In a style sheet listed in  common.xml (e.g.\Styles\common.css or style.less), create a style class, e.g.:
        padding: 19px;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
  2. In common.xml, find a <radiogroup> where <format> elements have the attribute wrapper="1" or create a new group.
  3. Add a <format> element to the radio group.
  4. Add the following attributes to the format and specify their values, e.g.:
    • id="demo"
    • label="Demo"
    • notes="Demo" (optional)
    • block="div"
    • classes="demo" (the class you defined in the CSS)
    • wrapper="1" (always 1)
  5. Add the <select/> element below the <format> element.

Note. For the Block Selector, the <format> element should always have the attribute 'wrapper' set to '1'.

This is how it may look in the common.xml:

  <format id="demo" label="Demo" image="" notes="Demo" block="div" classes="demo" wrapper="1"> 
    <select /> 

Please note that you are not limited to <div/> elements. You can use other block elements as well.