Styles

Most styles of the embed can be configured in the Console. If you need more control, you can use CSS variables.

hyvor-talk-comments {
    /* colors */
    --ht-color-accent: #000000;
    --ht-color-accent-text: #000000;
    --ht-color-box: #000000;
    --ht-color-box-text: #000000;
    --ht-color-box-text-light: #0000000;
    --ht-color-box-secondary: #000000;
    --ht-color-box-secondary-text: #000000;

    /* other styles */
    --ht-box-shadow: 5px 5px 0px rgba(0,0,0,0.05);
    --ht-box-radius: 10px;
    --ht-box-border: 1px solid transparent;
    --ht-button-radius: 10px;
}

Inherited styles

Hyvor Talk embed inherits the following styles from the parent page:

• font-* (font-family, font-size, etc.)
• color

Custom CSS

<hyvor-talk-comments> uses shadow DOM. CSS variables and some CSS properties like font-family penetrates through the shadow boundary, but other CSS properties do not. To add styles to inner elements, set custom CSS in the Console (Console -> Appearance -> Custom CSS). Then, the embed will automatically add that CSS inside the component. You can use dev tools to inspect the embed and find the IDs/classes of the elements you want to style.

Please note that classes, IDs, or the DOM structure of elements may be changed with new updates without any prior notice. While we try to keep the changes to a minimum, we cannot guarantee that the changes will not break your custom CSS.