# override Einkaufswelt Spalten anpassen für masonry in emotion.less

**URL:** https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260
**Category:** Themes & Design
**Created:** [5. Februar 2016 um 15:47 UTC](https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260 "2016-02-05T15:47:20Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![blockdesigner](https://avatars.discourse-cdn.com/v4/letter/b/54ee81/32.png) [@blockdesigner](https://forum.shopware.com/u/blockdesigner)
#### Post date: [5. Februar 2016 um 15:47 UTC](https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260/1 "2016-02-05T15:47:20Z")

</div>

Hallo liebe Bastlergemeinde,

ich würde gerne in den Spaltenanzahl der Einkaufswelten anpassen für den Masonry-Effekt.

In der emotion.less gibt es gleich ganz oben die Festlegung wie viele Spalten beim Masonry-Effekt auf welchem Gerät generiert werden. Ich kann auch in der orginal Datei die Spaltenanzahl verändern und es funktioniert dann auch wie gewünscht.&nbsp;

Wenn ich aber in meinem eigenen Template in meiner emotion.less den entsprechenden Teil kopiere und anpasse gibt es einen Fehler, sodass das Theme nicht kompiliert wird.

Hat jemand eine Ahnung wie ich das hinbekomme oder wo das Problem liegt, dass ich keinen Override dafür erstellen kann ?!&nbsp;

Ansonsten wäre das die perfekte Lösung um mit dem Masonry-Effekt auf allen Devices die Ausgabe nach meinem Wunsch zu steuern.&nbsp;

Tausend Dank im Voraus

&nbsp;

```
.createColumnSizes(@n, @i: 1) when (@i =< @n) {

    &.emotion--mode-resize {
        &.emotion--column-@{n} .column--@{i} {
            width: (100% / @n * @i);
        }
    }

    &.emotion--mode-masonry {
        &.emotion--column-@{n} .column--@{i} {
            width: 100%;
        }
    }

    @media screen and(min-width: @phoneLandscapeViewportWidth) {
        @columns: 2;
        &.emotion--mode-masonry {
            &.emotion--column-@{n} .column--@{i} when (@i <= @columns) {
                width: (100% / @columns * @i);
            }
        }
    }

    @media screen and(min-width: @tabletViewportWidth) {
        @columns: 3;
        &.emotion--mode-masonry {
            &.emotion--column-@{n} .column--@{i} when (@i <= @columns) {
                width: (100% / @columns * @i);
            }
        }
    }

    @media screen and(min-width: @tabletLandscapeViewportWidth) {
        @columns: 3;
        &.emotion--mode-masonry {
            &.emotion--column-@{n} .column--@{i} when (@i <= @columns) {
                width: (100% / @columns * @i);
            }
        }
    }

    @media screen and(min-width: @desktopViewportWidth) {
        &.emotion--mode-masonry {
            &.emotion--column-@{n} .column--@{i} {
                width: (100% / @n * @i);
            }
        }
    }

    .createColumnSizes(@n, (@i + 1));
}

```

&nbsp;

---

<div class="post-metadata">

### Author: ![Tanjinsan](https://avatars.discourse-cdn.com/v4/letter/t/a4c791/32.png) [@Tanjinsan](https://forum.shopware.com/u/Tanjinsan)
#### Post date: [5. Februar 2016 um 18:15 UTC](https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260/2 "2016-02-05T18:15:44Z")

</div>

Hallo, ich beschäftige mich auch gerade mit den Spalten. Reicht es nicht wenn man die Spalten in den Experteneinstellungen angibt?

LG  
Tanjinsan

---

<div class="post-metadata">

### Author: ![blockdesigner](https://avatars.discourse-cdn.com/v4/letter/b/54ee81/32.png) [@blockdesigner](https://forum.shopware.com/u/blockdesigner)
#### Post date: [8. Februar 2016 um 13:16 UTC](https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260/3 "2016-02-08T13:16:55Z")

</div>

Ich weiß nicht, ob ich zu blöd bin - aber beim Masonry-Effekt hat die Einstellung für einen bestimmten Viewport und die eingestellten Spalten keine Auswirkung.&nbsp;

Desktop sind 4 Spalten, Tablet 3, Handy = 1-2. Die BackendEinstellung greifen hier nicht oder sehe ich da was falsch ?

---

<div class="post-metadata">

### Author: ![Tanjinsan](https://avatars.discourse-cdn.com/v4/letter/t/a4c791/32.png) [@Tanjinsan](https://forum.shopware.com/u/Tanjinsan)
#### Post date: [8. Februar 2016 um 15:31 UTC](https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260/4 "2016-02-08T15:31:29Z")

</div>

Ich habe dafür noch die emotion.less angepasst. Z. B.&nbsp;  
@media screen and(min-width: @tabletLandscapeViewportWidth) {  
&nbsp; &nbsp; &nbsp; &nbsp; @columns: 6;

statt

@media screen and(min-width: @tabletLandscapeViewportWidth) {  
&nbsp; &nbsp; &nbsp; &nbsp; @columns: 3;

---

<div class="post-metadata">

### Author: ![Tanjinsan](https://avatars.discourse-cdn.com/v4/letter/t/a4c791/32.png) [@Tanjinsan](https://forum.shopware.com/u/Tanjinsan)
#### Post date: [15. Februar 2016 um 13:57 UTC](https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260/5 "2016-02-15T13:57:16Z")

</div>

@blockdesigner:&nbsp;Klappt das Kompilieren bei dir jetzt? Bei mir geht es immer noch nicht. Ich kann die emotions.less nur im Responsive Theme anpassen! Der Hoster hat den Server komplett durchgecheckt, daran kann es nicht liegen.

---

<div class="post-metadata">

### Author: ![blockdesigner](https://avatars.discourse-cdn.com/v4/letter/b/54ee81/32.png) [@blockdesigner](https://forum.shopware.com/u/blockdesigner)
#### Post date: [16. Februar 2016 um 08:14 UTC](https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260/6 "2016-02-16T08:14:52Z")

</div>

Hallo Tanji,

habe gerade noch mal getestet. Bei mir klappt das kompilieren auch nicht, sobald ich aus dem Teil Änderungen in meine emotion setze. Liegt das an den Variablen vielleicht ?!

---

<div class="post-metadata">

### Author: ![Tanjinsan](https://avatars.discourse-cdn.com/v4/letter/t/a4c791/32.png) [@Tanjinsan](https://forum.shopware.com/u/Tanjinsan)
#### Post date: [13. März 2016 um 17:43 UTC](https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260/7 "2016-03-13T17:43:13Z")

</div>

@blockdesigner: Ich habe leider immer noch keine Lösung gefunden ☹

---

<div class="post-metadata">

### Author: ![dupp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/dupp/32/7715_2.png) [@dupp](https://forum.shopware.com/u/dupp)
#### Post date: [15. März 2016 um 11:33 UTC](https://forum.shopware.com/t/override-einkaufswelt-spalten-anpassen-fur-masonry-in-emotion-less/34260/8 "2016-03-15T11:33:44Z")

</div>

Die Funktion

```
.createColumnSizes(@n, @i: 1) when (@i =< @n) {

   ...
 
}

```

sollte umbenannt werden, da es sonst zu einer Endlosschleife kommt. Beispiel:

​

```
.createCustomColumnSizes(@n, @i: 1) when (@i =< @n) {

   ...
 
}

```

​folglich müssen auch die Aufrufe weiter unten im Code auf den neuen Namen umgeschriebenw erden.&nbsp;

&nbsp;
