Changing Appearance

This tutorial explains how to utilize the appearance section in the 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 plugin will look as a part of the website rather than a conventional plugin.

In the appearance section, you can change three things: colors, fonts, 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 going to 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 Font

In the Font section, you can change the font of Hyvor Talk.

Choose Font

While default font is a system font depending on user's OS, others are Google Fonts. Here we have choosed most popular Google Fonts. Therefore, users will have already downloaded it in their previous visits. So, in most cases, there won't be a delay in loading the fonts. If not, a fallback font will be used until loading (just milliseconds).

If you cannot find your website's font in the list, choose the most similar font. Make sure to check the live preview and save the changes.

3. Changing the Texts

Here you can customize some basic and most seen texts. Please check the language changing guide to change plugin's 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.