Frameless: Change CSS of topics to match selected template

Question

Hi!I've got one big help RH2022.4 project with about 650 pages that is used as context-sensitive help in the energy planning tool I develop (https://leap.sei.org). I've succesfully created frameless output help, and also worked out how to show those pages embeedded within my app. Here's the issue.  My app can be used in both light and dark modes, so I'd like to be able to direct context sensitive help requests to either a light or dark version of the help pages to match the look of the app.  I can easily direct to one or the other version via code in my app that just detects if it is in light or dark mode and then just adjust the base URLs of the help files. I've almost got this working by creating two different Frameless templates attached to two different named Frameless output presets (named something like App_light and App_Dark).  I'm just stuck on how to have the css used by each topic page adapt acordingly. I currently have one css file (default.css) attached to all the pages and that has some coloring in it (e.g. the colors of the H1, H2 headings & the colors of hyperlinks.   For maintainability, I really only want to have only only copy of the topic pages. Currently , each page links the same default.css style sheet.  Is there a way to have two style sheets (e.g. default_light.css, default_dark.css) and have outputs use those automatically when generating the two different versions of the output?  Maybe I'm not using the CSS files properly - e.g. perhaps the colors can be specified outside the style sheets? Thanks for any guidance! Charlie HeapsSEI

Achal__ · Accepted Answer

Hi @charlieh75520172 , I am also working on a project similar to yours, and what I have done is I have a single version of the topics with two different CSS:

css_light and
css_dark)

I have two Output Preset:

output_dark and
output_light.

Similarly, I've got two Topic layouts in the Author tab

master_dark (applied dark stylesheet css_dark) and
master_light (applied light stylesheet css_light).

Under the Output tab,

for generating the dark output, I've got dark_preset in which I've selected Topic Layouts as "master_dark,
Similarly, for light, the Topic Layout is "master_light"

Now, we can generate two different outputs with two different styles using the same source. Applying the CSS dynamically to one single topic in our output repository is not feasible I think.

charlieh75520172 · Answer

Answering my own question.  So I decided to just have two css files called deafult_L.css and default_D.css and then just copy them over the one produced when output is generated.  I just have to remember to do that before distributing the output.  The output also contains a gzip (.gz) version of the css file, which I assume is created to make the help run quicker.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded