# Sort. &amp; Artikel pro Seite Felder breiter machen?

**URL:** <https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735>\
**Category:** Shopware 3.5\
**Tags:** programming\
**Created:** [16. April 2013 um 17:21 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735 "2013-04-16T17:21:44Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![snom](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@snom](https://forum.shopware.com/u/snom)\
**Post date:** [16. April 2013 um 17:21 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/1 "2013-04-16T17:21:44Z")

</div>

Hallo liebe Gemeinde, ich bin schon fast am verzweifeln… Ich möchte in meinem Shop „Shopware 4“ in der Listenansicht das Sortierung Feld (POPUP - Erscheinungsdatum, Beliebtheit etc.) sowie Artikel pro Seite breiter machen? Ich weiß nur nicht wo ich im Code suche muss? Mit Firebug finde ich die Stelle nicht… oder ich bin einfach zu B… Kann mir bitte jemand erfahrenes Helfen?

---

<div class="post-metadata">

**Author:** ![leseaw](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@leseaw](https://forum.shopware.com/u/leseaw)\
**Post date:** [16. April 2013 um 21:10 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/2 "2013-04-16T21:10:47Z")

</div>

das ist kein code das nennt sich css 🙂 wenn du noch ein bild angehänht hättest dann hätte man dir vielleicht noch genau sagen können wo du was ändern musst 🙂

---

<div class="post-metadata">

**Author:** ![snom](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@snom](https://forum.shopware.com/u/snom)\
**Post date:** [17. April 2013 um 10:40 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/3 "2013-04-17T10:40:01Z")

</div>

Hallo, in der CSS Datei habe ich es nicht gefunden, anbei eine Grafik von den PopUps die ich meine. [http://img5.fotos-hochladen.net/uploads … pnho9y.png](http://img5.fotos-hochladen.net/uploads/leiste85kdpnho9y.png) Ich hoffe, jemand kann mir Helfen?

---

<div class="post-metadata">

**Author:** ![snom](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@snom](https://forum.shopware.com/u/snom)\
**Post date:** [17. April 2013 um 15:28 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/4 "2013-04-17T15:28:03Z")

</div>

Kann denn keiner Helfen?

---

<div class="post-metadata">

**Author:** ![Patrick\_Schucker](https://avatars.discourse-cdn.com/v4/letter/p/a5b964/32.png) [@Patrick\_Schucker](https://forum.shopware.com/u/Patrick_Schucker)\
**Post date:** [17. April 2013 um 16:29 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/5 "2013-04-17T16:29:17Z")

</div>

Hi snom, nicht so ungeduldig 😉 Also eine genau Angabe kann ich dir leider nicht geben. Aber in der Datei /templates/\_default/frontend/listing/listing\_actions.tpl findest du den Block ‚frontend\_listing\_actions\_top‘. Darin sind die select Boxen. CSS technisch würde ich in der style.css suchen. Ich hoffe ich konnte dir etwas weiter helfen. Gruß Patrick

---

<div class="post-metadata">

**Author:** ![snom](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@snom](https://forum.shopware.com/u/snom)\
**Post date:** [17. April 2013 um 16:38 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/6 "2013-04-17T16:38:57Z")

</div>

Hallo Partick Schücker, vielen dank für die Info, in dieser Datei /templates/\_default/frontend/listing/listing\_actions.tpl habe ich den entsprechenden Block ‚frontend\_listing\_actions\_top‘ gefunden, jedoch weiß ich nicht in welcher CSS und an welcher Stelle ich suchen muss. In der style.css habe ich gesucht… ohne erfolg, auch mit der Hilfe von Firebug… Ohne erfolg :oops:

---

<div class="post-metadata">

**Author:** ![leseaw](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@leseaw](https://forum.shopware.com/u/leseaw)\
**Post date:** [17. April 2013 um 16:48 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/7 "2013-04-17T16:48:53Z")

</div>

das dürfte auch noch ein Bild sein 🙂 daher du kannst so breit machen wie du willst wenn du die grafik nicht noch anpasst.

---

<div class="post-metadata">

**Author:** ![snom](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@snom](https://forum.shopware.com/u/snom)\
**Post date:** [17. April 2013 um 17:10 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/8 "2013-04-17T17:10:30Z")

</div>

🙂 Nur wo und wie?

---

<div class="post-metadata">

**Author:** ![Patrick\_Schucker](https://avatars.discourse-cdn.com/v4/letter/p/a5b964/32.png) [@Patrick\_Schucker](https://forum.shopware.com/u/Patrick_Schucker)\
**Post date:** [17. April 2013 um 17:40 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/9 "2013-04-17T17:40:06Z")

</div>

Hi snom, ein Bild ist es nicht. Schau mal in der /template/\_default/frontend/\_resources/style.css Zeile 272 und Zeile 275. Die Werte werden nicht 1 zu 1 übernommen sondern noch dynamisch angepasst. Aber ich denke damit kommst du erst mal etwas weiter. Gruß Patrick

---

<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:** [18. April 2013 um 14:56 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/10 "2013-04-18T14:56:03Z")

</div>

Hallo, wenn Du die breiter haben möchtest, dann geht das nicht mit einer CSS-Änderung alleine. Die hübsche Formulierung „dynamisch angepasst“ heißt eigentlich nur, dass die CSS-Datei keine Rolle mehr spielt. Die Breiten beider Auswahlfelder werden sowohl für das umgebende

als auch für das -Elemenent per style=„width:“-Attribut gesetzt. Für beide muss es in der CSS-Datei mit important überschrieben werden. Dies hat dann leider die Folge, dass die gesamte „Zeile“ zu breit wird und das rechte select quasi einen Zeilenumruch erzwingt. Wenn das geändert werden soll, dann müssen die Breiten/Abstände der drei „Blöcke“ Sortierung, Ansicht und Artikel pro Seite angepasst werden. Falls da ein "style=„width: XYZ px“ im HTML-Source auftaucht, muss man im CSS-File mit !important arbeiten. Ist zwar alles andere als elegant, aber es geht aufgrund des Standardtemplates von Shopware nicht anders.

---

<div class="post-metadata">

**Author:** ![snom](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@snom](https://forum.shopware.com/u/snom)\
**Post date:** [22. April 2013 um 12:35 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/11 "2013-04-22T12:35:46Z")

</div>

Hallo, leider funktioniert es nicht mit der CSS datei, kann mir evtl. jemand einen Tip geben und evtl. einen Beispiel Code, den ich ändern muss?

---

<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:** [22. April 2013 um 12:54 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/12 "2013-04-22T12:54:50Z")

</div>

> [@snom](#):
>
> Hallo, leider funktioniert es nicht mit der CSS datei, kann mir evtl. jemand einen Tip geben und evtl. einen Beispiel Code, den ich ändern muss?

---

<div class="post-metadata">

**Author:** ![snom](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@snom](https://forum.shopware.com/u/snom)\
**Post date:** [22. April 2013 um 14:48 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/13 "2013-04-22T14:48:36Z")

</div>

In welcher Datei muss ich den CSS Code ändern?

---

<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:** [22. April 2013 um 14:54 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/14 "2013-04-22T14:54:54Z")

</div>

[quote=„snom“]In welcher Datei muss ich den CSS Code ändern?[/quote] emotion\_meintemplate.css

---

<div class="post-metadata">

**Author:** ![snom](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@snom](https://forum.shopware.com/u/snom)\
**Post date:** [22. April 2013 um 15:01 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/15 "2013-04-22T15:01:04Z")

</div>

emotion\_meintemplate.css ? Wo ist die denn? Ich verwende emotion\_green

---

<div class="post-metadata">

**Author:** ![leseaw](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@leseaw](https://forum.shopware.com/u/leseaw)\
**Post date:** [22. April 2013 um 15:56 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/16 "2013-04-22T15:56:44Z")

</div>

Hilfe lesen ersten schritte im template

---

<div class="post-metadata">

**Author:** ![snom](https://avatars.discourse-cdn.com/v4/letter/s/dec6dc/32.png) [@snom](https://forum.shopware.com/u/snom)\
**Post date:** [22. April 2013 um 16:21 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/17 "2013-04-22T16:21:34Z")

</div>

🙂 Habe es nun hinbekommen… Vielen Vielen Dank Euch allen. Natürlich in der emotion.css

---

<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:** [22. April 2013 um 20:06 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/18 "2013-04-22T20:06:18Z")

</div>

[quote=“snom”]🙂 Habe es nun hinbekommen… Vielen Vielen Dank Euch allen. Natürlich in der emotion.css[/quote] Natürlich nicht! 😉 Wenn Du es dort machst, dann wird es beim nächsten Update von Shopware überschrieben. Unbedingt im WIKI das Tutorial zur Templateerstellung und Vererbung nachlesen. Wenn man Änderungen macht, dann nur in einem eigenen abgeleiteten Template. daher hatte ich auch den “Platzhalter” meintemplate verwendet. Du kannst z. B. das Directory mit emotion\_green einfach in emotion\_meins umbenennen. Dort findest Du dann eine emotion\_green.css. Dort die Änderungen einfügen. Diese “überschreiben” alle emotion.css Angaben. Die Änderungen an das Ende der emotion\_green.css kopieren. Im Backend das emotion\_meins als Template wählen und die Caches leeren. Tipp: Das Thema gehört in Template&Design und hat mit Programmierung nichts zu tun.

---

<div class="post-metadata">

**Author:** ![Patrick\_Schucker](https://avatars.discourse-cdn.com/v4/letter/p/a5b964/32.png) [@Patrick\_Schucker](https://forum.shopware.com/u/Patrick_Schucker)\
**Post date:** [23. April 2013 um 09:29 UTC](https://forum.shopware.com/t/sort-amp-artikel-pro-seite-felder-breiter-machen/12735/19 "2013-04-23T09:29:04Z")

</div>

Hey snom, schau dir am besten mal [http://wiki.shopware.de/Designers-Guide\_cat\_486.html](http://wiki.shopware.de/Designers-Guide%5C_cat%5C_486.html) an. Als Einstieg empfehle ich dir [http://wiki.shopware.de/Schnelleinstieg … 6\_486.html](http://wiki.shopware.de/Schnelleinstieg-Template-Tutorial-4.0%5C_detail%5C_876%5C_486.html) Gruß Patrick
