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:
The resulting issue:
Troubleshooting steps I took
Thanks in advance for any help you can offer!
Dawn
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.
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?
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:
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.
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.
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.
Copy link to clipboard
Copied
I just sent it. Thanks so much for your help!
Dawn
Copy link to clipboard
Copied
OK. I'll take a look. Monday latest.
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
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:
Thanks again for your help!
Dawn
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
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
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
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
Copy link to clipboard
Copied
I tried with a text editor and the CSS editor. Both worked.
I don't understand why you had the problem.