CSS Editing

Inside the code editor you can create custom CSS for your page component

CSS Editor (1)

To open the CSS editor simply click the CSS tab (1) on top of the code editor bar.

CSSediting2

If there is no CSS added to the component you will need to click the button activate.

The CSS written here is linked to the first design panel. These panels are used in the design editor  to style components without coding (see design).

A Design Panel is a way for non-coding designers to manipulate the CSS and JavaScript of the components. 

 

CSS editing (2)

Any CSS you add here will be added to your website. Make sure to use unique classes and/or use the [:compid:] system variable.

This variable is a unique id given by the platform for your component.

CSS Options (3)

Open panel (4): You can open the linked design panel (left sidebar)

Edit JSON panel (5): every single design panel is a JSON structure you can edit 

Beautify Code(6): formats your code to be more structured and readable.