# unterschiedliche Klassen an html-Elemente vergeben

**URL:** <https://forum.shopware.com/t/unterschiedliche-klassen-an-html-elemente-vergeben/15195>\
**Category:** Shopware 3.5\
**Tags:** themes--design\
**Created:** [24. August 2013 um 14:37 UTC](https://forum.shopware.com/t/unterschiedliche-klassen-an-html-elemente-vergeben/15195 "2013-08-24T14:37:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Markus123](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Markus123](https://forum.shopware.com/u/Markus123)\
**Post date:** [24. August 2013 um 14:37 UTC](https://forum.shopware.com/t/unterschiedliche-klassen-an-html-elemente-vergeben/15195/1 "2013-08-24T14:37:45Z")

</div>

Hallo, ich möchte mehrere html-Elemente der Einkaufswelten auf der Startseite einfügen und diese dann unabhängig voneinander bearbeiten (Größe anpassen, verschieben, Rahmen ändern, box shadow etc.). Damit das aber möglich ist muss man ja jeder box eine andere Klasse gegeben haben, denn wenn man das nicht tut und Änderungen vornimmt verändern sich ja alle Elemente gleich. Ich müsste sozusagen jedem DIV Bereich des Html Elements eine neue Klasse geben. Das sind alle

von einem html-Element das ich über Firebug rauskopiert habe, die neue Klasse die man einfügen müsste habe ich hier rot dargestellt:

text

Ist der Plan hier überhaupt richtig das so zu machen? Ich weiß das das template für die html-Elemente hier zu finden ist: /\_default/widgets/emotion/components/component\_html.tpl Hier der Inhalt der component\_html.tpl: [code]

{if $Data.cms\_title}

## {$Data.cms\_title}

{/if}  
{$Data.text}

[/code] Ich weiß nur nicht was ich hier jetzt verändern muss damit das so wird wie ich es mir vorgestellt habe :wtf: Wäre die vorgehensweise so richtig? Was müsste ich in der Template Datei ändern? Für Hilfe bin ich wie immer sehr dankbar 🙂 lg, markus

---

<div class="post-metadata">

**Author:** ![hth](https://avatars.discourse-cdn.com/v4/letter/h/b77776/32.png) [@hth](https://forum.shopware.com/u/hth)\
**Post date:** [24. August 2013 um 15:15 UTC](https://forum.shopware.com/t/unterschiedliche-klassen-an-html-elemente-vergeben/15195/2 "2013-08-24T15:15:16Z")

</div>

Hallo, so wie das beschrieben ist, geht es nicht. Nur die Smarty-Blöcke mit den Variablen werden dynamisch je HTML-Element aus dem Backend übernommen. Nur dort können auch Klassen geändert werden. Möchte man die HTML-Elemente der Einkaufwelt verwenden, kann man das Smarty-Template natürlich verändern. Das betrifft aber erst den HTML-Code ab folgender Zeile - siehe tpl-Datei .

Die anderen Div-Conatainer werden von dem zentralen Einkaufwelten-Template erzeugt, z. B. um das Grid entsprechend den Vorgaben im Backend zu berechnen. Viele Grüße H. Thomas ([info@mycetome.de](mailto:info@mycetome.de)) [quote=“Markus123”]Hallo, ich möchte mehrere html-Elemente der Einkaufswelten auf der Startseite einfügen und diese dann unabhängig voneinander bearbeiten (Größe anpassen, verschieben, Rahmen ändern, box shadow etc.). Damit das aber möglich ist muss man ja jeder box eine andere Klasse gegeben haben, denn wenn man das nicht tut und Änderungen vornimmt verändern sich ja alle Elemente gleich. Ich müsste sozusagen jedem DIV Bereich des Html Elements eine neue Klasse geben. Das sind alle  
von einem html-Element das ich über Firebug rauskopiert habe, die neue Klasse die man einfügen müsste habe ich hier rot dargestellt:

text

Ist der Plan hier überhaupt richtig das so zu machen? Ich weiß das das template für die html-Elemente hier zu finden ist: /\_default/widgets/emotion/components/component\_html.tpl Hier der Inhalt der component\_html.tpl: [code]

{if $Data.cms\_title}

## {$Data.cms\_title}

{/if}  
{$Data.text}

[/code] Ich weiß nur nicht was ich hier jetzt verändern muss damit das so wird wie ich es mir vorgestellt habe :wtf: Wäre die vorgehensweise so richtig? Was müsste ich in der Template Datei ändern? Für Hilfe bin ich wie immer sehr dankbar 🙂 lg, markus[/quote]

---

<div class="post-metadata">

**Author:** ![Markus123](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Markus123](https://forum.shopware.com/u/Markus123)\
**Post date:** [24. August 2013 um 16:16 UTC](https://forum.shopware.com/t/unterschiedliche-klassen-an-html-elemente-vergeben/15195/3 "2013-08-24T16:16:38Z")

</div>

> [@](#):
>
> Nur die Smarty-Blöcke mit den Variablen werden dynamisch je HTML-Element aus dem Backend übernommen. Nur dort können auch Klassen geändert werden.

[/code] zugreifen und eine weitere Klasse anfügen? Wie genau mache ich das denn?

---

<div class="post-metadata">

**Author:** ![hth](https://avatars.discourse-cdn.com/v4/letter/h/b77776/32.png) [@hth](https://forum.shopware.com/u/hth)\
**Post date:** [24. August 2013 um 17:11 UTC](https://forum.shopware.com/t/unterschiedliche-klassen-an-html-elemente-vergeben/15195/4 "2013-08-24T17:11:38Z")

</div>

> [@Markus123](#):
>
> [quote]Nur die Smarty-Blöcke mit den Variablen werden dynamisch je HTML-Element aus dem Backend übernommen. Nur dort können auch Klassen geändert werden.

[/code] zugreifen und eine weitere Klasse anfügen? Wie genau mache ich das denn?[/quote] Nein, das heißt es nicht. Im Editor des HTML-Elements im Backend erzeugt man den Inhalt der Variable $Data.text und dort kann man HTML-Code hinterlegen (HTML-Modus des Editors). In dem Beispiel mit den roten neuen Klassen ist erst die Zeile ab  
Teil des Smarty-Templates für das HTML-Element der Einkaufwelt. Ab dieser Position kann man ein eigenes Template erstellen und anstatt des Standard-Einkaufwelten-Elements verwenden (component\_html.tpl). Man kann die Rahmen/Schatten auch in dem HTML-Code, den man im Editor eingibt, hinterlegen. Die Klassen html-text-element und html-text-inner-element sind über das CSS regulierbar, aber nur für alle HTNML-Einkaufwelten-Elemente gleichzeitig. Wenn das alles nicht ausreicht, muss man eigene Einkaufwelten-Elemente in der Datenbank registrieren und Templates dazu schreiben. Viel Erfolg HTH Wenn darüber hinaus noch Beratungsbedarf besteht, empfehle ich eines unserer Support-Ticket-Pakete. Kontakt unter [info@mycetome.de](https://info@mycetome.de)
