Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


root pseudo class no longer working for Frameless HTML output

Participant ,
Jun 15, 2021 Jun 15, 2021

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.

Views

130

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Jun 16, 2021 Jun 16, 2021
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

Likes

Translate

Translate
Adobe Community Professional ,
Jun 15, 2021 Jun 15, 2021

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.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 16, 2021 Jun 16, 2021

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 16, 2021 Jun 16, 2021

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 16, 2021 Jun 16, 2021

Copy link to clipboard

Copied

Oops. That was me ^ Wrong login.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 16, 2021 Jun 16, 2021

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 17, 2021 Jun 17, 2021

Copy link to clipboard

Copied

LATEST

Thank you! That's helpful to know. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 16, 2021 Jun 16, 2021

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 17, 2021 Jun 17, 2021

Copy link to clipboard

Copied

Ahh! Thank you! I moved the color variables to the body {} definition and it works just fine!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation