☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

styles

Table of contents

Description:

This key toggles whether CloudCannon will display a dropdown menu in your WYSIWYG toolbar to apply a style to selected text.

Appears in:
├── _inputs
│   └── *
│       └── Rich Text Input
│           └── options
│               └── styles
└── _editables
    ├── content
    │   └── styles
    └── block
        └── styles
Type:
string
Examples:

In this example, we have enabled a dropdown menu in our WYSIWYG toolbar to apply a style to selected text. The styles are defined in the /css/styles.css file.

Copied to clipboard
_editables:
  content:
    styles: /css/styles.css
{
  "_editables": {
    "content": {
      "styles": "/css/styles.css"
    }
  }
}

This example file defines the styles that CloudCannon can add to your WYSIWYG toolbar.

CSS
Copied to clipboard
/* Can be applied to blocks of content */
p.callout {
  margin: 10px;
  border: 1px solid #f5f5f5;
  background-color: #eee;
}

/* Can be applied to inline content */
span.big-blue-text {
  font-size: 2rem;
  color: blue;
}

/* Applied to content, excluded from style dropdown */
h2 {
  font-family: cursive;
}

/* Applied to content, excluded from style dropdown */
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
Open in a new tab