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

Participant ,
May 14, 2020

Copy link to clipboard

Copied

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.

 

TOPICS
Publishing, Responsive HTML5

Views

615

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 14, 2020

Copy link to clipboard

Copied

IIRC that's all controlled in the CSS.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Almtuna AUTHOR
Participant ,
May 14, 2020

Copy link to clipboard

Copied

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?

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 14, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Almtuna AUTHOR LATEST
Participant ,
May 15, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more