Shopbreite+Hintergrund

Wo genau kann ich denn die Gesamtbreite des Shops (3.5) ändern bzw.den Hintergrund um den Shop???:wtf:

Schau doch mal hier: http://www.shopware.de/wiki/Template-Tu … l_517.html :wink:

[quote=„Haijo“]Wo genau kann ich denn die Gesamtbreite des Shops (3.5) ändern bzw.den Hintergrund um den Shop???:wtf:[/quote] Die Gesamtbreite des Design ist 1000px. Wenn du die Breiten ändern möchtest, dann kann ich dir empfehlen ein neues Grid zu erstellen. Hierzu kannst du den Variable Grid System Generator des 960gs verwenden - http://www.spry-soft.com/grids/ Wichtig! Bitte achte darauf, dass du 20 Spalten hast, da du sonst die kompletten Breiten bzw. Gridklassen im Template anpassen musst. Wenn du dir ein neues Grid erstellt hast, dann ersetze alle Gridklassen in der framework.css, welche du unter /_default/frontend/_resources/styles/framework.css findest. Um den Hintergrund zu ändern, kannst du dich an das Tutorial wenden, welches Andrè gepostet hat. Grüße

Hallo Stephan, vielen Dank für den Tipp! Es ist jetzt das erste Mal, dass ich mit grid arbeite, aber bin begeistert von dem Konzept! Bei mir ist es nun so, dass ich meine komplette Shop-Breite gerne auf 960px definieren würde, also inklusive Border. Ich finde 1000px ehrlich gesagt ein wenig zu breit. Mein Design sieht es vor, dass um die Klasse „container_20“ kein 1px, sondern ein 10px breiter Border dazu kommt. Und ich habe auch noch eine Hintergrundgrafik, die man auch mit 1024 Bildschirm-/Browser-Breite sehen soll. Habe nun das Grid-Gitter so definiert, dass inklusive Border der Shop genau eine Breite von 960 px hat. Meine Frage: Auf der Startseite würde ich gerne das animierte Banner oben nutzen, wie es der Demo-Shop auch macht. Nur bekomme ich momentan keinen animierten Banner auf der Startseite zustande. Ehrlich gesagt, dachte ich das passiert automatisch wenn man entsprechend für die Startseite Banner hochlädt!? Was muss ich machen, damit ich den animierten Banner bekomme? Und wird dieser animierte Banner sich dann an das neue grid-Gitter anpassen? Oder wird der Banner über seinen vorhergesehenen Platz gehen?

Hallo hubix, freut mich dass dir unsere Entscheidung für den Einsatz eines Grid-Systems gefällt. Wenn du hier noch ein paar offene Fragen hast, dann kann ich dir einen Blogartikel von Nettuts+ empfehlen - http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/ Nun zu deiner Frage - um die animierten Banner auf der Startseite anzuzeigen muss du das Plugin “Recommendations” unter “Einstellungen -> Plugins -> Frontend -> Default” installieren. Wenn du dies gemacht hast, dann bitte einmal den Shopcache leeren und das Backend leeren. Jetzt findest du unter “Marketing” einen neuen Unterpunkt namens “Slider Komponenten”, welcher für die Konfiguration der Slider dient. Hier klickst du in der linken Spalte auf “Deutsch” und aktivierst den ersten Punkt “Banner zu Slider zusammenfassen”. Jetzt werden die Banner, die du in der Kategorie “Deutsch” über “Marketing -> Banner” hochgeladen hast, animiert auf der Startseite angezeigt. Um die Sliderbreite (usw.) anzupassen öffnest du unter “templates/_default/plugins/recommendation” die Datei “blocks_index.tpl”, wo du die Einstellungen zum Slider findest. {if $banner\_active} $('.slider\_banner').ajaxSlider('locale', { 'width':630, 'height':386, 'scrollWidth': 630, 'containerClass': 'bannerSlider', 'outer': false, 'headline': false, 'rotate': true, 'scrollSpeed': 600, 'containerCSS': { 'marginBottom': '15px'} }); {/if} Bitte beachte aber, dass wenn du Änderungen in _default-Ordner machst, dass dann dein Template nicht mehr updatefähig wird.

1 Like

Hallo Stepahn, hallo Shopware-Team! Da ich selbst beruflich mit Webdesign und HTML/CSS arbeite, ist für mich das Design des Shops sehr wichtig. Nun habe ich mich mit dem grid-System näher auseinandergesetzt. Es war an sich auch ganz einfach eine neues grid-Gitter-CSS zu erstellen. Nur wenn man ein neues grid-CSS nutzt, dann stimmt ja auch mehr oder weniger das ganze CSS (ua. style.css) nicht mehr. Das kann ganz schön ne Frickelei und Aufwand sein. Die Standard-Breite von 1002px (container_20: 100px + border: 2px) finde ich doch recht knapp bemessen, in der Hinsicht wenn man ein Design auf 1024 optimieren will. Nach oben hat der Shop einen Abstand von 30px (glaube ich), aber nach links und rechts nur 3px Abstand. Erhöht man den 1px border nur um 3px auf dann 4px, dann muss man im Firefox schon anfangen links-rechts zu scrollen. Das ist ein wenig unschön. Und auch wenn man den border nicht erhöht, dann sieht es einfach nicht so toll aus, wenn zwar nach oben Luft hat, aber nach links und recht keine Luft ist. Man könnte zwar den Abstand oben auf das Seitenmaß verringern, aber dann sieht das auch nicht unbedingt besser aus, wenn an allen Seiten der Hintegrund 3px durchblitzt. Ich hätte mir eine Shopbreite von ca. 960px bis max. 980px gewünscht. Mit so einer Breite könnte man designtechnisch bezüglich Rand und Hintergrund noch was für die 1024px Auflösung machen. Nur ein paar Pixel schmaler würden ja reichen :wink: Vielleicht macht ihr euch darüber mal ein paar Gedanken, vielleicht könnt ihr ja meine Überlegungen nachvollziehen.

