Add icon showing link is to an external site

I did this automagically with css in RH11 for Multiscreen HTML.

You'll have to do a bit of sleuthing to find the specific code you need for Webhelp and Responsive, but the general principle should be the same for both.

This method assumes all your external links start with 'http' and your internal ones don't, which should be the case using the RH interface to enter the links. You also can't see it in the editor because RH doesn't understand the code, or preview, because of the way I've coded it.

1. In the output, check for the class on the div that contains the topic text - you want to make sure the style only applies inside your topics, not in your table of contents, etc. (This is why I can't see it in preview, as the div isn't created in preview.)

This step may not matter for Webhelp, as I think it uses frames so your topic css can't affect the skin...I think. Be sure to test.

For my Multiscreen HTML5 output, this was .wTopic.

2. You have to edit your stylesheet using a text editor, as the next step isn't possible using the RH dialog box. You can safely right-click the stylesheet and select Edit With > HTML Editor.

Enter the following - change the .wTopic to the div class you identified earlier, and the url to the path to your image. Note: the url is the relative path from your stylesheet to the image. I'd recommend you put the image in the same directory as your stylesheet to avoid path confusion.

.wTopic a[href^='http']:after {

     content: url("web-link.png");

}

What this is saying is:

.wTopic =  in the wTopic container

a[href^='http'] =  for all links where the href starts with 'http'

:after = insert the after the link

content: url("web-link.png") = this image file

3. Now, Robohelp doesn't detect the content url to include in baggage files, so we need some trickery to get it included.

Enter the following into your stylesheet:

weblink-ph {

     background-image: url("web-link.png");

}

Basically this sets a background-image on a fake html tag. Robohelp knows about the background-image property and so correctly includes the image when generating. You could call weblink-ph anything you want, just make sure it isn't a real tag you'll use anywhere. (weblink placeholder if you were wondering)

4. And then in the output you get:

You can see two links where the external link image appear auotmagically and a third which is internal to the project which doesn't have it.

Holler if you can't figure it out for your projects, and if you can post some code snippets I can try to help more.

Hi there

First, I'd ensure the image was about the same size as the text you will be inserting it alongside. Then when you insert it, you will likely need to adjust the bottom margin in order to "pull it down" to better align with the text. Normally I double-click the image to see the properties, click the Margins button and nudge the bottom margin. Note that it will only allow you to change positive values and you will likely need a negative value. So if the value is perhaps -3, I nudge the number up to 3 using the up arrow of the spin control, then I click into the field and type a negative symbol. That should give you a negative bottom margin.

How many links will you be creating like this? I ask, because if you have a lot of links, you may want to configure a style to make it work. But if it's just a few here and there, it's likely easier just to insert the image and configure it as I mentioned earlier. If you have just a few, you might want to just have one handy in a template topic for easy copy and paste.

Cheers... Rick