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.
The live preview at the bottom of appearance section allows you to see the changes in real-time.
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.
Here's how to edit the colors.
- 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.
- 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.
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-radiusCSS property is set by
number * 5 + 'px'. For example, if the number you select is 3,
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.
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.
- 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.
- 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.