Problem seeing text in Index and TOC screens when viewed in half screen

[Judy251277025o4w]

In the web help I created, the formatting for the Index and TOC screens which I designed for the skin looks fine in Full Screen but in Tablet mode (half screen), the background is white so the light grey text can't be seen. I didn't format the skin for the half screen; I didn't know it would be different for the Tablet (half screen) mode.  I see this is RoboHelp's default formatting for the half screen Index and TOC screens.

How can the background be changed in the skin so that the text is visible?

Judy

[Jeff_Coatsworth]

What specific version of RH are you running? What skin or preset are you using?

[Judy251277025o4w]

RoboHelp version 2019

The skin I designed based on the default skin for Responsive HTML 5 output.

Is that what you wanted to know?

I designed the skin for the full screen but not the half screen; how do I design/format that to change the background from white to black like for the full screen?

[Jeff_Coatsworth]

New UI or Classic? All patched up (I think RH2019's last patch was 14?)? You must have started with some named skin/template/preset and then customized it (how?). Does the content work with a "non-customized" skin? Because it's responsive, it's going to change based on screen size - those "breaks" are controlled by the CSS you're using. Have you had a look at Peter's site (grainge.org) for help?

[Amebr]

The specific version of Robohelp and the specific skin you started with are important because the possible solutions will be very different depending on the combination of both.

Because you used the word "skin" I'm going to assume you're using New UI and because the theme is dark I'm going to assume you started with Charcoal Grey. 

In New UI in the skin editor, you can switch between desktop, phone and tablet using the icons at the top of the screen.

There are some customisation options, however the options availabe in Responsive skins is very limited. If you can't find a setting to make the font readable in tablet mode you will need to use the browser developer tools to inspect the output code to find the style that controls what you want to change. Let us know if you can't find a suitable setting in the skin you're using and you can't figure out the style you need from the developer tools and we can have a look in more detail.

[Amebr]

I should also add that if you can, you should look at switching to Frameless output as that has far more skin customisation options. It also seems to be where Adobe is focussing their development (I'm not part of Adobe so this is just an observation.)

If you are using context sensitive help changing may have implications for the help calls though, so if this is your situation you should check Peter's site for the details of the changes your developers may need to make (depending on how they set up the context sensitive help calls initially).

[Judy251277025o4w]

I updated RoboHelp but still had the problem.

Yes, I am using the New UIand the Charcoal Grey skin which I customized a bit.

I read Peter Graing's site and didn't find an answer to my problem nor was there a solution with the Frameless outtput (or maybe I didn't see one). I have never used it before.

I am not a developer and don't know how to use the developer tools so that won't help me.

If there is a way to help, I would appreciate knowing. There is a release soon and this has to be fixed by then.

[Peter Grainge]

@Judy251277025o4w Updated to what? Too many times we see someone say updated or latest version but mean last update of an old version or a newer version but not its latest update.

You have applied some customisation but is that to both the desktop and tablet settings? Changes can be made to separately by clicking these icons.

Maybe you edited just the desktop?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Judy251277025o4w]

Hi Peter:

I updated to RoboHelp New UI 2019.0.14.

I understand the Charcoal Grey Skin is problematic in the Tablet and Mobile views.

I don't quite see where I can customize those views in the skin without affecting the Desktop view.

I would appreciate it if you could point that out to me.

Someone suggested using the Azure Blue skin and customizing it to my color scheme; apparently, the Tablet and Mobile views aren't problematic.

I appreciate your thoughts on the matter.

[Amebr]

I suggested switching to Frameless output as the skin is far more customisable than Responsive and it doesn't have the problem you're experiencing as far as I can see.

I played with the Charcoal Grey skin in RH2019 Update 14. It seems to be really bugged. For example the Desktop Sidebar Background colour doesn't flow through to the tablet and mobile views (those two views are always a light colour with no way to change.). I also can't get the Layout > User Assets section to display (I'm sure I managed once after making some customisations, but I can't get it to happen now.)

I would suggest you try customising the Azure Blue skin to your liking. The sidebar background colour defined for desktop seems to flow through to the mobile and tablet views which I think will resolve the issue you're seeing in the Charcoal Grey layout.

[Judy251277025o4w]

OK. If I understand you correctly, customize the Azure Blue skin to the company's colors of black, gray and white and I won't have the problem OR not use those colors at all since in tablet and mobile view they aren't readable?

[Amebr]

I think the light background problem only affects the Charcoal Grey skin. I didn't conduct a thorough test, though, just changed the sidebar background colour and generated, then checked Index tab in the mobile and tablet sized screens

[Peter Grainge]

Reading your original post again, you hadn't done quite as much customising as I thought. Looking at the editor it appears customising the background colour is not an option. There may be back door ways that @Amebr has posted about in the past, not sure about background.

Overall though I agree 100% with @Amebr that frameless is a better way to go. Check with your developers though if there are context sensitive calls using URLs. They will need to change as documented in RH2019 Calling Context Sensitive Help (grainge.org).

RoboHelp is now on version 2022 and you should consider updating to that as various features and fixes have been added. It's a subscription model and maybe you are on a perpetual licence?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Judy251277025o4w]

Hi Peter:

This help file does not have contact sensitive help.

I haven't never use the Frameless output. Is the skin configured differently?

As far as the Responsive HTML, all the tabs as are OK except for the Index tab. If I change the font text to black, then it is not visible in the Desktop view on the black background.

[Peter Grainge]

You simply create whichever frameless template you prefer and create a preset for a frameless output, selecting your chosen template. The difference being there are many more options in the template editor.

Skins became templates in 2022.

The RoboHelp Tour Introduction (grainge.org) has more information about the outputs.

Just to repeat, upgrading to 2022 means you will need to take out a subscription plan. If your 2019 version is on a subscription, the upgrade is free. Otherwise you will need to change from the perpetual licence to a subscription.

2019 does have frameless outputs but in 2022 there are bug fixes and new features. I don't have a list before you ask. 🙂

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.