ONLYOFFICE provides a style sheet for different interface elements. To adjust your plugin interface to the ONLYOFFICE style, connect the plugin.css to the index.html file with the following link:
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
All the available controls are displayed within the Controls example plugin:
Buttons
Use the btn-text-default class to add Button 1 to your plugin:
<button class="btn-text-default" style="width:75px;">Button 1</button>
This class has the following parameters:
.btn-text-default { background: #fff; border: 1px solid #cfcfcf; border-radius: 2px; color: #444444; font-size: 11px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; height: 22px; cursor: pointer; }
Use the btn-text-default.submit.primary class to add Button 2 to your plugin:
<button class="btn-text-default submit primary" style="width:75px;">Button 2</button>
This class has the following parameters:
.btn-text-default.submit.primary { color: #fff; background-color: #7d858c; }
Use the btn-text-default.submit class to add Button 3 to your plugin:
<button class="btn-text-default submit" style="width:75px;">Button 3</button>
This class has the following parameters:
.btn-text-default.submit { font-weight: bold; background-color: #d8dadc; border: 1px solid transparent; }
Use the btn-edit class to add Edit button to your plugin:
<label class="for-combo">Edit button</label><div class="btn-edit" style="display: inline-block; margin-left: 10px;"></div>
This class has the following parameters:
.btn-edit { width: 13px; height: 13px; cursor: pointer; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGZSURBVHgBfZI/y4FRGMavx7+SRQaTTQab74CVlBKL/FukDGQhEgsDNh/Apiw+gcXm70DJoEikKMUk7vec8/Yi75O7Tj2d+/4913Wuc6Tz+UyQqev1itvtBr1e/6+nkgP2+z0qlYr4DgaDsNls36HtdotisYhoNAqLxYJyuSz230HFO7DZbISC0+lEp9OBRqNBLpdDq9XCeDx+DfIz8TWZTIhZodFoRMvlknw+H8XjcdrtdrRarYgpU6/XE7MC4oMc4OB8Pie/30/ZbJba7TYlk0k6HA4CDIVCxNyQYrFYoNFoIJ1OQ5Ik5PN5WK1WpFIprNdr8H61WhVn5X2VisXg8XhoNpvRYDAgt9tNbICOxyOVSiVyuVzU7/epXq9TIBAQtrkzxeVygclkQrfbhd1uRzgcRq1Ww3A4FKparRbspyJRo9H4G4TD4RD06XQS3pkt8nq9NJ1OiSVGsVjsqfC3nvekVCrxeDxgMBgQiUTEa2g2m8hkMi8FuXtSq9VIJBK43+8iHB7GJ8BL4vY+N3U6HQqFAsxmM+TqB5Je/SVNoN18AAAAAElFTkSuQmCC'); }
Input controls
Use the textarea form element to add a text area to your plugin:
<textarea style="height:45px;width: 100%;" class="form-control" placeholder="textarea control"></textarea>
This class has the following parameters:
textarea.form-control { resize: none; }
Use the input form element with the text type to add a text field to your plugin:
<input type="text" class="form-control" placeholder="text field" style="width: 100%;margin-bottom: 2px;">
This class has the following parameters:
.form-control { border: 1px solid #cfcfcf; border-radius: 2px; box-sizing: border-box; color: #444444; font-size: 11px; height: 22px; padding: 1px 3px; -webkit-box-shadow: none; box-shadow: none; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
Use the input form element with the checkbox type to add a checkbox to your plugin:
<input type="checkbox" class="form-control" style="vertical-align: middle;"><label style="margin-left: 5px;vertical-align: middle;">Checkbox</label>
This class has the following parameters:
input[type='checkbox '].form-control { height: auto; margin: 0; }
Label controls
Use the label.header class to add a bold header to your plugin:
<label class="header">Header label</label>
This class has the following parameters:
label.header { font-weight: bold; }
Use the label.link class to add a to your plugin:
<label class="link">Link label</label>
This class has the following parameters:
label.link { border-bottom: 1px dotted #aaa; cursor: pointer; }
ComboBox
Use the select2 function to add a combo box to your plugin:
<select id="select_example" class="" ></select> $('#select_example').select2({ data : [{id:0, text:'Item 1'}, {id:1, text:'Item 2'}, {id:2, text:'Item 3'}], minimumResultsForSearch: Infinity, width : '120px' });
Loader
Use the asc-loader-container class to add a loader container to your plugin:
<div id="loader-container" class="asc-loader-container" style="margin: 10px; height: 40px; border: 1px solid #cfcfcf;"></div>
This class has the following parameters:
.asc-loader-container { position: relative; }
Let’s have a look at how to add interface elements in the ONLYOFFICE style to the YouTube plugin.
To add the simple white OK button, use the btn-text-default class (button width - 30 pixels):
<button class="btn-text-default" style="width:30px;">OK</button>
To add a field, use the form-control class (form width - 100%, i.e. it is adjusted to the width of the parent element):
<input type="text" class="form-control" style="width:100%;">
To add the dark grey Ok button, use the btn-text-default.submit.primary class (button width - 90 pixels):
<button class="btn-text-default submit primary" style="width:90px;">Ok</button>
To add the light grey Cancel button, use the btn-text-default.submit class (button width - 90 pixels):
<button class="btn-text-default submit" style="margin-left:5px; width:90px;">Cancel</button>