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?
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
...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
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.
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
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.
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.
Cheers... Rick
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.
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! )
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
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.
Copy link to clipboard
Copied
Sooo, you are totally fixed now?
Copy link to clipboard
Copied
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.
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.
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?