You can customize the site’s text colors, background colors, font size, and other settings through the Appearance settings.

How can the default font be changed?

  1. Click on the Menu.
  2. Select Settings from the side navigation menu.
  3. Choose General Settings
  4. Locate “Default Font” and select your desired font.
  5. Click the “Update” button.

Note : You can upload your own fonts by placing them in the assets/fonts directory. Create a new folder named after your font, and ensure you follow the style.css format used in the other font folders.

How can the full-width layout be changed to a boxed layout?

  1. Click on the Menu.
  2. Select Settings from the side navigation menu.
  3. Choose General Settings
  4. Locate “Boxed Layout [Chat Page]” and select “Enable“.
  5. Click the “Update” button.

How can the site’s text colors, background colors, font size, and border color be changed?

  1. Click on the Menu.
  2. Select Settings from the side navigation menu.
  3. Choose Appearance
  4. Choose a Color Scheme where you want to make changes.
  5. Select the Location.
  6. Pick your desired colors or font size.
  7. Click the “Update” button.

What are the steps to find the CSS variables linked to an element?

We utilize CSS variables for text color, font size, border color, and background color. You can identify the CSS variables for any element using developer tools.

  1. Open Developer Tools: Right-click on the element and select “Inspect” to open the browser’s Developer Tools.
  2. Select the Element: In the “Elements” tab, locate the element you’re interested in. This highlights the corresponding HTML code.
  3. View Computed Styles: In the “Styles” panel, look for properties using var(–variable-name) syntax, which indicates CSS variables.

The format of a CSS variable is structured as location-styling_property. For example, var(–landing-page-primary-text-color) indicates:

  • Location: landing-page
  • Styling Property: primary-text-color (referring to the primary text color in this case).

How can CSS code be applied to a site?

  1. Click on the Menu.
  2. Select Settings from the side navigation menu.
  3. Choose Custom CSS
  4. Choose a Page where you want to make changes.
  5. Paste your CSS code into the CSS code area.
  6. Click the “Update” button.

How can Javascript code be applied to a site?

  1. Click on the Menu.
  2. Select Settings from the side navigation menu.
  3. Choose Custom JS
  4. Choose a Page where you want to make changes.
  5. Paste your Javascript code into the JS code area.
  6. Click the “Update” button.

Note: Code containing <script> tags is HTML that includes JavaScript syntax. You should place this HTML code in the headers or footers section (Menu > Settings > Headers/Footers).