Hallo Stepahn, du hast geschrieben das wenn ich Änderungen im default ordner vornehme mein Template nicht mehr updatefähig ist.Wie genau muss ich mir das vorstellen? Letztendlich muss ich ja da Änderungen machen,wenn ich meine Shopoptik so gestalten will,das ich mich von anderen abhebe und das ganze individuell aussehen soll. Ich hab jetzt nie Kopie vom default ordner gemacht und hab sie mytemplate genannt.Kann ich das grundsätzlich so machen???

Hi, schaue mal in diesen Artikel, da wird das sehr gut beschrieben eigentlich: http://www.shopware.de/wiki/Template-Tu … l_517.html

Hi, wo werden denn die Breiten für die Listenansicht bzw. Tabellenansicht vordefiniert? Dann wollt ich noch was anpassen.Wenn ich ne Haupkategorie anklick werden mir 4 Miniaturbilder angezeigt.Geh ich dann auf ne Unterkategorie anklick,werden mir 3 Miniaturbilder nebeneinander angezeigt.Wie kann ich das denn allgemein auf 3 einstellen??? :wtf:

[quote=„Haijo“]Hallo Stepahn, du hast geschrieben das wenn ich Änderungen im default ordner vornehme mein Template nicht mehr updatefähig ist.Wie genau muss ich mir das vorstellen? Letztendlich muss ich ja da Änderungen machen,wenn ich meine Shopoptik so gestalten will,das ich mich von anderen abhebe und das ganze individuell aussehen soll. Ich hab jetzt nie Kopie vom default ordner gemacht und hab sie mytemplate genannt.Kann ich das grundsätzlich so machen???[/quote] Hey Haijo, der „_default“-Ordner dient als Grundgerüst für alle personalisierten Templates. Um das Template updatefähig zu gestalten haben wir uns dazu entscheiden auf das Block-System von Smarty 3 zurück zugreifen. Dieses Blocksystem bietet die Möglichkeiten von uns festdefinierte Container im Template zu überschreiben bzw. zu erweitern und Template-Dateien zu vererben. Wenn Sie jetzt ein neues Template erstellen wollen, dann ist es ja meistens so, dass der Großteil der Grundstruktur nicht angepasst werden muss, sondern meist nur punktuell Anpassungen durchführt werden. Dazu können Sie dass oben erwähnte Block-System verwenden um die benötigten Blöcke zu ändern. Wenn wir jetzt in späteren Updates neue Features einbauen und das Template bearbeiten müssen, dann wird im Updateprozess der komplette Ordner „_default“ ersetzt aber die definierten Blöcke bleiben trotzdem bestehen, so dass Sie den Vorteil haben, dass Sie direkt die neuen Features von Shopware nutzen können und gleichzeitig nicht Ihre Änderungen bzw. Anpassungen verlieren. Ich hoffe, dass ich etwas mehr Klarheit in die Thematik bringen konnte. [quote=„Haijo“]Hi, wo werden denn die Breiten für die Listenansicht bzw. Tabellenansicht vordefiniert? Dann wollt ich noch was anpassen.Wenn ich ne Haupkategorie anklick werden mir 4 Miniaturbilder angezeigt.Geh ich dann auf ne Unterkategorie anklick,werden mir 3 Miniaturbilder nebeneinander angezeigt.Wie kann ich das denn allgemein auf 3 einstellen??? :wtf:[/quote] Die Breiten für die Listen bzw. Tabellenansicht werden in der style.css definiert. Hierzu verwenden wir jeweils eine ID. [list] [*] #listing - 4 Spaltig[/*] [*] #listing-3col - 3 Spaltig[/*] [*] #listing-2col - 2 Spaltig[/*] [*] #listing - 1 Spaltig bzw. Tabellenansicht[/*][/list] Dazu hast du aber auch im Backend die Möglichkeit die Spaltigkeit zu ändern. Hierzu gehst du unter Artikel -> Kategorie -> die entsprechende Kategorie in der linken Spalte auswählen und dann den Tab „Einstellungen“ öffnen. Hier hast du jetzt die Möglichkeit durch die Auswahlbox „Auswahl Listing“ die Spaltigkeit zu ändern. Falls du die Auswahl der verschiedenen Listing seitens des Kundes zu unterbinden, dann hast du in den Einstellungen auch die Möglichkeit dazu. Hierzu aktivierst du einfach den Punkt „Darstellungswechsel im Listing deaktivieren“. Grüße Stephan

Danke für die Antwort, und wie sieht es aus mit meiner Frage bezüglich der Tabellenansicht bzw.Listenansicht. Wo kann ich da die Breiten ändern bzw. auf 3 pro Reihe bei Tabellenansicht einstellen? Kannst du mir da noch einen Tipp geben? Danke

Hatte meinen Beitrag nochmal bearbeitet, wo ich die Frage gesehen hatte. Schau da bitte eben nach - viewtopic.php?f=14&t=215&p=1597#p1611

Vielen Dank dafür, der Funke springt laaaangsam über. :slight_smile: