Customizing Appearance

This tutorial explains how to utilize the Appearance section of the Hyvor Talk console. Here, you can change colors, some UI settings, and some texts according to your needs. You can also set up Reactions or Ratings plugin (top widget).

Tip: Open the preview to see changes in real-time inside the console.

Changing Colors

We use 6 colors in the embed.

1. First, change Background Color to your website's background color to make a better preview. (This is only for testing)
2. Then, change the colors one by one and check the preview. You can choose the color using the mouse or adding HEX, RGB, or HSL values directly.
3. After you find the best combination, save changes.

Hyvor Talk's color customizing is extremely powerful. It's an art to designing a beautiful plugin. Spend some time playing with colors. Finally, you will get an amazing product.

Note that you can even change the colors programmatically. See dynamically changing colors.

Changing UI Settings

In the UI section, you can change many user interface configurations.

Font Family

The default is a web-safe OS-dependent font. Others are Google Fonts. If you use Google fonts on your website, you can choose the same here as Hyvor Talk supports all Google Fonts. If you use another type of font, you can choose a font that is similar to that one. You can also visit the Google Fonts Directory to easily choose a font looking at their variations.

We do not support custom fonts yet, but it is on our roadmap.

Box Shadow and Box Roundness

Hyvor Talk has several boxes (comments section, popups, etc.).

• Box shadow sets the shadow of each box. It supports 6 values (0 to 5). The higher the number the wider and thicker the shadow is.
• Box roundness sets the roundness of the corners of each box. It also support 0 to 5. border-radius CSS property is set by number * 5 + 'px'. For example, if the number you select is 3, border-radius will be 15px.
• Box border sets the width and the colors of the borders of boxes. In most cases, the box border and shadow don't go well together. So, set a box-shadow to 0 and set a box border.

Button Roundness

Sets the corner roundness of the buttons. This works similarly to box roundness.

Custom CSS

If you add custom CSS, it will be inserted to the embed inside <style> tags. To match elements by ID or classes, inspect elements of the comments section on your website using browser dev tools. You can style any element inside the iframe. However, please note that classes, IDs, or the DOM structure of elements may be changed with new updates without any prior notice.

Reactions and Ratings

You can choose to have one of these widgets on top of the comments section.

1. Reactions
2. Rating

For the Reactions widget, you can select a text and set custom reactions if needed.

Here's a preview of the reactions widget with default settings.

For the Ratings widget, you can set a text and a color

Here's a preview of the ratings widget with default settings.