Theming of Collabora Online

How that works and how it looks

Customize it and make it feel at home with your integration. In Collabora Online some parts of the user interface can be hidden or shown. If you are a Collabora partner or a customer running your own installation, you can also change the theming of Collabora Online. And it can be done very easily too; just by setting a couple of CSS variables through your integration. Here’s how that works and how it looks.

User Interface modifications

Some parts of the user interface can be hidden or shown based or what the integration needs. This is controlled by:

<input name="ui_defaults" value="VALUES" type="hidden"/>

during sending the form when the iframe is being set up (similarly as the access_token). The VALUES can have a form like:

UIMode=notebookbar;TextRuler=false;PresentationStatusbar=false;SpreadsheetSidebar=false

With Collabora Online 21.11 use of notebookbar has been deprecated use tabbed:

UIMode=tabbed;TextRuler=false;PresentationStatusbar=false;SpreadsheetSidebar=false

where the:

  • UIMode specifies the general mode of operator. Possible values are compact (classic is deprecated) or tabbed (notebookbar is deprecated).

  • Text, Presentation or Spreadsheet - are prefixes to identify the component

  • Ruler, Statusbar, Sidebar - are the UI parts that can be affected by this. These are boolean. For example TextRuler=false will hide the ruler in Writer.

  • SaveAsMode when set to group will set the layout of the “Save As…” command menu to not be a submenu, but rather list the different format as part of the main menu. Any other value is ignored. By default the different formats are in a submenu from the “Save As…” command.

  • SavedUIState set to false allow forcing the above changes if the user had customised the UI by bypassing the saved state. The use of this option should be limited for case where it’s important to always have this default UI.

  • OnscreenKeyboardHint is tri-state. When set to true, assume the device has an onscreen keyboard. When set to false assume the device does not have an onscreen keyboard. When unset, the automatic detection is done. This should only used for specific embedding situation with specific devices.

  • TouchscreenHint works like OnscreenKeyboardHint but force Collabora Online to think it is running on a touch device. This really should only be used as a last resort as well.

The UIMode can be also updated after Collabora Online iframe is set up based on a user action through a specific PostMessage call endpoint.

Extra hidden field in COOL frame integration

In the COOL frame in the integration there is a form where you pass an access_token to COOL for loading the valid document. For your theming you have to add another hidden field to the form named css_variables. Then the css variables and their values for the theming can be passed, formatted as shown in the example below.

Content of hidden field “css_variables”

The default values of various css variables can be overridden by sending them in the post message in this format:

<input name="css_variables" value="--co-color-main-text=#000;--co-body-bg=#FFF;--co-txt-accent=#2e1a47;" type="hidden"/>

Note that the variables in the form are formatted slightly different from how they look in the CSS file! The colon : found in CSS is replaced by an equal sign =.

You can also test your colours by adjusting the COOL url and append those values, so they can be passed via get and so you can see your changes instantaneously. Example:

http://localhost:9980/browser/debug.html?file_path=/cool/test/data/hello-world.odt&css_variables=--co-primary-element%3Dred;--co-body-bg%3D%23FDFDFD

Available variables

Various variables can be overridden for the theming. Their names, and the default values that are used in COOL with the branding package are:

--co-primary-element: #4c566a;
--co-primary-element-light: #706aab;
--co-txt-accent: #2e1a47;
--co-primary-text: #ffffff;
--co-border-radius: 3px;
--co-body-bg: #ffffff;
--co-color-main-text: #000000;

These are only for the branded versions of COOL. If you are using the CODE version of COOL, you can refer to the color palettes CSS file, regular or dark to find which variables you can override.

What it is, and how it looks

map to buried treasure

Theme it via CSS Variables

  1. primary-element is for selected elements on menu’s and toolbars, various bars

  2. primary-element-light is for selected deselected elements

  3. txt-accent

  4. primary-text is the text on these elements

  5. border-radius is the rounding of the selection of items on e.g. toolbars and the status bar

  6. body-bg is the background beside the document

  7. color-main-text is the fall-back in the case a specific element does not have its own color text value.

map to buried treasure

Tweak it and make it feel at home with your own integration