topic link font color

[sethdawson]

Is there a way to change the topic link font color in a skin?

[Tim Green]

Styling hyperlinks like this for HTML output can be achieved with a few lines of additional CSS code in the skin you are using to publish your project. The standard WebHelp skins included in Help & Manual and the Premium Pack skins already contain this code, you just need to edit it for your personal preferences. The standard CHM skins don't contain it by default but you can easily add it.

For example, open one of the WebHelp skins from the /Templates/HTML Skins folder in the Help & Manual program folder, then select Save As. in the File menu and save it in your project folder so that you can edit it. In the Project Explorer on the left, locate the Project Files > Baggage Files section and select the custom.css file so that you can edit it. You will see a block of code that looks like this somewhere in the file:

Code: Select all

/* Styles for the various hyperlink types */
a.topiclink { color: blue; text-decoration: none; }
a.topiclink:visited {color: blue; }
a.topiclink:hover {color: blue; text-decoration: underline; }
a.weblink {color: blue; text-decoration: underline; }
a.weblink:visited {color: blue; }
a.weblink:hover {color: blue; text-decoration: underline; }
a.popuplink {color: red; text-decoration: none; }
a.popuplink:visited {color: red;}
a.popuplink:hover {color: red; text-decoration: underline; }
a.filelink {color: green; text-decoration: none; }
a.filelink:visited {color: green; }
a.filelink:hover {color: green; text-decoration: underline; }

In some skins, the first three lines of this code may look like this, without the ".topiclink" class:

Code: Select all

a { color: blue; text-decoration: none; }
a:visited {color: blue; }
a:hover {color: blue; text-decoration: underline; }

If they do, change it to this, so that the CSS targets the topic links only and not all other links as well:

Code: Select all

a.topiclink { color: blue; text-decoration: none; }
a.topiclink:visited {color: blue; }
a.topiclink:hover {color: blue; text-decoration: underline; }

There are three lines for each link type you want to format. In each block the first line defines that normal appearance of the link. The second line defines the color of the link after the user has visited it (and you can only set the color for this value). You will normally set this to the same color as in line 1, so that it does not change. The third line defines how the link behaves when the user hovers the mouse pointer over it.

You just need to edit the lines to achieve the link behavior you want. See this page at W3SChools for details on how you can format links like this:

http://www.w3schools.com/css/css_link.asp

In the standard CHM skins, or in skins you create yourself, you just need to add this CSS code yourself. You can do this directly in the HTML page template. To do this, open the skin in Help & Manual for editing as described above and in the Project Explorer locate the topic page template at Configuration > HTML Page Templates > Default. In the template, locate the closing </head> tag and paste in the following two lines of code directly before it, like this:

Code: Select all

<style type="text/css">

</style>  
</head>

Then paste in the lines of CSS code as shown above, between the two style tags and edit them as you prefer.

In the Premium Pack skins the location of the code depends on the skin type. If you are using one, just let me know which one it is and I can help you further.