# \[gelöst\] eigenes Script und Css bzw. Less einbinden

**URL:** <https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924>\
**Category:** Themes & Design\
**Created:** [29. März 2015 um 22:04 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924 "2015-03-29T22:04:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![useg](https://avatars.discourse-cdn.com/v4/letter/u/df705f/32.png) [@useg](https://forum.shopware.com/u/useg)\
**Post date:** [29. März 2015 um 22:04 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/1 "2015-03-29T22:04:22Z")

</div>

Hallo, ich habe in meinen Shop eine relativ breite Größentabelle, die für die mobile Ansicht zu breit ist. Nun habe ich [hier…](http://zurb.com/playground/responsive-tables) was gefunden muss aber dazu eine Script und Css-Datei einbinden. Wie mache ich das in der 5’er Version um die ganze Sache mal zu testen. Die Css-Datei habe ich schon in den Ordner /Responsive/frontend/\_public/src/less/\_components geschoben, von .css in .less umbenannt und die components.less mit den Eintrag “@import “\_components/responsive-tables.less”;” erweitert und diese wird auch geladen, aber was mach ich mit dem Script? Habe ich jetzt in den Ordner /Responsive/frontend/\_public/src/js kopiert aber da wird er leider nicht mitgeladen und finde bei den Scripten ja auch keine Datei bei der ich entsprechende JS-Datei, wie in der CSS, mit eintragen kann. Kann mir auch jemand sagen wie ich es auch mit der Css updatesicher machen kann, habe ja die Änderung jetzt nur erst mal im /Responsive/frontend/ gemacht. Besten dank im voraus.

---

<div class="post-metadata">

**Author:** ![EikeBrandtWarneke](https://avatars.discourse-cdn.com/v4/letter/e/cdc98d/32.png) [@EikeBrandtWarneke](https://forum.shopware.com/u/EikeBrandtWarneke)\
**Post date:** [29. März 2015 um 22:30 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/2 "2015-03-29T22:30:57Z")

</div>

Dafür solltest du ein eigenes Template anlegen: [https://devdocs.shopware.com/designers- … tup-guide/](https://devdocs.shopware.com/designers-guide/theme-startup-guide/) Viele Grüße

---

<div class="post-metadata">

**Author:** ![useg](https://avatars.discourse-cdn.com/v4/letter/u/df705f/32.png) [@useg](https://forum.shopware.com/u/useg)\
**Post date:** [29. März 2015 um 23:18 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/3 "2015-03-29T23:18:53Z")

</div>

Hallo Aquatuning, das eigene Template hatte ich schon angelegt, mir war nur nicht bewust wie ich jetzt die Css und Js-Dateien einbinde. Den Beitrag auf dem Du verlinkt hast hatte ich mir auch schon versucht mehrmals durch zulesen, aber da ich mit der englischen Sprache nicht so vertraut bin(over 50), habe ich es irgendwie nicht so ganz verstanden. Aber wenn man es sich dann ein wenig zusammenreimt ist es recht einfach. Die Css-Dateien in den Ordner „/Dein\_Template/frontend/\_public/src/css“ und die Js-Dateien in den Ordner „/Dein\_Template/frontend/\_public/src/js“ dann in die /Dein\_Template/Theme.php vor: ` public function createConfig(Form\Container\TabContainer $container) { } }` folgendes rein: `/\*\* @var array Defines the files which should be compiled by the javascript compressor \*/ protected $javascript = array( 'src/js/deine\_name.js' ); /\*\* @var array Defines the files which should be compiled by the javascript compressor \*/ protected $css = array( 'src/css/deine\_name.css' );` Beide Dateien werden dann zum Ende der komprimierten CSS bzw. JS eingefügt

---

<div class="post-metadata">

**Author:** ![n8lauscher](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/n8lauscher/32/13325_2.png) [@n8lauscher](https://forum.shopware.com/u/n8lauscher)\
**Post date:** [4. November 2015 um 18:23 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/4 "2015-11-04T18:23:20Z")

</div>

Hallo, hierzu habe ich mal eine Anfänger Frage! Gibt es eine Möglichkeit - Änderungen direkt nach Veränderung der Datei ansehen zu können? Also ohne das kompilieren? Ich bearbeite die Dateien direkt per FTP und muss bei jeder Änderung neu kompilieren. Geht dies auch einfacher? LG Mikele

---

<div class="post-metadata">

**Author:** ![msiegler](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@msiegler](https://forum.shopware.com/u/msiegler)\
**Post date:** [2. März 2016 um 10:14 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/5 "2016-03-02T10:14:03Z")

</div>

Ich versuche gerade eine CSS-Datei einzubinden.

Ich habe eine css-Datei, diese benenne ich um in .less

In der Datei all.less schreibe ich @import "\_components/nekton.less dazu.

Die Datei lieht natürlich im Ordner \_components

Nun hab ich den Cache geleert, aber leider sehe ich keine Veränderung.

In meiner CSS steht lediglich:

// Logo

.logo–link {  
background-color: #ffdd44;  
}

Was mache ich falsch??

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [2. März 2016 um 10:30 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/6 "2016-03-02T10:30:28Z")

</div>

@msiegler‍ Hast du denn auch dein Theme im Theme Manager neu zugewiesen, sodass deine Änderungen kompiliert werden?

---

<div class="post-metadata">

**Author:** ![steinsoftware](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@steinsoftware](https://forum.shopware.com/u/steinsoftware)\
**Post date:** [2. März 2016 um 10:32 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/7 "2016-03-02T10:32:38Z")

</div>

1. .logo–link könnte noch differenzierter gestyled werden z.B. mit .class .logo–link {backgournd-color: @background-color;} oder so ähnlich?

2. Im html Element z.B.

---

<div class="post-metadata">

**Author:** ![msiegler](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@msiegler](https://forum.shopware.com/u/msiegler)\
**Post date:** [2. März 2016 um 10:38 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/8 "2016-03-02T10:38:30Z")

</div>

Muss ich unbedingt ein neues Theme erstellen?

Ich hab nur die beiden Schritte wie oben beschrieben gemacht.

Oder reicht es wenn ich nun das bestehende Theme nochmal zuweise??

---

<div class="post-metadata">

**Author:** ![steinsoftware](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@steinsoftware](https://forum.shopware.com/u/steinsoftware)\
**Post date:** [2. März 2016 um 13:33 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/9 "2016-03-02T13:33:36Z")

</div>

> Muss ich unbedingt ein neues Theme erstellen?

Ja. Wenn man etwas macht, dann richtig. Ist aber total einfach über das Backend zu realisieren und hier gibt es Tutorials:

> **[Frontend Guides](https://developers.shopware.com/designers-guide/)**
>
> Frontend Guides

Überprüf doch einfach mal Punkt 1. und 2. von mir und mach Punkt 3. und 4.

---

<div class="post-metadata">

**Author:** ![JensBrunken](https://avatars.discourse-cdn.com/v4/letter/j/90ced4/32.png) [@JensBrunken](https://forum.shopware.com/u/JensBrunken)\
**Post date:** [2. März 2016 um 13:40 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/10 "2016-03-02T13:40:03Z")

</div>

> [@n8lauscher schrieb:](https://forum.shopware.com/profile/22229/n8lauscher "n8lauscher")
> 
> Hallo,
> 
> hierzu habe ich mal eine Anfänger Frage!  
> Gibt es eine Möglichkeit - Änderungen direkt nach Veränderung der Datei ansehen zu können? Also ohne das kompilieren?
> 
> Ich bearbeite die Dateien direkt per FTP und muss bei jeder Änderung neu kompilieren.  
> Geht dies auch einfacher?
> 
> LG  
> Mikele

klar

[https://developers.shopware.com/designers-guide/best-practice-theme-development/&nbsp](https://developers.shopware.com/designers-guide/best-practice-theme-development/&nbsp);

aber NICHT auf einem Live System :-)&nbsp;&nbsp;

es gibt noch das&nbsp;RemoteLiveReload-Extension für den Chrome.&nbsp;

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [2. März 2016 um 13:42 UTC](https://forum.shopware.com/t/gelost-eigenes-script-und-css-bzw-less-einbinden/25924/11 "2016-03-02T13:42:13Z")

</div>

> [@msiegler schrieb:](https://forum.shopware.com/profile/21624/msiegler "msiegler")
> 
> Muss ich unbedingt ein neues Theme erstellen?
> 
> Ich hab nur die beiden Schritte wie oben beschrieben gemacht.
> 
> Oder reicht es wenn ich nun das bestehende Theme nochmal zuweise??

Hallo,

wenn du kein eigenes Theme erstellst, dann kann und wird es wahrscheinlich bei deinem nächsten Update von Shopware dazu kommen, dass deine Änderungen wieder verloren gegangen sind, da bei einem Update die Basis-Themes überschrieben werden.

Ein eigenes Theme kannst du ja über den Theme Manager erstellen, wie du in diesem bspw. eine LESS-Datei mit CSS-Änderungen anlegst, ist bspw. im Punkt " **Styling**" hier beschrieben:&nbsp;[Example - Custom detail page](https://developers.shopware.com/designers-guide/custom-detail-page/) .

Bei Änderungen an den LESS-Dateien solltest du auch immer das Theme neu kompilieren.

Beste Grüße

Sebastian
