CSS-Klasse für Schrift von SW übernehmen und anpassen?

Shopware 5 Allgemein
1

Hallo,

ich versuche im Footer weitere eigene Überschriften so zu formatieren, wie es die Überschriften bei den Shopseiten sind. Nur sollen meine neuen zusätzlich zentriert sein.

Für meine überschriften habe ich eine eigene Klasse angelegt. Die Klasse von der ich ableiten möchte ist      .column–headline      

Kann ich da irgendwie angeben: Nehme Eigenschafte von .column–headline  und ergänze text-align: center; ?

Ich habe es mal so versucht:

.meineklasse {
	 .user-select(none);
        .unitize-padding(8, 0);
        margin: 0;
        font-weight: 700;
        color: #ffffff;
        cursor: pointer;
        .unitize(font-size, 16);
        .unitize(line-height, 26);
		text-align: center;
     }

Aber vlt geht das auch gar nicht, was ich da vorhabe?

Jemand einen Tipp für mich?

Danke.

VG

2

so müsste es funktionieren, du musst aber dafür den Block in deinem Thema anpassen und bei deine Überschriften die Klasse erweitern

deine Überschrift

.column--headline {
.meineklasse {
	text-align: center;
     }
}

VG

3

Danke, aber das funktioniert leider nicht. Jetzt ist die Schrift wieder links und nach wie vor nicht so kräftig und etwas kleiner als die anderen Überschriften.

Ich könnte ja auch meine eigene Klasse mit Schriftart, Größe und Gewicht bestücken. Aber a) finde ich die Angaben nicht und b) ist die Schreibweise der Größen in SW anders, als ich sie mit meinen bescheidenen css-Kenntnissen kenne.

4

@hds schrieb:

so müsste es funktionieren, du musst aber dafür den Block in deinem Thema anpassen und bei deine Überschriften die Klasse erweitern

deine Überschrift

.column–headline {
.meineklasse {
text-align: center;
}
}

VG

Ne das ist auch falsch, das CSS müsste in dem Fall eher so aussehen:

.column--headline {
     &.meineklasse {
	      text-align: center;
     }
}

unitize musst du auch nicht verwenden, aus .unitize(font-size, 16); wird beispielsweise dann font-size: 16px; font-size: 1rem; . Mehr dazu: https://developers.shopware.com/designers-guide/less/#the-.unitize()-mixin . Du kannst also natürlich auch nur die Pixelangabe definieren.

Erben kannst du von CSS - Klassen im Prinzip nicht, du musst das schon bei deiner eigenen CSS-Klasse neu definieren, außer die mixins, die Shopware definiert hat. Die Angaben, die beim jeweiligen Element aktiv sind, findest du auch im Browser in der Browserkonsole. 

Du kannst halt maximal die jeweilige bestehende CSS-Klasse von Shopware nutzen, wenn du das Styling brauchst und dann noch eine eigene CSS-Klasse ergänzen, um zusätzliches Styling vorzunehmen (im HTML - Code des Smarty - Templates).

Grüße

Sebastian

5

Sebastian, vielen Dank für die ausführliche Erklärung. Über dieses unitize habe ich schon gelesen, verstehe nur halb. Ich weiß dass die Einheiten em und rem normalerweise von einer Standardpixelzahl 16 ausgehend, die Größe festlegen. Damit man sich nicht wie ich, die rem-Angabe über ein externes Tool errechnen muss, kann man bei SW mit .unitize die bekannten Pixelgrößen angeben und die werden dann umgerechnet. So verstehe ich das in etwa.

In der Browserkonsole sehe ich bei der gewünschten Überschrift

.footer-main .column–headline
font-size: 1rem;

dazu steht dann in der Less wahrscheinlich .unitize(font-size, 16);

Da mir das schon etwas verzwickt ist, wollte ich „einfach“ die Klasse der vorhandenen Überschriften übernehmen und zusätzlich zentrieren. Ist aber wohl doch nicht so einfach.

Mit dem ergänzten & vor der Klasse steht die Überschrift schon mal mittig, aber die Größe stimmt nicht - ist zu klein.

Mein Fehler liegt also wahrscheinlich schon in der Auswahl der Klasse.

In der Console sehe ich <d… class=„column–headline“>Kundenservice</d…>

In der Original footer.less steht die genannte Klasse 2x mit unterschiedlichen Angaben und & Ergänzungen.

.column--headline {
        .user-select(none);
        .unitize-padding(8, 0);
        margin: 0;
        font-weight: @font-bold-weight;
        color: @brand-primary;
        cursor: pointer;
        .unitize(font-size, 16);
        .unitize(line-height, 26);
		

        &.is--active::after {
            content: @sw-icon-minus3;
        }

        &::after {
            .unitize(font-size, 18);
            font-family: @sw-icon-fontname;
            color: @text-color;
            font-weight: @font-bold-weight;
            content: @sw-icon-plus3;
            float: right;
        }
    }





Einmal so:

.column--headline {
            .unitize-margin(28, 0, 10, 0, 16);
            padding: 0;
            cursor: text;

            &::after {
                display: none;
            }
        }

Da frag ich mich ja schon, wie das funktionieren kann. Ruft die Überschrift dann die Formate beider „Abschnitte“ in der dss auf, wendet also beide an? Da die Klassen hinter dem & nicht im div genannt sind, kommen die nicht zum Einsatz?

Immer wenn ich denke, ich blicke langsam durch, kommen solche Sachen…

 

Ich habe die Schriftgröße in beiden Schreibweisen unter text-align eingefügt, zeigt aber keine Auswirkung. Ist jetzt kein Drama, wüsste aber schon gerne, wo mein Fehler liegt :slight_smile:

6

Nach unzähligen Tests und immer noch zu kleiner Schrift, verzichte ich jetzt auf die Klasse von sw und versuche den Text in meiner Klasse komplett zu formatieren.

.meineklasse {
     font-size: 18px !important;
    font-weight: @font-bold-weight;
     text-align: center;   
}

Die Fettschrift wird hier angenommen, zentriert auch. Die Schriftgröße ändert sich aber nicht. Folgende Schreibweisen habe ich getestet:

font-size: 2rem;
font-size: 18px;
font-size: 18px !important;
.unitize(font-size, 16);

Ohne Erfolg. Dann habe ich die Schriftgröße in der css entfernt und direkt in der tpl ergänzt

Auch keine Auswirkung. Hab ich nen Schreibfehler?
Da muss doch irgendetwas dazwischen funken, was übergeordnet ist. Aber eigentlich sollte doch die Eigenschaft verwendet werden, die näher an der Klasse ist…

7

also o ich habe es jetzt nochmal probiert,  .footer–main steht bei mir drüber, kannst es mal probieren

.footer--main{
  .column--headline{
   &.deineklasse {
     text-align: center;}
  }
}

 

8

Danke dir für deine Mühe. Das steht bei mir in der Console auch. Wusste es nicht zu deuten.

Wenn ich es so verwende, wie von dir geschrieben. Steht die Schrift wieder linksbündig, Größe passt ebenfalls nicht.

Habe dann in der zweiten Zeile noch das & vorangestellt. Dann ist sie mittig und fett, aber auch nicht größer. Also gleiches Ergebnis, wie bei all meinen anderen Versuchen.

So hab ich die Klasse aufgerufen:

Ich glaube ich lasse es jetzt fett und mittig. Vlt. wurde da mal was am Template geändert, was ich jetzt nicht mehr weiß…