at the top of the dialog. Check Use custom CSS and paste in the CSS code.Contents | Start | End | Previous: KB0046: How do I link back from section headings to the table of contents? | Next: KB0048: How do I add a watermark to all pages in Epub or Kindle?
By default, the viewer software (such as a Kindle, Kobo, or Nook app) is responsible for adding colour and/or underlining to links. However, if you prefer, you can create link styles and apply them to different categories of link.
To remove underlining and/or colour by creating a new link style and associating it with the whole book, do the following:
Click on the menu command Format | Edit Styles | Link to show the Link Styles dialog
Type a new link style name, such as "Hyperlinks", and press OK.
Set Underlining to None, and Text colour to None or Specified, as required.
Click on the Defaults page, and in Whole book, choose the "Hyperlinks" style you just created.
Press OK and OK again.
Compile and preview your book.
If you only want to change the link formatting for certain categories of link, you can choose particular categories or individual sections, and even associate link styles with individual character styles.
For more information on link styles, please see the topic Working with link styles in the Jutoh manual.
Alternatively, you can do it manually with CSS as described below.
You can add CSS either globally if you want no underscores throughout, or per section. To add it globally, go to the Styles page on the Project Properties dialog and click on Edit Properties at the top of the dialog. Check Use custom CSS and paste in the CSS code.
Let's say we want to make the link colour red, and remove underlining. You can use the following code:
a:link { color: red; text-decoration: none; }
a:visited { color: red; text-decoration: none; }
a:hover { color: red; text-decoration: none; }
a:active { color: red; text-decoration: none; }
Alternatively, if you want the colour to be the same as the surrounding text, but keep underlining, you could use:
a:link { color: inherit; text-decoration: underline; }
a:visited { color: inherit; text-decoration: underline; }
a:hover { color: inherit; text-decoration: underline; }
a:active { color: inherit; text-decoration: underline; }
To apply CSS to an individual section only, right-click over a section in the project outline, select Properties, and then check Extra CSS. Paste in the above page and press OK.
You might notice that when you look at the HTML generated by Jutoh for links, the style you applied to the link has been removed. This is because if the configuration property option URL attribute removal style has a style value, the attributes in the style will be removed from the link before it is written to the HTML file. This avoids clashes between the styles specified in the editor and defaults used by the ereader – such clashes can make links look untidy, especially if the Jutoh and ereader URL colours are slightly different. It's better that the ereader shows links in the default style than in a mixture. You can reapply the intended attributes using CSS properties, as above.
Keywords: hyperlink, hyperlinks
Contents | Start | End | Previous: KB0046: How do I link back from section headings to the table of contents? | Next: KB0048: How do I add a watermark to all pages in Epub or Kindle?