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:
With Collabora Online 21.11 use of
notebookbar has been deprecated use
UIModespecifies the general mode of operator (compact/classic or tabbed/notebookbar)
Spreadsheet- are prefixes to identify the component
Sidebar- are the UI parts that can be affected by this.
UIMode can be also updated after Collabora Online iframe is set up
based on a user action through a specific PostMessage call endpoint.
Various variables can be overridden for the theming. Their names, and the default values that are used in COOL 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
What it is, and how it looks
primary-elementis for selected elements on menu’s and toolbars, various bars
primary-element-lightis for selected deselected elements
primary-textis the text on these elements
border-radiusis the rounding of the selection of items on e.g. toolbars and the status bar
body-bgis the background beside the document
color-main-textis the fall-back in the case a specific element does not have its own color text value.