# Individuelle Anpassungen mittels CSS

Du hast mit ThemeWare® verschiedene Möglichkeiten, um eigenes CSS-Styling zu deinem Shop hinzuzufügen. Je nachdem, was du ändern möchtest und wie umfangreich die Änderungen sind, wählst du die für dich passende Methode.

{% hint style="success" %}
**Tipp**: Das erstellen eines ThemeWare® Duplikates ist für CSS-Anpassungen nicht notwendig.
{% endhint %}

Bitte beachte, dass individueller Code nicht automatisch komprimiert wird. Komprimiere deinen individuellen Code am besten manuell, bevor du diesen einbindest.

{% hint style="info" %}
**Hinweis**: Individueller CSS-Code wird nicht automatisch komprimiert. Komprimiere deinen Code am besten manuell.
{% endhint %}

Bevor wir zu eigentlichen Einbindungen kommen, möchten wir noch darauf hinweisen, in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes) zu bearbeiten. Das kann zu diversen Problemen führen.

{% hint style="danger" %}
**Achtung**: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes).
{% endhint %}

Damit du dich möglichst leicht für einen Weg entscheiden kannst, haben wir dir jeweils die Vor- und Nachteile aufgelistet:

## Vor- und Nachteile

### 1. CSS-Code mit der ThemeWare® Konfiguration integrieren

Über die ThemeWare® Konfiguration ist es möglich schnell und unkompliziert kleine CSS-Anpassungen zu hinterlegen. Dieser Code wird zwar nicht komprimiert und es ist lediglich CSS-Syntax möglich, dennoch ist dies der einfachste Weg für Einsteiger.

**1.1) CSS-Code mit Textbaustein integrieren**

* **Vorteile**
  * schnelle Vorgehensweise (über die Shopware 6 Textbaustein-Verwaltung)
* **Nachteile**
  * veraltetet Methode
  * ausschließlich CSS-Syntax möglich
  * CSS-Code wird nicht automatisch komprimiert

**1.2) CSS-Code mit Konfigurationsfeld integrieren**

* **Vorteile**
  * schnellste Vorgehensweise (über die ThemeWare® Konfiguration)
  * empfohlene Methode
* **Nachteile**
  * ausschließlich CSS-Syntax möglich
  * CSS-Code wird nicht automatisch komprimiert

### 2. CSS-Code mit externer CSS-Datei integrieren

Die ThemeWare® Konfiguration bietet dir ebenfalls die Möglichkeit eine externe Datei über eine URL einzubinden. Damit kann auch eine Datei welche über ein CDN (Content Delivery Network) verfügbar ist integriert werden.

* **Vorteile**
  * externe Datei integrierbar
* **Nachteile**
  * ausschließlich CSS-Syntax möglich
  * CSS-Code wird nicht automatisch komprimiert
  * in der Shopware 6 Cloud nur eingeschränkt möglich

### 3. Individuellen SCSS-Code integrieren (für erfahrende Anwender)

