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

Community Beginner ,
Oct 12, 2017 Oct 12, 2017

Copy link to clipboard

Copied

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

TOPICS
HTML5 layout

Views

429

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 13, 2017 Oct 13, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 13, 2017 Oct 13, 2017

Copy link to clipboard

Copied

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?

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 13, 2017 Oct 13, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 13, 2017 Oct 13, 2017

Copy link to clipboard

Copied

Without the layout.css change, is that text blue on a tablet or phone?

Change the window size to see it change as the window resizes.

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 13, 2017 Oct 13, 2017

Copy link to clipboard

Copied

I'll have to wait until our IT guy is back in the office on Monday so he can load it to the server for me to test that unaltered screen layout out on a REAL phone or tablet. In the Preview from the layout dialog, I switched from desktop to phone to tablet, and all were blue.

I tested Help for another product of ours that we do have live on the web, and the issue was not present. This is a customized screen layout with no resizing for the logo.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 13, 2017 Oct 13, 2017

Copy link to clipboard

Copied

I don't think putting it on the server will make a difference but worth a try.

Send me the one topic project with the changed layout CSS. See the Contact

page on my site.

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 13, 2017 Oct 13, 2017

Copy link to clipboard

Copied

I just sent it. Thanks so much for your help!

Dawn

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 13, 2017 Oct 13, 2017

Copy link to clipboard

Copied

OK. I'll take a look. Monday latest.

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 14, 2017 Oct 14, 2017

Copy link to clipboard

Copied

Well I've got it working but it's bizarre.

I looked at what you generated and it was as you describe.

I then generated that output on my machine, no change.

Then I then imported the layout afresh with a minor name change. Without editing it in any way, I then generated again and it all worked fine, no colour change. What surprised my is the new layout had your logo in it. I thought RoboHelp would create a new copy of all the files but it brought in your logo.

At that point I imported another copy of the layout and this time I amended to width as you did but no discernible difference.

On the face of it, all you need to do is import the layout again and not edit the CSS.

One thing I did notice is that if I open your layout.css in a style editor or a text editor, it is neatly laid out whereas the newly imported layout.css files show the information all on one line.

To be clear, I am talking about the layout.css in the layout source folder, not in the output and that does seem to be the one you edited.

What operating system are you using and what did you use to edit the layout.css?

If what I have suggested does not work for you, I can send you the copy that is working for me.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

Peter,

Thanks so much for working with me to figure out how to resolve this issue!

I’m a little confused, though: The file I sent you used the Charcoal Grey layout template supplied by Robohelp, with one change only: I widened the space for the logo.

It sounds as if you’re under the impression that the file I sent you contains our logo, but it doesn’t. That would explain why the fresh layout you imported had the same logo as the file I sent you.

Please correct me if I’m mistaken about this or misunderstanding.

I’m also confused about this statement from your response: “At that point I imported another copy of the layout and this time I amended to width as you did but no discernible difference.”

Does this mean, the TOC color didn’t change to blue when you altered the width of the logo placeholder? If so, yes, please do send me the file that worked for you, and I’ll pop in our logo.

It sounds like you’re advising me to import the Robohelp layout again and not edit the .css. But I have to edit it to widen the logo placeholder in order to fit our logo (this is the one change that created the issue). If I don’t do this, the logo is cut off on both sides, and if I make the small enough to fit the space in the header, it’s too small. 

In answer to your questions:

  • I’m using Windows 7.
  • And I edited the layout.css in the output setup pod as shown below:

Thanks again for your help!

Dawn

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

It didn't change to blue when I changed the width to 15 but then again, from the sound if it I didn't have your logo. I'm thinking that should look something like SIS with a red background.

It might be that changing the width setting alone doesn't have an impact until you use a logo with that width.

I think it would be easier if you sent me the logo. Attach it to an email.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

Hi Peter,

I just imported the .slz file you created into my project, and it worked! Looks beautiful! I can't thank you enough!

For future reference, and for the benefit of others in the forum, what did you do differently than what I described doing in the post above with the screen shots?

Dawn

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

Absolutely nothing different to what is in Post 9 in this thread other than change the width when I was working with the correct logo.

Do note what I said offline about the logo not working when in tablet mode or on a PC if the window width changes it to tablet mode.

If you are satisfied the help will not be viewed on a tablet, you could tweak the device sizes to effectively always show the same layout. That does of course defeat the purpose of responsive layouts.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

I will work with the tablet mode to see if I can get it right, but it's highly unlikely that any of our users will view help on a tablet.

So, just to be sure I'm clear: you edited the width of the logo placeholder on layout.css using the style editor that's available in the output setup pod? If so, it sounds like my experience was a fluke, because that's what I did and got a bad result?

I ask because I saw other, seemingly more complicated ways in Adobe documentation of editing the layout, and want to make sure I'm not using the wrong method. Thanks!

Dawn

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

LATEST

I tried with a text editor and the CSS editor. Both worked.

I don't understand why you had the problem.

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation