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

Add icon showing link is to an external site

Contributor ,
Jan 09, 2018 Jan 09, 2018

Copy link to clipboard

Copied

Does anyone know how to display/add the image typically used to indicate that the link opens to an external site?  I'm thinking of a square with an arrow coming out of the corner, or something like that.  I'm concerned about spacing and sizing as the hyperlink is within a sentence. How can I get it just right?

I'm currently using Webhelp w/RH11 and Responsive HTML w/RH2017

thank you!

Views

1.1K

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 09, 2018 Jan 09, 2018

Copy link to clipboard

Copied

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

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 09, 2018 Jan 09, 2018

Copy link to clipboard

Copied

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:

external-link-icon.png

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.

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
Contributor ,
Jan 10, 2018 Jan 10, 2018

Copy link to clipboard

Copied

LATEST

Wow, thank you both.

I used Captiv8r's solution because I only have a few.  But for others with many, I'm sure Amebr's solution will work as well!

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