Font colors in Skins

[Gottkehaskamp]

I am writing an application with two different color schemes (selected by the user): "Light font on dark background" and "dark font on light background".
My embedded HTML-Helpview, based on CHM, should have the same behavior.

I am currently trying out different help authoring tools and with Help&Manuel it is quite simple to implement different skins for the dark and light background. But is ist possible to integrate font styles into the skins? Because for the dark background I need light font colors, for the light background I need dark font colors.

Or do I have to change every font style before each compiling?

Kind regards
Raimund

[Tim Green]

Hi Raimund,

The problem here is that you can only have one set of project styles for screen-based help. Help+Manual does allow you to have two sets of definitions for each style, but only for two groups of output formats: Screen formats (CHM, WebHelp, eWriter) and print-based formats (PDF, DOCX, ePub, Kindle).

You can have an external stylesheet using the style repository function, but that is for sharing styles between multiple projects. Here too, you can't just switch stylesheets: Once you attach a style repository to a project, its styles are copied into the project so that they can also be used when the repository is not available -- for example when you send the project to a colleague for editing.

However, there is still a way to solve your problem, but it does involve a little manual editing. What you need to do is add your own CSS file to the CHM skin to redefine only the colors of the text styles for that skin, and reference it after the <%STYLESHEET%> variable in the page template. Then it will redefine the colors but all other style attributes will be as set in the project.

In the CSS output the text and paragraph attributes are assigned to separate classes based on the style names in your project. You need to add your color changes to the font classes, whose names are created using the syntax f_StyleName (without spaces!) and applied to span elements. The easiest way to see how this is applied is to publish to CHM with your skin with the option to delete the temporary files turned off. Then locate the CSS file (usually called something like default.css) in the folder \~tmpchm in your project folder.

For example, if you have a Body Text style you want to be white, your class definition to change its color would be:

Code: Select all

span.f_BodyText {
   color: #ffffff;
}

and so on...

You then save your CSS file with an HTML-compatible name, for example darkmode.css, and add it to the Baggage Files section of the skin. To do this you edit the skin in Help+Manual, then navigate down to Project Files > Baggage Files in the Project Explorer on the left and add it with the Add File option in the Project tab. If you get warned that the filename already exists in the skin you need to change the name of your file!

Then in the Project Explorer go to Configuration > HTML Page Templates > Default and locate this line of code in the source code:

Code: Select all

<link type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />

Insert a reference to your CSS file directly after it, like this:

Code: Select all

<link type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />
<link type="text/css" href="darkmode.css" rel="stylesheet" />

That's it. You will need to update your CSS file when you add styles to your project.

[Gottkehaskamp]

Thanks for the quick response, it works really fine.

Kind regards,
Raimund