Recently, I tested the rather nice and friendly Microsoft Office Online suite in Linux, showcasing that you can actually use the most prevalent and de-facto standard office programs in your favorite Linux distro without having to go full Windows. This is quite important, as it has monetary and professional considerations.
But there was one thing that annoyed me – and that’s the fact the document background in the online version of Word is gray. To be more precise, it’s transparent, but the particular shade of gray (get the joke) is quite heavy on the eyes. It Ain’t Heavy, It’s My Color. I actually have another half a dozen song cliches here, but I will politely stop for your sake. Anyhow, gray color, bad, eyes tired, bad. But there isn’t a UI option or button to change this. So let me show how you can temporarily tweak this while you’re working online. In other words, we will change the Microsoft Office Online document background color to whatever you fancy. After me.
It’s HTML
At the end of the day, no matter what software is used to power the apps in the cloud, your browser still renders the stuff as HTML pages. True, you get dynamic elements and scripts, but these merely animate and connect different pieces of HTML.
So, whatever you see in your browser can be translated into divs and tables and paragraphs, and they all have their attributes and styles like color, background color, font weight, borders, margins, and such. Change these, and you will change the way objects are displayed on the screen. All modern browsers let you manipulate displayed HTML pages by a right-click > inspect element. The exact phrase may be slightly different. In a nutshell, change the HTML/CSS styles = change the page look. This is what we want to do. But.
There’s no right click!
Aha. Well, sometimes interactive applications block certain actions or clicks through some rigorous use of Javascript. This is true for mobile applications, but you may also encounter this on the desktop, too, when you load different websites. The standard right-click menu will be replaced with whatever the particular site or page wants to share.
Microsoft Office Online reserves the right-click for its own contextual menu. As we’ve seen in the review, you can use this action to copy & paste text, change language, translate text, add new comments, or make any number of stylistic edits to your work.
This means you do not actually have the option to access the standard browser right-click menu, which we require in order to inspect the HTML elements. So we need something to fix this. In essence, you can disable Javascript in your browser, using an extension like Noscript or going through the browser settings, but this will cripple the functionality of the Microsoft Office Online pages. We need something softer – and less intrusive.
An alternative way to intercept the right-click actions is to input Javascript commands directly into your browser address bar. This may work briefly, but the applications and pages may actually refresh on their own, after which your change will be invalidated. If you’re curious about this, you can try either one of the following in your address bar:
javascript:void(document.oncontextmenu=null);
javascript:void(window.oncontextmenu=null);
There are several browser extensions, for Chrome and Firefox, which allow you to restore the right-click functionality. One such add-on is Enable Right Click and Copy. This little extension does not require a restart after installation, so it’s quite trivial to setup and use.
Right-click, change color property
Now that we have the standard browser right-click menu available, let us inspect the page background element. Place the mouse cursor anywhere on that gray document, right click, and let’s do some basic hackerology.
The next part may look a little confusing to less skilled people. Once you click the inspect option, you will get a very complex menu that lets you debug and overview the backend side of your page. Namely, all the gory details you take for granted, including network and memory usage, performance, error messages, but also the HTML code. Wherever you have clicked will be highlighted in the left pane, and then on the right-side, you will have a breakdown of the CSS rules that apply to the selected element.
In this particular case, the background of the page is defined by an HTML div of the OutlineContent class, with the background color set to transparent. What you need to do is place your mouse cursor into the div.OutlineContent part in the right pane, click on the background-color: transparent line, and change the word transparent to white, or any other color you find suitable. As soon as you hit Enter, the color will change.
This is a temporary fix
It is very important to note that this is NOT a permanent fix. Refresh the page with F5 and your style edit will be gone. Download the document and open it in either LibreOffice or Microsoft Office, and it will have the standard white background regardless of your games. This is only a cosmetic change, and only in YOUR browser. Once the page is loaded, it’s loaded, and the server part is done. Until you fully reload the contents of the page, the temporary color you’ve set will be applicable. Once the page is rendered fresh, that fix will be gone.
This is not unique to Microsoft Office Online. You can make these changes on any which website, especially if you do not like certain layouts or colors. Quite handy if you must use and interact with the website, but you find some of its presentation layer tricky.
If you feel like you don’t need the tweak anymore, or you wish the restore the app-specific right-click menu, disable the browser extension and reload the page. You will be back to the same state you started with. Simple, fully reversible, non-intrusive. And possibly may give you a few more hours of fun time each day, as your eyes do not get tired staring at that gray color so much.
Conclusion
This short tutorial teachers two important lessons: 1) a few bits on HTML, how it works, how pages are loaded and rendered, and in essence what Web apps do 2) a simple and elegant way to tweak the look & feel of the Microsoft Office Online suite so it’s easier for you to work and interact with your documents for longer periods of time by using a more ergonomically friendly white background color instead of the default transparency.
Perhaps one day Microsoft will include the option to make the necessary background color changes inside the UI, the same way it exists in the standard desktop suite. Until that happens, you have several different ways to adjust the color to your needs. If you value your eyes, you will definitely consider this possibly trivial but important little hack. Well, hopefully you’ve learned something new today. Happy typing.