Styling - Fluid Topics

To style annotations, use the following CSS properties:

Variable name	Description
`--ft-button-background-color`	Sets the annotation's open and close buttons' background color.
`--ft-button-border-radius`	Sets the annotation's open and close buttons' border-radius.
`--ft-button-color`	Sets the annotation's open and close buttons' color.
`--ft-button-horizontal-padding`	Sets the annotation's open and close buttons' left and right padding.
`--ft-button-icon-size`	Sets the annotation's open and close buttons' icon size.
`--ft-button-vertical-padding`	Sets the annotation's open and close buttons' top and bottom padding.

For example:

Add the following example to a Markdown document:

> This guide describes how to prepare <span class="popover-term">DITA</span><span class="ft-annotation">The Darwin Information Typing Architecture (DITA) specification defines a set of document types for authoring and organizing topic-oriented information, as well as a set of mechanisms for combining, extending, and constraining document types.</span>content and publish it to Fluid Topics through the DITA connector.

Publish the Markdown document.

Add the following example to the portal's Content styles:

ft-popover {
  --ft-button-background-color: transparent;
  --ft-button-border-radius: 10px;
  --ft-button-color: purple;
  --ft-button-vertical-padding: 2px;
  --ft-button-horizontal-padding: 2px;
}

ft-popover::part(wrapper) {
    background-color: black;
    color: white;
}

ft-popover::part(closing-button) {
  --ft-button-background-color: transparent;
  --ft-button-color: purple;
}

.popover-term {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: help;
}

This styling results in the following example:

This guide describes how to prepare DITAThe Darwin Information Typing Architecture (DITA) specification defines a set of document types for authoring and organizing topic-oriented information, as well as a set of mechanisms for combining, extending, and constraining document types.content and publish it to Fluid Topics through the DITA connector.

Styling - Fluid Topics - Latest

Add Annotations in Content