C1 CMS Visual Editor is customizable and you can adapt some of its appearance to your needs.

You can add, remove or customize buttons on the editor's toolbar as well as items in the block, style or class selector.

The Visual Editor is styled with style sheets (CSS) and uses a number of images for its GUI buttons. The appearance and behavior of the editor itself is set via its configuration file.

Please examine the folder on your website: ~\Frontend\Config\VisualEditor. It contains two folders: Images and Styles for its images and style sheets respectively and the configuration file - common.xml

How to get started with customization?

Normally, you should:

1. add a style to an existing or new cascade style sheet file (e.g. Styles/common.css),
2. if the style sheet file is not listed in common.xml, add it there (see below) to make its styles available to Visual Editor,
3. if buttons are used, add an image to Images folder for a button image,
4. add a "format" to the common.xml (see below).

Adding a style sheet to common.xml

You can add your styles to existing style sheets already listed in common.xml. If you use styles from style sheets not listed in <styles/> in common.xml, add these style sheets in this file, too:

1. Edit ~\Frontend\Config\VisualEditor\common.xml.
2. Within /visualeditor/styles, add a style element.
3. In its file attribute specify the relative path to the style sheet.
4. Save the file.

<visualeditor> 
  <styles> 
    <style file="styles/custom.css" /> 
  </styles> 
</visualeditor>

Alternatively, you can import new style sheets into a style sheet already listed in common.xml with the @import directive.

Adding formats to common.xml

The formats should be placed within either <group> or <radiogroup> elements, the latter - within the <format/> element.

(For information about formats, please see "Formats".)

<visualeditor> 
  <formats> 
    <group> 
      <format /> 
    </group> 
    <radiogroup> 
      <format /> 
    </radiogroup> 
  </formats> 
</visualeditor>

You use the inline, block or selector attributes of a <format/> element to specify specific markup elements such as <p>, <h1>, <img>. For example, if you want to use a <h1> to format a block of text, you should specify it as 'block="h1"' in the <format/> element.

If the format also uses a style class with the markup element, you should specify the class in the classes attribute. For example,if you want to wrap some inline text with a <span class="strikethrough">, you should specify it as 'inline="span" classes="strikethrough"'.

What you need to get started with formats:

• A style in CSS (redefined for element or defined as a class for the element). This is what your format is. This should include the name of the styled element (e.g. <h1>) and if applicable, the class (e.g.".nice")
• An ID for your format
• A label and optionally a tooltip text (notes) for the button/item
• An image if necessary (quite expected for a button)

Visual Editor comes with a number of predefined styles for most common elements such as <h1> or <p>. However, you can override them and use your own.

For specific scenarios please go on to read about:

• How to add an item to the block selector
• How to add an item to the style selector
• How to add an item to the class selector
• How to add a button to the toolbar
• How to add a font color selector