960 Grid Anpassung

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

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…

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=“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.

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.

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?

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?

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)

[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.

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/ Im Standard verwenden wir folgende Einstellungen: Column width: 30px Number of columns: 20 Gutter width: 20px