Using CSS styles from an external document

Apart from the styles that you can apply on UI elements via the editor you can also use external CSS files with styles.

There are a few basic steps that you need to follow

  1. Create new CSS file or copy existing ones to the project
  2. Import the file in the Coherent Editor
  3. Set the classes and ids of the UI elements to match the relevant classes and ids in the CSS files

Create new CSS files or copy existing ones

If you are using the UE4 version of the editor to create a CSS file you just need to right click in the UE4's content browser and choose from the menu CSS file

Or if you already have a CSS file that you want to use then just copy it to the UE4 project's uiresources folder.

If you are using the standalone version of the Editor you can create a new CSS file in the uiresources folder.

Import the file in the Coherent Editor

To import the file in the Coherent Editor use the Files panel and click to "+" sign under the CSS section. You can select the CSS file form the "pick asset" window (in UE4) or the select file window (for Standalone Editor) that pops up.

If you wish to remove the imported file you can click the "x" icon next to it.

Set the classes and ids of the UI elements to match the relevant classes and ids in the CSS files

The last thing that you need to do is to set the id or the class of the UI element in the Properties panel to match the styles defined in the CSS file.

For example if you have the following style defined in your CSS;

#main_text {
    font-family: sansation_light;
    text-align: center;
    color: blue;
}

and you want to apply it to a text element then you just need to set the "main_text" id in the id section of the properties panel.

Applying styles to the body

Please note that if you wish to add styles from external CSS to body of the document you need to use the "#scene" id instead of the "body" selector (using the body selector may lead unexpected behavior of the live preview of the Editor itself). So for example if you which to define in external CSS files a style to change the background of the body of the document to red you can use the following code:

#scene {
    background: red;
}

Overriding styles set in the Editor

The Editor adds styles set in it as inline style to element. If you wish to override a style already set in the editor in external CSS file you need to use the "!important" prefix. So for example if you wish to change the color of a text element with id "mainText" you can use the following style.

#mainText {
    color: #000 !important;
}