Skip to main content
D
dawno97706509
Known Participant
October 12, 2017
Question

TOC text turns blue when I edit the logo placeholder on the header on layout.css

  • October 12, 2017
  • 1 reply
  • 1150 views

Hello!

I would be grateful for any insight into this issue I'm having:

(I’m using Robohelp 2015 to generate responsive HTML5 output.) In order to correct an outdated & stretched logo on our customized responsive HTML5 screen layout, I edited the layout.css to resize the logo placeholder to fit our logo, and a new problem was created: The font color of the TOC changed from white to blue, even though the Layout Customization dialog still showed “white” as the selection for the font color, and I can't change it.

It shows blue when previewed from the Layout Customization dialog in the Output set up pod, and displays as a different color blue when I generate the responsive HTML5 output. I tried multiple times to change the color by selecting white on the Layout Customization dialog, but it doesn’t work. I tried using both the old and new logos and different image files, to see if file corruption was causing the problem, but the issue occurs when I change the properties of the space for the logo on the header-no matter whether I change the image or which image I use.

Steps I initially took that resulted in the issue:

  1. In the Ouput Setup pod, I edited layout.css.
    1. For this value: body.media-desktop div.header div logo, I changed the Width of the logo placeholder from 7em to 15em.
  2. On the Layout Customization dialog, I browsed to my computer and selected an updated version of our company logo.

The resulting issue:

  1. The logo placeholder on the header is the right size: looks great! Title looks great, too.
  2. But, the font color on the TOC when a preview is generated changed in the following ways:
    1. When I click Save and Preview from the Layout Customization dialog, the TOC font is a mix of dusty blue and pink, even though the properties panel on the dialog still shows white, which was the color I selected.
    2. I tried selecting different colors from the dialog, but the font still shows dusty blue and pink in the preview.
  3. When I generate the responsive HTML5 file, the TOC color shows up as a neon blue color.

Troubleshooting steps I took

  1. Tried using the original logo and other image files—determined that the issue happens regardless of which image file I use, or whether I change out the image at all.
  2. Tried using the original, unaltered file (TOC font is white, as selected), left the logo intact, but the TOC font color changed when I edited the properties of the logo spacer.
  3. It happens when I change the width, height, margins, borders, etc. of the logo spacer—no matter what value I change any of these to.

Thanks in advance for any help you can offer!

Dawn

This topic has been closed for replies.

1 reply

D
dawno97706509Author
Known Participant
October 13, 2017

Update to my original post: I tried creating a new screen layout and adjusted the logo placeholder properties in the same manner described above and got the same result.

I used the Azure template (the other tech writer had used the Charcoal one when she created the one I wrote in about). So I don't think it's a quirk of that particular template.

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
October 13, 2017

Create a new project and just leave it with the one topic it creates and

use the default.css. Now make your change. Does that then have the same

problem?

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
D
dawno97706509Author
Known Participant
October 13, 2017

Hi Peter,

I just now did what you suggested, and the result was the same as described above.

Here's exactly what I did:

  1. created a new project (using Robohelp defaults
  2. put the one topic that got created by Robohelp in the Toc
  3. Generated responsive HTML5 output, was forced to select a screen layout. Chose Charcoal Gray from the gallery.
  4. The TOC text was white, as expected.
  5. I then edited the layout.css file for Charcoal gray to make the logo placeholder wider and the TOC text turned blue as described above, both in the Save and Preview from the dialog and in the generated output.
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices