# Eigener Code

{% hint style="info" %}
Anders als der Bereich **Styling** (Theme Konfiguration) werden die Einstellungen eines Themes immer im Eltern-Theme hinterlegt. Ein Child-Theme hat keinen eigenen Bereich mit Einstellungen (Plugin / App-Konfiguration).

[**Wo finde ich den Bereich "Einstellungen"?**](https://themedocs.zenit.design/readme#schritt-5-einstellungen-plugin-app-konfiguration)
{% endhint %}

## CSS Code

Kleinere Anpassungen lassen sich in den Einstellungen des Themes hinterlegen. Neben der Verlinkung externer CSS Dateien kann auch CSS eingetragen werden.

{% hint style="info" %}
**Bei Verwendung eines Child-Themes:**

Hierzu wird immer die Theme Einstellung des **Eltern-Themes** genutzt. Ein Child-Theme hat keine eigenen Einstellungen - jedoch eine Styling Konfiguration.\
\
\&#xNAN;*Wo finde ich die Einstellungen? <https://themedocs-sw6.zenit.design/#schritt-5-einstellungen-plugin-konfiguration>*
{% endhint %}

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-32df681e1d23560c769cec1b9a23081a28113e96%2Fdocs-de-config-custom-css-code%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

### CSS Dateien (1)

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

### CSS Code (2)

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

*Es sind keine \<style>-Tags zu setzen.*

## Javascript Code

Kleinere Anpassungen und Funktionen lassen sich in den Einstellungen des Themes hinterlegen. Dabei kannst Du zwischen dem Verlinken von **externen Javascript Dateien** und einbetten von Inline **Javascript Code** wählen.

Auch kannst Du zwischen der Einbindung im \<Head/>-Bereich der Seite und dem Footer-Bereich wählen. Manche Anwendungen müssen in den \<Head/>-Bereich eingebunden werden, andere Scripte wiederum sollten in den Footer um das Laden der Seite nicht zu verzögern.

{% hint style="info" %}
**Bei Verwendung eines Child-Themes:**

Hierzu wird immer die Theme Einstellung des **Eltern-Themes** genutzt. Ein Child-Theme hat keine eigenen Einstellungen - jedoch eine Styling Konfiguration.\
\
\&#xNAN;*Wo finde ich die Einstellungen? <https://themedocs-sw6.zenit.design/#schritt-5-einstellungen-plugin-konfiguration>*
{% endhint %}

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-3dc5d746c25c071a0c9945d95043036b2b8072bb%2Fdocs-de-config-custom-js-code.png?alt=media" alt=""><figcaption></figcaption></figure>

### Head Javascript-Dateien (1)

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

### Head javascript Code (2)

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

*Es sind keine \<script>-Tags zu setzen.*

### Footer Javascript-Dateien (3)

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

### Footer javascript Code (4)

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

```

*Es sind keine \<script>-Tags zu setzen.*