arrow_back_iosQuestions
help

Can I change the design of a widget without a web designer, and how?

check_circle
You can try to edit the CSS yourself using a browser. To change the appearance of the widget in this way is not so difficult.
Open the widget settings form and click the Appearance tab. Here, first select the theme of the design closest to your site. Then set the Use custom css-styles flag and save.
In the Styles field, we will make our CSS and save it to see the result.
Consider getting a CSS using the example of the Chrome browser.
On the form there is a preview of our widget. Click on any item with the right button and choose View Code.
You can also use the tool to select an item with the mouse. Press Ctrl + Shift + C and move the mouse along the page until the element you want is completely selected.
In the opened tools, a row will be highlighted on the Elements tab. It will contain the name of the element class. We need it.
In our case, the class is called month-picker. We find this class on Styles. And we change, for example, the background color - background. If the desired property is not in the class, add it by clicking on the closing curly brace.
Similarly, change the colors of some other elements.
Now let's get a list of all our changes. Click the menu icon, then More Tools and Changes.
A tab with all changes will open at the bottom. For each class we transfer to our style in order:
  1. The class name with a dot and an open brace.
  2. All the marked green lines and add the closing brace at the end.
In our case, this is the css style:
.month-picker {
  background-color: #5e406f;
}

.calendar-header {
  background-color: #432a51;
}

.calendar__card {
  background-color: #291734;
}

.button_primary {
  background-color: #f321c8;
}
The widget's calendar now looks like this:

CSS properties

In our example, we changed only the background color. You can change and add any properties of the element. We list the most popular:
  • color - text color. For example: color: #000000;
  • background - background color. for example: color: #FFFFFF;
  • margin Specifies the amount of outer indentation from the edges of the element. List the number of pixels in order: top, right, bottom, left. For example: margin: 1px 2px 3px 4px;
  • padding Specifies the amount of the inner indent of the element. List the number of pixels in order: top, right, bottom, left. For example: padding: 1px 2px 3px 4px;
  • font-family - font name. For example: font-family: Tahoma;
  • font-size - font size. For example: font-size: 20px;
  • font-weight - Font thickness. For example: font-weight: 500;
  • height - height of the element. For example: height: 100px;
  • weight - width of the element. For example: weight: 100px;
  • border - element stroke. For example: border: 1px solid #000000;
  • border-radius - rounding edges. For example: border-radius: 10px;
  • display allows you to hide an item. Use: display: none;
  • opacity - transparency of the element. For example: opacity: 0.5;
  • box-shadow - shadow element. For example, to remove the shadow: box-shadow: none;
Didn't find the answer to your question?
Ask it to us on
mail_outlinesupport@bukza.com