> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zonely.gen.tr/llms.txt
> Use this file to discover all available pages before exploring further.

# Additional CSS

> Complete the appearance of your theme with additional style rules from the code editor.

Page Creative **Additional CSS** open the part. You can write your own CSS rules to the code editor. Line numbers help you find the location you have arranged on a long file.

[![CSS editor, Line numbers](https://mintcdn.com/zonely-a8cd49e7/chEWsMezXc9HlpJ7/images/panel/page-builder-guide-20261025/22-ek-css-en.png?fit=max\&auto=format\&n=chEWsMezXc9HlpJ7\&q=85\&s=c5b38a9f0904e0db52235ea75b10cd36)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/22-ek-css-en.png)

> [card] 1. CSS editor
>
> Type the style rules here. In the example, card corners are rolled.

> [card] 2. Line numbers
>
> Helps you follow the line you change in long rules.

## Add a style rule

First, select the class of the item you want to change. The following rule is rolling the corners of the helpwriting card on the default theme:

```css theme={"theme":"css-variables"}
.zn-help-article-card {
  border-radius: 18px;
}
```

Selective specifies the item to be applied by the rule; the area in the decorated braces will change the style. Use the class of the relevant item if you are working on a different theme.

## Identify domain

`.card` Like a general selector can affect many cards in the same class. Add the class or container to selectively in that section to change a specific part alone.

General color, width and before font [Colors](https://docs.zonely.gen.tr/en/guides/page-builder/colors.md), [settlement](https://docs.zonely.gen.tr/en/guides/page-builder/layout.md) and [Fonts](https://docs.zonely.gen.tr/en/guides/page-builder/fonts.md) use the fields. With additional CSS you may need to check two places in the next regulations if you rewrite these settings.

## Preview and save

After writing the rule, open the affected page in preview. For example, check a rule of help card in the help article; on the main page it may not be available.

Close the window **Save All** Press the button. View the same page, open/desk view and phone display on the user side.

If the result does not appear, check if the selective matches with the right item, the decorated braces are closed, and the feature lines are separated by the pointed comma. You can find out which change affects the appearance by removing and comparing the last added rule.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.