Zhixian's Tech Blog

2019-01-09

Fixing Open Live Writer HTML styles toolbar

Filed under: computing, software, windows — Tags: , , , — Zhixian @ 22:59:01 pm

This blog post relates to fixing HTML styles toolbar of a Windows blogging application call Open Live Writer.   

Disclaimer: This is not a foolproof or perfect fix. I only encounter this on a new installation in a new PC lately.
I do think this issue is highly related to the CSS theme used in the blog.
However, it remains unclear as to what is the actual cause of this problem. This issue has been reported in GitHub here.

Symptoms

After you installed Open Live Writer, you may notice that the HTML styles portion of the toolbar looks like the following:

open-live-writer corrupted HTML styles toolbar

Solution

There is no official solution for fixing this issue.
But you may be able to get rid of those blocks overlaying the HTML styles.

Disclaimer: This is not the correct solution. It merely provides a way to get rid of the blocks.

Assumptions

I assumed:

  1. You know how to run Windows File Explorer and know how to navigate to a folder location.
  2. You know how to download a zip file.
  3. You know how to extract files from a zip file.
  4. You know how to make backup copies of files.

Steps overview

  1. Download a dummy set of HTML style images from the zip file (Open-Live-Writer HTML Styles.zip) here.
    This is a set of HTML styles images based on the WordPress theme “Twenty Nineteen”.
  2. Go to  Open Live Writer’s blog templates folder (at %APPDATA%\OpenLiveWriter\blogtemplates)
    This folder contains multiple folders.
  3. In each folder, there would be a set of bitmap (BMP) images titled P, H1, H2,… to H6.
    Go through each folder until you find the set of images that matches what you see in your Open Live Writer toolbar.
  4. Make a backup copy of the images (in case, you don’t like this fix).
  5. Extract the images from zip file downloaded from step 1 and store them in this folder.
  6. Close Open Live Writer. You should see the changes when you restart Open Live Writer.

Steps details

1. Download a dummy set of HTML style images

I’m skipping this step.
I assume you know how to download a zip file from Internet.

2. Go to  Open Live Writer’s blog templates folder (at %APPDATA%\OpenLiveWriter\blogtemplates)

Open Windows FIle Explorer
Enter “%APPDATA%\OpenLiveWriter\blogtemplates” in the navigation bar.

file-explorer-01

You may see multiple folders in this folder.
Each folder represents a blog that you have registered with Open Live Writer.
So the following image implies that I have 3 blogs registered with Open Live Writer.

image

3. Going through each folder until I find the folder with images similar to what I see in the toolbar.

If you could not see the preview of the image files in the folder, try setting the view layout to “Large icons”.

image

4. Making backup of the images.

I’m skipping this step here.
I assumed you know how to do this.

5. Extract the images from zip file downloaded from step 1 and store them in this folder.

After replacing the image files, your folder should look something like the below:

image

6. Restart Open Live Writer,

After restarting Open Live Writer, your HTML styles toolbar should look something like the below image:

open-live-writer fixed HTML styles toolbar

Advertisements

Blog at WordPress.com.