Copy link to clipboard
Copied
Using RoboHelp 2020.5.71
Our CSS files contain the :root{} pseudo class to define our corporate color palette, and the rest of the CSS relies on these color variables, rather than the Hex codes. Everything looked great until I upgraded to Update 5. Now, none of the color variables are accessible in the generated HTML!
(Oddly, the colors come through in the PDF. We use a different CSS for the PDF output, but the colors are defined exactly the same way.)
Using the browser's inspector, I see that all the color variables are "undefined," even though the css shows them right at the top -- same as they were before the update.
The only thing that changed was RoboHelp itself. Since applying the update, I haven't changed the web css. Before I log a bug, I wanted to ask here: Has this happened to anyone else?
Here's what the top of my css looks like:
:root {
--dmrc_black: #393536;
--dmrc_dkgray: #58585b;
--dmrc_medgray: #939597;
--dmrc_ltgray: #d1d2d4;
--dmrc_dkwhite: #E6E7E8;
--dmrc_white: #f1f1f2;
--dmrc_blueblack: #051c2c;
--dmrc_navy: #13274a;
--dmrc_dkblue: #1b365d;
--dmrc_blue: #005a96;
--dmrc_ltblue: #41b6e6;
--dmrc_paleblue: #b9d9eb;
--dmrc_ecru: #e5dabe;
--dmrc_orange: #cb6015;
--dmrc_red: #ee1532;
--dmrc_gold: #ff9e15;
--dmrc_dkgreen: #2c704f;
--dmrc_ltgreen: #8fc53c;
}
And my classes look something like this:
p.attn_tip {
background-color: var(--dmrc_dkgreen);
padding: 25px;
border-radius: 5px;
color: white;
font-style: normal;
}
Ideas? I'm at a loss.
Copy link to clipboard
Copied
Perhaps check the css file in the output using a text editor, to see if the generation process has mangled something.
Copy link to clipboard
Copied
Tough one …
I have a hunch: RoboHelp pushes custom CSS into the .RH-LAYOUT-CENTERPANEL-topic-box
and .RH-LAYOUT-FOOTER-container
to separate it from the "framework" around the topic itself. And then your :root
selector does not work anymore.
I rebuilt this with your code and the custom CSS looks like this in the output:
.RH-LAYOUT-CENTERPANEL-topic-box :root, .RH-LAYOUT-FOOTER-container :root {
--dmrc_black: #393536;
--dmrc_dkgray: #58585b;
--dmrc_medgray: #939597;
--dmrc_ltgray: #d1d2d4;
--dmrc_dkwhite: #E6E7E8;
--dmrc_white: #f1f1f2;
--dmrc_blueblack: #051c2c;
--dmrc_navy: #13274a;
--dmrc_dkblue: #1b365d;
--dmrc_blue: #005a96;
--dmrc_ltblue: #41b6e6;
--dmrc_paleblue: #b9d9eb;
--dmrc_ecru: #e5dabe;
--dmrc_orange: #cb6015;
--dmrc_red: #ee1532;
--dmrc_gold: #ff9e15;
--dmrc_dkgreen: #2c704f;
--dmrc_ltgreen: #8fc53c;
}
.RH-LAYOUT-CENTERPANEL-topic-box p.attn_tip, .RH-LAYOUT-FOOTER-container p.attn_tip {
background-color: var(--dmrc_dkgreen);
padding: 25px;
border-radius: 5px;
color: white;
font-style: normal;
}
Note the .RH-LAYOUT-CENTERPANEL-topic-box
added to your CSS.
By the way, if I add class="RH-LAYOUT-CENTERPANEL-topic-box"
to a topic's body element, it starts working …
I have not completely understood how to solve this, but maybe we are one step closer now … Maybe you need to put the :root manually into the CSS of the skin? My gut feeling is this could solve it.
Copy link to clipboard
Copied
Thank you for the replies!
The :root{} pseudo-class with all my colors worked fine in Update 4. It only stopped working after I installed Update 5 and rebuilt all my projects. I wish I'd kept one from Update 4 so I could compare the CSS! Too confident, I suppose. (Can I back out the Update 5, or am I committed forever?)
How would I edit the CSS for the skin? I didn't find any css files in the project\publish\skins\frameless folder, just image files.
I submitted a bug report: RH-9448 | Tracker (adobe.com) (update 5 was not an option for selecting the build, so I had to improvise). If you're of a mind to vote for it, I'd appreciate the visibility! I do need to get this fixed.
Thanks!
Copy link to clipboard
Copied
Oops. That was me ^ Wrong login.
Copy link to clipboard
Copied
To add it to your skin, create a css file with your colour variables and add it in the User Assets section (the location of this section may depend on your skin).
To downgrade, I think you have to uninstall RH completely , then install update 4. You can download the updates here: https://www.adobe.com/support/robohelp/downloads.html
Copy link to clipboard
Copied
Thank you! That's helpful to know.
Copy link to clipboard
Copied
Hi,
Issue is there in Update 5 and we are able to reproduce it. We will fix it in upcoming updates.
Workaround is to move the variables from :root to body{} and regenerating Frameless output. Then variables should resolve fine. Can you please give it a try and let us know how it goes?
Thanks for your help and patience.
Regards,
Surbhi Maheshwari
Copy link to clipboard
Copied
Ahh! Thank you! I moved the color variables to the body {} definition and it works just fine!