# Custom code

{% hint style="info" %}
Unlike the **styling** configuration (theme configuration), the settings of a theme are always stored in the parent theme. A child theme does not have its own area with settings.

[**Where can I find the theme settings?**](https://themedocs.zenit.design/en/master#step-5-settings-plugin-app-configuration)
{% endhint %}

{% hint style="info" %}
**When using a child theme:**

You have to use the theme settings of the **parent theme**. A child theme has no settings of its own - but a styling configuration.
{% endhint %}

## CSS code

Smaller adjustments can be deposited in the settings of the theme. In addition to linking external CSS files, CSS can also be entered.

### CSS files

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FcIGT7kmHTaoIdBkcwnKR%2Fdocs-en-settings-theme-custom-code-css-files.png?alt=media&#x26;token=0bbc2cd6-6f25-43fe-a54b-93174908a889" alt=""><figcaption></figcaption></figure>

```html
<link href="https://.../style.css" rel="stylesheet">
```

### CSS code

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FWR26Ouba4bVKyITBbFFh%2Fdocs-en-settings-theme-custom-code-css-code.png?alt=media&#x26;token=6b2c4fc6-2a8e-4d4e-8ba4-4511002695cc" alt=""><figcaption></figcaption></figure>

```css
body {
    background: #ffffff;
}
```

*\<style>-Tags are not needed.*

## Javascript code

Smaller adjustments and functions can be stored in the settings of the theme. You can choose between linking **external Javascript files** and embed inline **Javascript code**.

Also you can choose between the inclusion in the \<head/>-area of the page and the footer area. Some applications need to be included in the \<head/>-area, other scripts should be included in the footer in order not to delay the loading of the page.

### Head Javascript files

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FzIc1YLPiaAwGkuC5B9yl%2Fdocs-en-settings-theme-custom-code-head-javascript-files.png?alt=media&#x26;token=9ff41201-b4ce-485f-b2f5-dfe6b1f6ca67" alt=""><figcaption></figcaption></figure>

```markup
<script src="https://.../javascript.js"></script>
```

### Head javascript code

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FAxAfDltpueIRviOIshDA%2Fdocs-en-settings-theme-custom-code-head-javascript-code.png?alt=media&#x26;token=bd99b615-742f-4a18-b231-a86b6eee9725" alt=""><figcaption></figcaption></figure>

```javascript
// JavaScript Code
console.log('Hello World');
```

*\<script>-Tags are not needed.*

### Footer Javascript files

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2Fe6vr7D4bzchQQbmRAZEl%2Fdocs-en-settings-theme-custom-code-footer-javascript-files.png?alt=media&#x26;token=9c797b24-3d56-492f-ad5d-24f8612f9f5a" alt=""><figcaption></figcaption></figure>

```markup
<script src="https://.../javascript.js"></script>
```

### Footer javascript code

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FXRfL3hdET4Y1Xq7v6snU%2Fdocs-en-settings-theme-custom-code-footer-javascript-code.png?alt=media&#x26;token=a245eb88-da82-41e2-bb60-c9f463732f7f" alt=""><figcaption></figcaption></figure>

```javascript
// JavaScript Code
console.log('Hello World');
```

*\<script>-Tags are not needed.*