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.
We use 6 colors in the embed.
- First, change Background Color to your website's background color to make a better preview. (This is only for testing)
- 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.
- 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.
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-radiusCSS property is set by
number * 5 + 'px'. For example, if the number you select is 3,
- 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.
Sets the corner roundness of the buttons. This works similarly to box roundness.
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.
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.