Add External Links Icons

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

In this tutorial, you will learn how to add small link icons to all links in your collection that target an external http server. You need the Professional version of Tópico to complete this tutorial.

Adding a little icon like this one to each and every link that targets an external http server might prove to be a very tedious task if you manage a lot of individual HTML files. Doing it with Tópico will only take a few minutes.

Create the generated content snippet

While you needed only to know enough about HTML to come up with some generated content in this intermediate tutorial, a little knowledge about XPath will get you much further. This is the generated content type you'll use to get at all those external links.

  1. Select the Publishing tab;
  2. In the Generated content grid, add the following entry.
Type Position Text Content
XPath After //xhtml:a[contains(@href,'http')] <img class="external_link" src="images/external_link.jpg"/>

The XPath expression selects all anchors elements (<a>) that have a href attribute that contains "http". The Content is then added After the selected node.

Warning

If your generated content snippet is of the XPath type, then the Text shall be a valid XPath expression and the Content shall be a well formed and complete element. A complete well formed element has a begining and an end tag.

Create the stylesheet selector

If you publish your collection now, the image will be misaligned with the surrounding text, whcich does not look good. To adjust how the image is aligned with the text, you must add the appropriate selector to your stylesheet.

  1. Select the Content or Topic tab;
  2. Click on the small e button beside the Stylesheet drop down list;
  3. Open the publication stylesheet;
  4. Add the following selector;
  5. Save the stylesheet;
CSS
img.external_link {position:relative; margin:0px; margin-left:1px; 
                   padding:0px;}

The image now aligns nicely with the surronding text.

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

Back
62 / 194