In this learning content, you will learn how to work with custom styles in the Styling panel.

Each style you add is a custom style, except for the styles that come by default. Calling the styles you add as custom styles and saving them allows you to quickly add them by selecting them from the relevant field instead of doing the same operations to reuse this style on different screens in the project you develop. This makes your work easier by shortening the time you spend designing screens in Kuika.

There is a custom style area under the layout, text, fill, border and web-specific shadow area in the styling panel.

Let's create a few styles for the web and mobile project that we will develop together to be an example of how to work with the styles we need, except for the styles that come predefined. First, we created our web project. We went into the project. Let's start by defining a style from the Layout section.

Add an image element to the screen with drag and drop. With the element selected, go to layout in the Styling panel. Define width and height values as 32 in the size field. Make sure Px is selected. Click the detail icon button to the right of the Custom Style text. Select Save as style and save it as Image 32.

Now let's define a style from the text section. Select the Label element.

Since we will use a label in the label structure, we will create a style accordingly. Go to the text section in the styling panel. Fill in the relevant fields as poppins, regular, 12 pixel and black color. Click on the detail icon to the right of the custom style text, select save as style. Name it and save it.

Now let's define a style from the Fill section.

We will add a background color for the label we will use in the label structure. For this, go to the fill section and open the color panel. Then add the color code (ffecd0) to the Hex field. Name and save the color by clicking the + icon under Saved Colors.

Under Saved color you can view your saved colors as a list and grid.

Now we will add the styles we need in the Border section. Select the Text Input element.

For the Input Border style, go to the border panel. Select white color from Color. Type 1 in the Width Top field and click the lock icon and you will have defined a border value for all edges. Then type 12 in the Radius top field and click the lock icon so that you will give all edges a radius of 12 pixels. After selecting the straight line from the Style field, name your style and save it.

In this video you learned the basics of working with complex styles. You can access the web and mobile styles of I Have an Idea app by following the content in the description section.