Modifying Popup Text
After creating your source documents, you may want to change the way the text appears for your pop-up/glossary links in WebWorks Help 5.0 output. This is helpful for setting them apart from standard hyperlinks, and it does not require the use of additional character styles in your source material. It requires two project overrides--one to define the CSS class that describes the formatting cues you'll use, and another to add a reference to that class to the XSL which creates the Popup links.
Define the CSS Class
1. Perform a project override on a file called webworks.css, located by default in your ePublisher Pro installation directory, here:
ePublisher Pro\Formats\WebWorks Help 5.0\Pages\css
Note: For details on the override procedure, please see our online TechNote article here:
2. Once the file is copied into the appropriate directory in your project folder, open it with any text- or HTML-editing application (e.g., NotePad). 3. Add a CSS class anywhere in the document (as long as it's not within another class) for the popup anchor tags. Name the class something appropriate, like Popup or Glossary. For example:
- {{{a.Popup
- { text-decoration: none; color: #009900; border-bottom: 1px dashed green; }
- Note: You can add or change any relevant CSS attributes to the anchor class. You can also add pseudoclasses as necessary to get the popup link behavior that you are looking for.
4. Save and close webworks.css.
Edit the XSL
1. Perform a project override on a file called content.xsl, located by default in your ePublisher Pro installation directory, here:
ePublisher Pro\Formats\WebWorks Help 5.0\Transforms
2. Once the file is copied into the appropriate directory in your project folder, open it with any text- or HTML-editing application (e.g., NotePad). 3. Find this line of code:
<xsl:if test="string-length($VarLinkInfo/@href) > 0">
and add this above it:
{{{<xsl:if test="string-length($VarLinkInfo/@class) > 0">
<xsl:attribute name="class">
<xsl:value-of select="$VarLinkInfo/@class" />
</xsl:attribute>
</xsl:if>}}}
4. Find this line of code:
<xsl:if test="$VarResolvedLinkInfo/@popup = 'true'">
and add this below it:
{{{<xsl:attribute name="class">
<xsl:value-of select="wwstring:CSSClassName('Popup')" />
</xsl:attribute>}}}
5. Save and close content.xsl.
Finally, regenerate your project to apply the changes. Using the example provided here, you should end up with popup & glossary links which appear green with a dashed underline:
Files
See the attached files for examples of implementation: