Changing Appearance

This tutorial explains how to utilize the appearance section of the Hyvor Talk console.

The appearance section is designed to allow users to change the appearance of the plugin and make it blending with their website so that the comments section will look like a part of the website rather than a external plugin.

In the appearance section, you can change three things: colors, ui, and some texts.

Live Preview

The live preview at the bottom of appearance section allows you to see the changes in real-time.

Colors live Preview|400x400

However, it's important to verify the changes by checking the comments section on your website.

1. Changing Colors

When you choose the Colors button in the top panel, you will see the colors editor.

Colors Editor in Hyvor Talk

Here's how to edit the colors.

  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. Color Changer
  3. When you find the best combination, click save.

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

2. Changing the UI

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

Change UI

Font Family

Here you can choose the font. 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.

Box Shadow and Box Roundness

Hyvor Talk has several boxes (comment writer, comment displaying section, 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 and Border Color

Sets the width and the colors of the borders of boxes. In most cases, box border and shadow doesn't go well together. So, set box shadow to 0 and set a box border.

Button Roundness

Sets the corner roundness of the buttons. This works similar as box roundness.

3. Changing the Texts

Here you can customize some basic and most seen texts. Please check the language changing guide to fully change the language.

Changing Texts

Ideas:

  • No Comments Text to something like "Let's start the discussion"
  • Reactions Text to something like "How was the article?"

Feel free to be creative.

Tips

  • Make sure to click the Save button after editing any value.
  • Click the "Reset all to default" button to reset all values to Hyvor Talk's default if you need to start customizing from zero.