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. Possible values are
classicis deprecated) or
Spreadsheet- are prefixes to identify the component
Sidebar- are the UI parts that can be affected by this. These are boolean. For example
TextRuler=falsewill hide the ruler in Writer.
SaveAsModewhen set to
groupwill 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.
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 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;
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.