Less Vererbung von Responsive bei Veränderung der Klasse

Shopware 5 Themes & Design
1

Hi zusammen, eine grundsätzliche Frage!
Wenn ich in meinem eigenen Theme eine Less Datei anlege, dann aus dem Responsive eine Klasse dort hineinkopiere um sie zu veränderung und anschlißend einen Wert entferne, wird dieser durch die vererbung dennoch im kompolierten Theme angezeigt. Wie kann man das umgenen? Als beispiel:

Buttons.less Responsive:

.btn {
    .unitize-padding(2, 10);
    .unitize(line-height, 32);
    .border-radius(3px);
    .appearance();
    .unitize(@btn-font-size, 16, font-size);
    .linear-gradient(@btn-default-top-bg, @btn-default-bottom-bg);
    -webkit-font-smoothing: inherit;
    display: inline-block;
    position: relative;
    font-weight: @font-bold-weight;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    border: 1px solid @btn-default-border-color;
    color: @btn-default-text-color;

    /** Button icon font size */
    [class^="icon--"] {
        .unitize(@btn-icon-size, 16, font-size);
    }

    /** Larger icon */
    .is--large {
        @largeFontSize: @btn-font-size + 2;
        .unitize(@largeFontSize, 16, font-size);
    }

Buttons.Less eigenes Theme:

.btn {
    .unitize-padding(2, 10);
    .unitize(line-height, 32);
    .border-radius(3px);
    .appearance();
    .unitize(@btn-font-size, 16, font-size);
    -webkit-font-smoothing: inherit;
    display: inline-block;
    position: relative;
    font-weight: @font-bold-weight;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    border: 1px solid @btn-default-border-color;
    color: @btn-default-text-color;

    /** Button icon font size */
    [class^="icon--"] {
        .unitize(@btn-icon-size, 16, font-size);
    }

    /** Larger icon */
    .is--large {
        @largeFontSize: @btn-font-size + 2;
        .unitize(@largeFontSize, 16, font-size);
    }

Dennoch wird der Button mit Hintergrund-Gradient angezeigt … woran liegt das? Danke!

2

Deine Angabe “erweitert” nur die vorhandene LESS. Du müsstest mal schauen wie du den Wert "unset"ten kannst.

EDIT: vll reicht dir ja schon ein “background:unset;” und wenn du es z.B. “rot” haben will dann anschliessend ein “background: red,” hinterher.
EDIT2: Du kannst auch komplett auf die LESS- Mutterdateien verzichten (mir fällt gerade der Code dazu nicht ein), und alles in dein THEME kopieren. Sozusagen ist dann dein Theme dein Startpunkt und keine erweiterung von Responsive.

3

Dementsprechend muss der jeweilige eintrag der Klasse jedoch drin bleiben und wird durch einen neuen Wert überschrieben?! Ein entfernen des Wertes führt dazu, dass durch das Vereebungssystem der Standartwert aus dem Responsive theme geladen wird?

4

Hallo,

LESS ist nicht Smarty (tpl), da gibt es kein “überschreiben” oder “löschen” von Eigenschaften, nur weil man Sie noch einmal neu definiert oder einfach löscht. Wenn du beispielsweise bei .emotion–container den “background: #fff” entfernen willst, müsstest du:

.emotion--container {
     background: transparent;
}

nehmen, damit er beispielsweise transparent wird oder einen anderen Farbcode hinterlegen.

Genauso ist es sehr schlechter Code, den kompletten LESS-Code aus einer LESS-Datei aus dem Responsive Theme zu kopieren. Warum? Weil der Code ja schon mit dem Responsiven Theme ausgeliefert wird und so doppelt drin ist, was ja quatsch ist.

In deinem konkreten Fall oben wäre es im eigenen Theme nur folgender LESS - Code:

.btn {
    background-color: @btn-default-top-bg;
    background-image: none;
}

Grüße

Sebastian

1 „Gefällt mir“
5

Super dank! Dann wäre das auch einmal für mich grundsätzlich geklärt! 

@sschreier‍ wenn ich noch einmal fragen darf. Wie bindet man denn am besten eine Icon Schrift ein? Ich wollte für unseren Shop eine eigene machen mit Fontello … Habt ihr das schonmal ausprobiert?

VG

6

@fabianknorr schrieb:

Super dank! Dann wäre das auch einmal für mich grundsätzlich geklärt! 

@sschreier‍ wenn ich noch einmal fragen darf. Wie bindet man denn am besten eine Icon Schrift ein? Ich wollte für unseren Shop eine eigene machen mit Fontello … Habt ihr das schonmal ausprobiert?

VG

Wird vermutlich ähnlich sein wie z.B. Font Awesome einzubinden.
Wenn man diese nur für das Template selbst braucht, sollte es reichen die CSS / JS Files entsprechend hochzuladen und über dem Theme Manager einzubinden.

Wir haben bei uns beispielsweise Font Awesome eingebunden indem die Files unter /themes/Frontend/MeinTheme/frontend/_public/fonts/font-awesome/ hochgeladen wurden und anschließend die CSS / JS Files im Theme Manager, das eigene Theme, im Tab „Konfiguration“ innerhalb der beiden CSS / JS Felder unter „Erweiterte Einstellungen“ eingebunden haben.

Wird auch in diesem Beitrag hier beschrieben: https://make-better.de/blog/font-awesome-shopware-einkaufswelten-einbinden
Da werden die CSS / JS Files aber extern eingebunden und nicht auf den eigenen Server hochgeladen, was aber im Prinzip keinen Unterschied von der Einbindung her macht.

Wenn man diese auch in den Einkaufswelten verwenden möchte, sollte man auch die weiteren Schritte vom verlinkten Beitrag beachten.

7

Hi @iLuHa‍,
danke! Ich schaue mir das mal in Ruhe an … Weiss noch nicht wie schwierig das ist! Ich sag Bescheid … 

VG