Can I customize the widget design so that it becomes part of my website?

On the Design panel, select a light or dark theme depending on the design of your website. Then choose a color for the buttons and form fields.

If you need a complex design customization, you can change the appearance of the widget using CSS. This let you change the fonts, colors, and shape of any widget elements. This will require basic HTML/CSS skills.

Widget styles are organized according to the BEM methodology. Each element has its own class.

To change the design of a specific item, find out its CSS class. This is easily done through the developer's tools in the browser. For example, in Chrome, right-click an item and select View Code.

For the name of the day on the calendar, we have defined its class - day.

Now let's write a simple CSS to change the background, color and font:

.day {
  background: #fdeedb;
  font-weight: 700;
  color: #8a5714;
}

Finally, open the widget settings and go to the Design panel. Set the Custom CSS style checkbox and insert our CSS.

You will get the following result:

If you need to add a custom font or an external style using the CSS @import directive, follow these steps:

Add your @import statement at the top of your Custom CSS. For example:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
Insert the [bukza_theme_styles] block below all your @import statements.
Add the rest of your CSS to override the theme styles as needed.

The [bukza_theme_styles] block will be automatically replaced with the theme's styles. If this block is missing, the theme styles will be applied before your custom CSS.