Skip to main content
symmetricalMan
Inspiring
January 30, 2017
Answered

URL getting stripped from CSS generated by RoboHelp

  • January 30, 2017
  • 2 replies
  • 1439 views

I've been asked to add some content to the CSS I use for our online Help content. This content relates to a livechat pop-up mechanism.

One of the lines in the CSS code I've been given reads "background: #fff url("/dist/img/livechat_question.gif") no-repeat -5px -5px;"

However, when I generate HTML5 output from RH, the resulting CSS does not include this URL - it gets stripped from the CSS, and we're left with "background:#fff   no-repeat -5px -5px;"

Any ideas?

This topic has been closed for replies.
Correct answer Amebr

I'm not using RH's editor. I'd learnt to avoid it.

All my CSS is worked on in Dreamweaver CC. Also tried just using Notepad.


You'll need to make sure you link to the image in your project. If you have your stylesheet in a subfolder and you added the baggage file by clicking on Project Files, it should be something like the following, but check where each of the files are in the project:

background-image: url('../livechat_question.gif');

Also, background-image doesn't need the file to be a baggage file, RH knows enough to pick up the file correctly if the file is in your project and you point to the directory it's in.

However, I've done some research on the initial / in your path, and I suspect RH doesn't understand that syntax. So assuming this is a resource you want to pick up from your webserver, then you could change the URL to an absolute path (including the domain). I'm not sure if that would display correctly in preview or when run locally, but it should definitely be fine when published.

Basing my guess on this page: Relative URLs | WebReference

(EDIT: SNAP! )

2 replies

Community Expert
January 30, 2017

Another option might be to use all the individual properties, rather than the abbreviated version. I haven't specifically tried this, but I know RH sometimes gets confused with more "advanced" css.

e.g.

Background-color: #ffffff;

Background-repeat: no-repeat;

etc.

symmetricalMan
Inspiring
January 30, 2017

Thanks, Amebr.

We tried splitting the CSS lines into:

background: #fff no-repeat -5px -5px;

background-image: url("/dist/img/livechat_question.gif");

In the generated CSS, RH has stripped the entire 'background-image' line.

Perhaps RH doesn't recognise the background-image property?

Captiv8r
Legend
January 30, 2017

Hi there

Typically RoboHelp is going to expect the background image to be local to the project. So what you need to do is to just add the image file to your baggage folder.

Cheers... Rick

symmetricalMan
Inspiring
January 30, 2017

Thanks, Rick. Never (knowingly) used baggage files before.

Went into Project Manager > right-click > New Baggage File > located the image file. It now appears in the Project Manager.

Anything else I'm supposed to do with it?

...RH is still stripping that line out of the generated CSS.

Captiv8r
Legend
January 30, 2017

Did you use RoboHelp's CSS editor to insert the code? Or are you manually editing the CSS using Notepad or something similar?

Cheers... Rick