Website Deliverables - webworks.com Previous Next Index Print
Modifying the Appearance of Multiple Hyperlinks

Modifying the Appearance of Multiple Hyperlinks

Last Modified: July 6 2006.

ePublisher Pro

The purpose of this article is to explain how to modify the appearance of multiple hyperlinks.

Currently, there is not a way through the UI to control the appearances of multiple hyperlinks. In other words, users often want the appearance of their hyperlinks to be different depending on the type of hyperlink it is (external, glossary, popup, file, etc.), and there is not a way to do this through the UI. We are looking at adding this capability in the future. For now, customers will need to use this workaround.

The workaround is to apply unique character styles to the hyperlinks and then create a project target override on the webworks.css file and add the desired CSS style information. For more information on how to create a project target override, please see ““Creating Project Target Overrides””.

*

By default the webworks.css file lies in C:\Program Files\WebWorks\ePublisher Pro\For­mats\[FORMAT]\Pages\css. Where [FORMAT] is the format from which the target to be gener­ated is based.

Example

Suppose you have a hyperlink in your source document with a character style applied to it called MyHyperlinkCharacterStyle and you want the link to appear green with no underline in output.

In the webworks.css file you would add the following:

.MyHyperlinkCharacterStyle a:link{

color: green;

text-decoration: none;

}

.MyHyperlinkCharacterStyle a:visited{

color: green;

text-decoration: none;

}

.MyHyperlinkCharacterStyle a:hover{

color: purple;

text-decoration: none;

}

.MyHyperlinkCharacterStyle a:active {

color: green;

text-decoration: none;

}

*

There are four CSS states for links: link, active, visited and hover. The link state indicates a link that has not been used nor is there a mouse pointer hovering over it. The active state indicates a link is in the process of being clicked. The visited state indicates a link has been used and there is not a mouse pointer hovering over it. The hover state indi­cates a mouse pointer is hovering over a link.

Once you are finished modifying the CSS information, save and close the webworks.css file and regenerate your project. If you would like to see an example project, you may download it here.