Remove Branding from LibreOffice Online or Collabora CODE

If you use either LibreOffice Online or Collabora CODE, you’ve probably noticed that a healthy chunk of the menubar area is taken up by an icon that looks like colored diamond with a folded corner as well as a block of text (if the browser window is wide enough). I think these projects are great and I believe they deserve to splash their branding within their products as they see fit but, in practice and for reasons I can’t explain, I get irritated when I see it. Because I run a two user server and the user who isn’t me never logs in, I decided to see if I could do away with this minor annoyance. I think if I ran a server with more users on it, I’d feel compelled to leave it in so that those users would know who deserves credit for creating this awesome software.

On my installation, the files are all in /usr/share/loolwsd/loleaflet/dist but they could be elsewhere depending on your distro and installation method. The bulk of the work is in the branding.css file. Pull it up in your editor of choice and find the “.logo” section. Within it, add “max-width: 0px;” and “background-size: 0px”, change “width” to 0px, and comment out the “background-image”. Closer to the bottom of the file, find the “@media only screen and (max-width: 1320px)” section. Within it, change “max-width” under “.logo” to 0px, “width” under “#toolbar-logo” to 5px, and “padding-left” under “#main-menu” to 5px. Under “.logo” within the “@media (max-width 767px)” section, change “background size” and “max-width” both to 0px.

Next, edit the loleaflet.css file. There is a “#logo.readonly” section that needs to have its “background-size” set to 0px and two “toolbar-logo” instances (one within “@media (max-width: 767px)“) that need to have their width set to 0px. Then, in the menubar.css file, find the “#main-menu” section and add “padding-left: 0px”.

The last edits are in the huge bundle.js file. Find every instance of “#toolbar-logo” and change the “width” that follows it to 0px. Find an instance of “#main-menu” that is followed by a “padding-left” and change that to 0px. The last time I did this, it was easier to look for “125px” so give that a shot.

Once you’ve made all the changes, you’ll need to restart the loolwsd systemd service. You’ll also need to purge the cached versions of the files in your browser for the changes to be picked up. They keep adding in CSS elements to control the display of the logo and the padding for the space it took up in new places so if you find there are still awkward blanks in your menubar, run “grep -rnwle 125px” in the directory to find out where to edit which files.