Set link/cross reference color/underline in ResponsiveHTML5 output?

[Almtuna]

In my FM19 document I have external web-links in dark grey, and the cross-references are black. Looks great in the PDF.

But in my HTML5 output they both come out as solid blue, and underlined - which isn't what I want. (Looks like a time travel to the 1990's.)

I tried to set the character style color in the Style Mapping, but the output still has blue, underlined links/cross references.

[Jeff_Coatsworth]

IIRC that's all controlled in the CSS.

[Almtuna]

Which CSS? I haven't created or edited any CSS. (I expected FM to handle that.)

In the generated output there are five different css files, one with the name of my FM book, layout, layout.min, layoutfix.min and topic.min. But if I edit any of these, they will be replaced the next time I publish the html5 pages.

Where should I go to do changes that last?

[Jeff_Coatsworth]

You specify a CSS file in the Publish Settings file (I think it's called default.css) - it gets its info from the Style Mappings you setup. I think you'd need to create a paragraph tag to identify hyperlinks.

[Almtuna]

The generated output for a link looks like:

<span class="FM_URL"><a href="https://www.somewhere.com/">The Somewhere website</a></span>

The default css file has the following definition:

span.FM_URL {
font-family:"Arial Narrow";
font-style:normal;
font-weight:normal;
font-size:10.0pt;
color:#585858;
text-decoration:none;
letter-spacing:0.00em;
}

The output has the correct font (not the same as surrounding text,) but the color is blue and underlined.

When you say "paragraph tag to identify hyperlinks", do you mean in the css file or in FrameMaker?

As a test I added

/* A link that has not been visited */
a:link {
    color: #585858;
    text-decoration: none;
}
/* A link that has been visited */
a:visited {
    color: #585858;
    text-decoration: none;
}
/* A link that is hovered on */
a:hover {
    color: red;
    text-decoration: underline;
}
/* A link that is selected */
a:active {
    color: green;
    text-decoration: underline;
}

in my defualt css file (and imported again.) But it made no difference.