Die derzeit professionellste Methode SCSS-Code zu integrieren, ist die Verwendung eine separaten Erweiterung. Hierfür gibt es spezielle Erweiterungen (Plugins oder Apps) im [Shopware Community Store](https://store.shopware.com/erweiterungen/?p=1\&o=12\&n=21\&c=1069\&shopwareVersion=6).

Alternativ kannst du unser kostenfreies "ThemeWare® Customizing Plugin" (Self-managed) bzw. die "ThemeWare® Customizing App" (Cloud) für die Integration von individuellen Anpassungen und eigenen Dateien nutzen.

* **Vorteile**
  * professionelle Vorgehensweise
  * SCSS-Syntax möglich
  * SCSS-Variablen möglich
  * SCSS-Funktionen möglich
  * SCSS-Code wird automatisch komprimiert
* **Nachteile**
  * eher für erfahrende Anwender
  * nur über eine externe Erweiterung möglich

## 1. CSS-Code integrieren

### 1.1) Individuellen CSS-Code mit Textbaustein integrieren

Hinterlege den gewünschten CSS-Code im Textbaustein "twt.custom.css" und aktiviere das folgende Konfigurationsfeld: Tab "Weiteres" => Bereich "Veraltet" => Feld "Individueller CSS-Code (Textbaustein)"

{% hint style="warning" %}
**Wichtig**: Diese Option war ein Workaround bis Option 1.2 möglich war. Die Option ist "deprecated" und wird von uns nicht mehr empfohlen und mit einem späteren Update entfernt.
{% endhint %}

### 1.2) Individuellen CSS-Code mit Konfigurationsfeld integrieren

Hinterlege den gewünschten CSS-Code in folgendem Konfigurationsfeld: Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individueller Code" => Feld "Individueller CSS-Code"

Der Inhalt der Konfigurationsfeldes wird 1:1 in einem `<style>` Tag im "Head" der HTML-Seite hinzugefügt. Trage hier einfach den gewünschten CSS-Code ein.

#### Beispiel:

```css
.my-class { color: #000000; }
```

{% hint style="success" %}
**Tipp**: Damit die "**Experten-Einstellungen**" in der Storefront angewendet werden aktiviere bitten den "**Experten-Modus**" und deaktiviere den "**Debug-Modus**" von ThemeWare®:&#x20;

* Tab "Weiteres" => Bereich "Experten-Einstellungen" => Experten-Modus
* [Experten-Modus](/wissensdatenbank/profiwissen/experten-modus.md)
* [Debug-Modus](/wissensdatenbank/profiwissen/debug-modus.md)
  {% endhint %}

## 2. CSS-Code mit externer CSS-Datei integrieren

Um eine Datei lokal auf deinem Server zu hinterlegen und diese in die Storefront zu integrieren, gehe bitte wie folgt vor:

### 2.1) CSS-Datei auf dem Server erstellen und bearbeiten

1. Logge dich per FTP auf deinem Server ein und wechsle in den Ordner "**css**".
   * Ordnerpfad: "public/css/"
2. Erstelle die Datei "**styles.css**".
3. Hinterlege in der "styles.css" deinen CSS-Code.
4. Speichere die Änderung der Datei "styles.css" und lade diese ggf. erneut hoch.

### 2.2) CSS-Datei mit ThemeWare® einbinden

1. Öffne ThemeWare® im Theme-Manager und wechsle in den Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "CSS-Datei".
2. Trage im Feld "**CSS-Datei**" den Pfad zur "styles.css" ein. (z.B. "deinshop.de/css/styles.css")
3. Wähle die Option "Ja" im Feld "**CSS-Datei laden**" aus.
4. Speichere die Einstellungen damit das aktuelle Theme kompiliert wird und Änderungen in die Storefront wirksam werden.

{% hint style="info" %}
**Hinweis**: Der Zugriff auf externe Dateien (Dateien auf einer abweichenden Domain) wird nicht empfohlen, beachte hierzu "Cross-Origin Resource Sharing".
{% endhint %}

## 3. SCSS-Code integrieren (für erfahrende Anwender)

Eine ausführliche Anleitung findest du im Artikel:

{% content-ref url="/pages/vI0xv5IE1vA6Zs7uC8FZ" %}
[Individuelle Anpassungen mittels SCSS](/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mittels-scss.md)
{% endcontent-ref %}

***

## Zusätzliches ThemeWare® Wissen

### Abgrenzung von Anpassungen

#### Anpassungen für einen bestimmten Verkaufskanal

Ist eine CSS-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung über unsere **ThemeWare® Konfiguration** mit der "**Body-Klasse**" einzuschränken.

Hinterlege dafür in der Konfiguration vom entsprechenden Theme (bzw. Theme-Duplikat) für den entsprechenden Verkaufskanal unter `Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse"` einen eindeutigen Namen für diesen Verkaufskanal (z.B.: `meinshopname`).

Dieser Name kann dann durch die Position am HTML-Body für SCSS-Prüfungen genutzt werden.

```scss
// Anpassung für den Verkaufskanal mit der Klasse "meinshopname"
.meinshopname h1 {
    // Anpassung...
}
```

#### Anpassung für eine bestimmte Seite (Kategorie)

Ist eine CSS-Anpassung nur für eine bestimmte Seite relevant, hast du die Möglichkeit deine Anpassung über das **ThemeWare® Zusatzfeld** "Body-Klasse" einzuschränken.

Hinterlege dafür im Zusatzfeld "**Body-Klasse**" von der entsprechenden Seite (Kategorie) im `Tab "Allgemein" => Bereich "Zusatzfelder" => Tab "Kategorien (ThemeWare® ...)" => Zusatzfeld "Body-Klasse"` einen eindeutigen Namen für diesen Verkaufskanal (z.B.: meinshopname).

Dieser Name kann dann durch die Position am HTML-Body für SCSS-Prüfungen genutzt werden.

```scss
// Anpassung für die Kategorie mit der Klasse "meinshopname"
.meinshopname h1 {
    // Anpassung...
}
```

***

## Tipps

### CSS-Hierarchie

Du kannst die CSS-Hierarchie beim Überschreiben von CSS/SCSS-Anweisungen ganz einfach mit der "Body-Klasse" in der ThemeWare® Konfiguration beeinflussen. Dadurch kannst du unschöne `!important` Anweisungen vermeiden.&#x20;

Mehr Informationen dazu findest du in folgender Anleitung:

{% content-ref url="/pages/8Zv8vvtJ9Vj1QEFkNgZp" %}
[CSS-Hierarchie](/wissensdatenbank/anleitungen/individuelle-anpassungen/css-hierarchie.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.themeware.design/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mittels-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.