Customizing Visual Editor
C1 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:
Styles for its images and style sheets respectively and the configuration file -
Normally, you should:
- add a style to an existing or new cascade style sheet file (e.g.
- if the style sheet file is not listed in
common.xml, add it there (see below) to make its styles available to Visual Editor,
- if buttons are used, add an image to
Imagesfolder for a button image,
- add a "format" to the
You can add your styles to existing style sheets already listed in
common.xml. If you use styles from style sheets not listed in
common.xml, add these style sheets in this file, too:
/visualeditor/styles, add a
- In its
fileattribute specify the relative path to the style sheet.
- 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
Note: Adding a styles sheet with used styles to
common.xml will only make applied formats visible in Visual Editor. To make them visible in Preview or on published pages in a web browser, you should also link to these style sheets in corresponding C1 page templates.
The formats should be placed within either
<radiogroup> elements, the latter - within the
(For information about formats, please see "Formats".)
<visualeditor> <formats> <group> <format /> </group> <radiogroup> <format /> </radiogroup> </formats> </visualeditor>
You use the
selector attributes of a
<format/> element to specify specific markup elements such as
<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
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 '
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."
- 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)
Note: You should at least specify either the label or the image for the button / item to appear in Visual Editor.
Visual Editor comes with a number of predefined styles for most common elements such as
<p>. However, you can override them and use your own.
Note: You should reload the console or clear the cache and reopen the page to see the changes instantly.
For specific scenarios please go on to read about: