Plugin styles

To bring the connected plugin to the ONLYOFFICE editor style, you can use the associated styles. They are connected to the plugin in the index.html file.

The plugin.css code contains ONLYOFFICE styles for different interface elements. Stylesheet can be connected to the index.html file in the following way:

<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">

After that you can add interface elements to your plugins in the ONLYOFFICE style.

Adding interface elements to the plugin

Have a look at the YouTube plugin interface as an example of using ONLYOFFICE styles.

YouTube plugin

To add a button in the ONLYOFFICE style, you need to use the btn-text-default class. The btn-text-default.primary class defines a button with a dark background and indicates that this button is important.

The following code adds the OK button to the plugin in the ONLYOFFICE style (button width - 30 pixels):
```
<button class="btn-text-default" style="width:30px;">OK</button>
```
To add a form in the ONLYOFFICE style, you need to use the form-control class.

The following code adds the form to the plugin in the ONLYOFFICE style (form width - 100%, i.e. it is adjusted to the width of the parent element):
```
<input type="text" class="form-control" style="width:100%;">
```