Robohelp 2020 (Update4): Layout.css and Userstyles.css

[Siju George]

Hi

I made some edits to the layout.css and userstyles.css in the Output folder. After generating a Frameless output again, I noticed that all my changes disappeared. I just realized that once an output is generated the Output folder gets replaced with the new changes.

Which are the files that I need to edit so that the changes remain even after generating multiple outputs. The edits were done to the Header, Toolbar, Toolbar box and left panel containers.

[Amebr]

You need to make as many changes as possible using the skin editor. For any changes not possible there, you need to create a custom css file with the additional changes, and add it in the User Assets section of the skin.

I *think* once you make changes to the skin a LayoutDiff.css file shows up in the skin folder in Windows Explorer, and you could add additional changes to that. However, I'm never sure when Adobe controlled files will change, so it might be safer to do your own custom css that you can be sure won't be touched except by you.

[Amebr]

I should also clarify that if you make changes to the LayoutDiff.css file, you don't need to add that in the User Assets section of the skin. As it's Adobe controlled, it'll just be picked up by the build process.

[Siju George]

Thank you Amebr

I'll try this and get back to you. I just have one more question.

If I add the custom.css to the User Assets section on the Skin, will Robohelp know that it must use the properties specified in custom.css?

[Amebr]

Yep, if you add it to the skin it will be added in all the needed spots. There might be a few places you need to add !important to the custom.css, but I think it should be pretty rare that you need to do that.

[Siju George]

Hi Amebr

Does this mean, I can have two CSS files, one LayoutDiff.css and the other custom.css? 

• The Layoutdiff.css can have the changes that is possible from the RH UI.
• The Custom.css which can have some additional changes to the Skin which is not possible from the RH UI. 

[Priya22220589zdsc]

I can understand there are two css to edit it. But where do we find these css in the downloaded version. I find only default css under Assets section. Can you help me in understanding the css?

[Amebr]

Technically you'll have more than that, but in effect, yes.

All you'll see in RH is the custom css in the User Assets section, everything else will pretty much be hidden behind the scenes.

[Amebr]

I think the LayoutDiff.css exists for some skins, but not all, and you have to view the skin folder in Windows Explorer to find it. If you right-click on the name of the skin you're using, then select Show in Explorer you can get there easily.

Does that help?

[Amebr]

The other stylesheet mentioned is a custom one. You can call it anything you'd like. Once you add it to the User Assets section in the skin you are using, it's copied into the skin folder.