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?


KB0047: Removing underlining and colour from links

There is no provision in Jutoh for specifying this level of detail, so it needs to be done using custom CSS. 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 syle 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?