Modifying the HTML5 Layout's CSS

Report · Jun 23, 2020

I'm using the latest RH 2017, and I had an issue where, in RH's HTML5 layout, there was an odd right vertical bar that appeared under the TOC text like this:

Strange vertical bar

I didn't like how this looked and wanted to remove it, but I found that I couldn't turn off this particular element inside of the usual layout UI controls that RH offers. This is my solution. I decided to share it here in case anyone else might be interested in doing something similar. (I assume this solution likely also works in the classic version of RH 2019).

It turns out that this (and many other styles) is controlled by a style that is stored inside of a stylesheet that RoboHelp provides named layout-rtl.css.

If you're using the charcoal gray HTML5 layout, for example, this file stylesheet is inside of the !ScreenLayout!\Charcoal_Grey folder in your project

(When you generate your HTML5 output, this file gets placed inside of your template\Charcoal_Gray folder, so you'll likely want to modify the one in !ScreenLayout!\Charcoal_Gray so that it gets used in all your outputs that use this same layout.)

Here's the procedure to remove this right-side vertical bar:

1. Backup your .css file.

2. Locate this code inside of the .css file:

div.toc-holder li.selected {
    color: #e1e1e1;
    border-right-color: #232323;
}

3. In that command block, comment out or delete this line:

border-right-color: #232323;

Here's an example of that line commented out:

div.toc-holder li.selected {
    color: #e1e1e1;
    /* border-right-color: #232323; */
}

(Btw, I highly recommend using the excellent and free-to-use Visual Studio Code editor.)

4. Save the .css and regenerate your project.

Here's what I did to find out where to make this change:

In my generated output, I right-clicked and chose the Inspect Element shortcut menu to turn on my web tools. (That's what the shortcut menu is in Firefox. Your browser will likely have something similar. If you've never used web tools, they have many handy features to track down html-, script-, or css-related problems.)
In web tools, I used the Style Editor tab and saw the various style sheets at play.
I clicked the eyeball to show and hide various style sheets until I found the one that turned off that vertical bar.
I then located that style sheet inside of my template\Charcoal_Gray folder, un-minified it to restore white space, and then manually searched for instances of hexadecimal black color used by the bar #232323.
If I found something TOC related, I'd modify the color to something different and visible, like red, save the .css, and then I'd refresh my generated output to see if it affected that vertical bar.
Once I found where the code was located, I commented it out and noticed it went away, giving me the desired result.

Maybe this will help someone else down the road.