# 960 Grid Anpassung **URL:** \ **Category:** Shopware 3.5\ **Tags:** templates--design\ **Created:** [6. Februar 2011 um 19:13 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684 "2011-02-06T19:13:44Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\ **Post date:** [6. Februar 2011 um 19:13 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/1 "2011-02-06T19:13:44Z")
Hay, ich bearbeite gerade ein Template und habe den linken Bereich (left\_menu) komplett entfernt und den Content nach links verschoben. Den Content habe ich nun vergrößert von grid\_13 auf 17. Soweit so gut. Jetzt fangen meine Probleme an. Alle Features von Shopware sind auch grid\_13 (630px) optimiert. Wie bekomme ich nun am einfachsten alles auf 830px? in der shopware.js muss nun bestimmt sehr viel angepasst werden. Geht das überhaupt ohne weiteres? Oder handle ich mir nur Probleme ein? Danke ---
**Author:** ![Haijo](https://avatars.discourse-cdn.com/v4/letter/h/b5e925/32.png) [@Haijo](https://forum.shopware.com/u/Haijo)\ **Post date:** [6. Februar 2011 um 20:54 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/2 "2011-02-06T20:54:38Z")
hi,wenn du z.B. einfach in der Frameworks bei grid\_13 den Wert 830 eingibst.Oder wenn du in der style.css den .content oder .content inner veränderst,wird das herangezogen… ---
**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\ **Post date:** [6. Februar 2011 um 21:05 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/3 "2011-02-06T21:05:53Z")
Hey, da liegt nicht das Problem. Mit Grid\_17 stimmt soweit ja schon alles. Aber die Ajax Sachen aus der Shopware.js laufen trotzdem alle unter 630px. Sprich mein Content ist nun 830px breit, aber bannerslider, artikellisting etc. Eben nur 630. Die Frage ist, ob ich mir nun nicht Probleme einfange, wenn ich hier in der Shopware.js alles ändere? ---
**Author:** ![avenger](https://avatars.discourse-cdn.com/v4/letter/a/9de0a6/32.png) [@avenger](https://forum.shopware.com/u/avenger)\ **Post date:** [7. Februar 2011 um 05:37 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/4 "2011-02-07T05:37:08Z")
[quote=“ottscho”]Hey, da liegt nicht das Problem. Mit Grid\_17 stimmt soweit ja schon alles. Aber die Ajax Sachen aus der Shopware.js laufen trotzdem alle unter 630px. Sprich mein Content ist nun 830px breit, aber bannerslider, artikellisting etc. Eben nur 630. Die Frage ist, ob ich mir nun nicht Probleme einfange, wenn ich hier in der Shopware.js alles ändere?[/quote] Ist das wirklich immer noch in der shopware.js harcoded? In der 3.5.3 sollten eigentlich alle dort enthaltenen direkten Stylemanipulationen durch CSS-Klasssen Zuweisungen ersetzt worden sein… Zudem kann man sicher im CSS auch solche “harten” CSS-Styles überladen, indem man den neuen Styles ein “!important” mit gibt. z.B.: #IrgendeineId, .IrgendeineKlasse { width: 830px !important; } Und schon werden auch direkte Element-Styles überladen. Das ist sicher einer Änderung der js-Datei vorzuziehen. ---
**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\ **Post date:** [7. Februar 2011 um 07:41 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/5 "2011-02-07T07:41:16Z")
Ich könnte es ja über “jQuery Funktionen überladen” machen. Dann ist das ganze Updatesicher. Beispiel Bannerslider. Hier steht in der shopware.js folgendest: ` var sliderConfig = { 'headline': false, 'navigation': false, 'scrollSpeed': 800, 'rotate': false, 'width':630, 'height': 210, 'scrollWidth': 578, 'containerCSS': { 'margin': '0 0 15px 15px' } }; Wenn ich in der CSS hier rumspiele bekomme ich es nicht hin. Ich denke dies kann ich nur in der JS ändern. Da hier ja auch gesteuert wird, wie das Bild eingeblendet wird - 630px, -1260px etc. ` ---
**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\ **Post date:** [7. Februar 2011 um 09:17 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/6 "2011-02-07T09:17:15Z")
Ich habe jetzt folgende anpassungen gemacht. Überlagerung der JS Datei: [code] (function() { .basket.init = function () { var width = 858; var position = ‚fixed‘; if(.browser.msie && parseInt(.browser.version) == 6) { var width = width - 10; var position = ‚absolute‘; } var modalConfig = { ‚position‘: position, ‚animationSpeed‘: 200, ‚width‘: width+‚px‘, ‚textContainer‘: ’ ', ‚textClass‘: ‚ajax\_add\_article\_container‘ }; var sliderConfig = { ‚headline‘: false, ‚navigation‘: false, ‚scrollSpeed‘: 800, ‚rotate‘: false, ‚width‘:828, ‚height‘: 210, ‚scrollWidth‘: 776, ‚containerCSS‘: { ‚margin‘: ‚0 0 15px 15px‘ } }; })(jQuery); [/code] Nun habe ich aber noch das Problem, dass bei Sliden das Left Attribut sich ja ändert. 1 Banner = left: 0px; 2 Banner = left: -630px; 3 Banner = left: -1260px; Daher passt es immer noch nicht ganz. Wo muss ich den Wert ändern? ---
**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\ **Post date:** [7. Februar 2011 um 10:07 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/7 "2011-02-07T10:07:25Z")
Habe nun noch dies gefunden in der JS: ` config.\_slideContainer.animate({ 'left': -(config.scrollWidth \* slideNumber) ` Ich habe den Wert nun auch auf 828 geändert. Leider ohne Erfolg. Der DIV wird immer noch mit den left Attributen 0, -630 und -1260 erstellt. Wo liegt das Problem? ---
**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\ **Post date:** [7. Februar 2011 um 11:27 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/8 "2011-02-07T11:27:01Z")
So, hab es nun mal so hinbekommen. Aber das ist ja nicht die elegante Lösung: ` onfig.\_slideContainer.animate({ 'left': -(config.scrollWidth \* slideNumber) ` habe ich ersetzt mit: ` onfig.\_slideContainer.animate({ 'left': -(828 \* slideNumber) ` ---
**Author:** ![avenger](https://avatars.discourse-cdn.com/v4/letter/a/9de0a6/32.png) [@avenger](https://forum.shopware.com/u/avenger)\ **Post date:** [7. Februar 2011 um 11:34 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/9 "2011-02-07T11:34:41Z")
[quote=„ottscho“]Ich könnte es ja über „jQuery Funktionen überladen“ machen. Dann ist das ganze Updatesicher. Beispiel Bannerslider. Hier steht in der shopware.js folgendest: ` var sliderConfig = { 'headline': false, 'navigation': false, 'scrollSpeed': 800, 'rotate': false, 'width':630, 'height': 210, 'scrollWidth': 578, 'containerCSS': { 'margin': '0 0 15px 15px' } }; Wenn ich in der CSS hier rumspiele bekomme ich es nicht hin. Ich denke dies kann ich nur in der JS ändern. Da hier ja auch gesteuert wird, wie das Bild eingeblendet wird - 630px, -1260px etc. `[/quote] Ist doch noch ne Menge direktes Styling im Javascript: böse, böse, böse… Auch das verhindert flexible Layout-Änderungen. @Shopware AG Bitte wech damit, und durch CSS-Klassenzuordnung ersetzen. ---
**Author:** ![Stephan\_Pohl](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/stephan_pohl/32/10212_2.png) [@Stephan\_Pohl](https://forum.shopware.com/u/Stephan_Pohl)\ **Post date:** [14. Februar 2011 um 15:36 UTC](https://forum.shopware.com/t/960-grid-anpassung/1684/10 "2011-02-14T15:36:47Z")
Hey ottscho, wir haben in Version 3.5.3 alle nicht notwendigen CSS-Eigenschaften aus der jquery.shopware.js entfernt. Einzig die Scrollbreite (horizontal) bzw. die Scrollhöhe (vertikal) werden noch benötigt für das “Recommendation”-Plugin benötigt. Die Werte hierzu solltest du in den Template-Dateien des Plugins ändern können. Grüße Stephan //edit: Um das Grid-System anzupassen bietet 960gs einen Generator, der dir bei der Erstellung von Grids auf Basis des 960gs unter die Arme greift - [http://www.spry-soft.com/grids/](http://www.spry-soft.com/grids/) Im Standard verwenden wir folgende Einstellungen: Column width: 30px Number of columns: 20 Gutter width: 20px