Plugin styles

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:

Controls example

Buttons

  1. Use the btn-text-default class to add Button 1 to your plugin:

    <button class="btn-text-default" style="width:75px;">Button 1</button>
    
    Button 1

    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;
    }
    
  2. 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>
    
    Button 2

    This class has the following parameters:

    .btn-text-default.submit.primary {
        color: #fff;
        background-color: #7d858c;
    }
    
  3. 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>
    
    Button 3

    This class has the following parameters:

    .btn-text-default.submit {
        font-weight: bold;
        background-color: #d8dadc;
        border: 1px solid transparent;
    }               
    
  4. 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>
    
    Edit button

    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 form-control class to add input controls to your plugin. 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;
}        
  1. 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>
    
    Textarea

    This class has the following parameters:

    textarea.form-control {
        resize: none;
    }               
    
  2. 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;">
    
    Text field
  3. 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>
    
    Checkbox

    This class has the following parameters:

    input[type='checkbox '].form-control {
        height: auto;
        margin: 0;
    }                          
    

Label controls

  1. Use the label.header class to add a header to your plugin:

    <label class="header">Header label</label>
    
    Header

    This class has the following parameters:

    label.header {
        font-weight: bold;
    }                            
    
  2. Use the label.link class to add a link to your plugin:

    <label class="link">Link label</label>
    
    Link

    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'
});
Combobox


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>
Loader

This class has the following parameters:

.asc-loader-container {
    position: relative;
}        

Adding interface elements to the YouTube plugin

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

YouTube plugin
  1. 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>
    
  2. 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%;">