• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

URL getting stripped from CSS generated by RoboHelp

Participant ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

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?

Views

679

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

Community Expert , Jan 30, 2017 Jan 30, 2017

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.

How

...

Votes

Translate

Translate
LEGEND ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

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

Votes

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 ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

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.

Votes

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
LEGEND ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

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

Votes

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 ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

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.

Votes

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
LEGEND ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

My thought here is that perhaps the line is "getting stripped" because it's been created in a way that RoboHelp isn't understanding,

Because of this, I'd suggest the following experiment.

Make a backup copy of the CSS file.

Locate and double-click the CSS file in the RoboHelp project manager pod.

Expand the Other category, then click the Background+Text(BODY) section.

Click the Format button in the lower left corner of the dialog and choose Borders and Shading... from the popup menu.

Click the Shading tab on the new dialog that should appear.

From the Pattern field, click the file browsing icon (looks like spyglasses).

Navigate to and select the desired background image and configure the options for dispay.

Dismiss all dialogs and test.

tmp3.png

Cheers... Rick

Votes

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 ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

Thanks Rick, but this isn't about the background of a page - it's about the background of a chat pop-up mechanism (mentioned in my original post). Sorry for the confusion.

The entire piece of CSS reads;

a#livechat-eye-catcher-img {

    animation-name: glowPulse;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    background: #fff url("http://[oursite].com/dist/img/livechat_question.gif") no-repeat -5px -5px;

    padding: 0;

    border-radius: 90px;

    border: 0;

    width: 70px;

    height: 70px;

}

Note that we have just now resolved this by using the full path to the .gif

...only to find that it's not animating like it's supposed to. We have a new problem to work on now. Yay.

Thanks again for your suggestions.

Votes

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 Expert ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

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! )

Votes

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
LEGEND ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

Hi there

Adding to baggage certainly doesn't hurt anything. I do agree that RoboHelp should do it for us.

As we have added the image to baggage, I'm curious if you have tried the following change:

a#livechat-eye-catcher-img {

    animation-name: glowPulse;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    background: #fff url("livechat_question.gif") no-repeat -5px -5px;

    padding: 0;

    border-radius: 90px;

    border: 0;

    width: 70px;

    height: 70px;

}

Cheers... Rick

Votes

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 ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

Haven't tried that yet.

Using the full path fixed the issue with the gif not appearing, and we got it to animate by using 'the Force'.

...'cause I can't otherwise explain why it suddenly decided to behave.

Votes

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
LEGEND ,
Jan 31, 2017 Jan 31, 2017

Copy link to clipboard

Copied

Sooo, you are totally fixed now?

Votes

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 ,
Jan 31, 2017 Jan 31, 2017

Copy link to clipboard

Copied

LATEST

Me? Oh Glob no - I'm quite in need of repair. A reboot at least.

The issue with the animated gif is fixed, though. Thanks for your assistance.

Votes

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 Expert ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

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.

Votes

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 ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

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?

Votes

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
Download Adobe RoboHelp