Schriftfarbe im Footer

Guten Tag!

ich bin neu in Shopware und habe Shopware 5.4.4 lokal Installiert um mich erst mit dem System vertraut zu machen.

Bitte jetzt nicht erschlagen, aber ich nutze kostenloses Theme und ich nutze ein Kostenloses Plugin Namens Additional Footer  was ebenfals Kostenlos auf Github zu finden ist, jedoch finde ich den Link dazu nicht. Dieses Plugin fügt 4 weitere Bereiche unter den bestehenden Blöcken hinzu, diese werden per Textbausteine befüllt.

Das Szenario :

Die Footer Textfarbe ist als Variable @text-color in der Theme Konfiguration hinterlegt, ich möchte natürlich das die Texte bzw. Links genau wie im Normalen Footer die selbe Farbe erhalten.

Sicher geht es Manuell, dies ist aber umständlich und ich möchte das der Link (Textbaustein) auch auf die Variable @text-color greift.

Ich habe folgenden Link mal vorbereitet: 

Facebook

 Dies scheint auch zu greifen, laut Console sind die Werte zwischen normeln Footer und die erweiterung gleich, jedoch ist aber im Frontend eine andere Farbe.

Da ich blutiger anfänger bin und mich erst einarbeiten muss bitte ich einmal um Hilfe, da weder Google noch die Dokus etwas dazu sagen können und ich da bereits seit Tagen dran sitze.

Original Footer:

Erweiterung:

1 „Gefällt mir“

Warum vergibst du in der Erweiterung ( natürlich Updatesicher ) nicht die gleichen Klassen wie im Shopware Standard? Wenn du es somachen würdest dann hättest du es ja genau wie im Shopware Original, gleiche Farbe, gleiche Grösse, gleiche Abstände usw. und an der Less-Datei müsstes du auch nichts mehr anpassen.

VG

Hallo @hds‍,

danke für deine Antwort und hier mal kurz und knapp meine. Da ich nicht weis wie  Crying

Ich habe gelesen das man das wohl am besten mit einer klasse machen soll, leider habe ich davon keine Ahnung.

Z.b wie ich eine klasse erstelle und vorallem wie binde ich die in SW ein, es gibt unzählige Beiträge in Google und hier aber ohne eine passende lösungen.

Da ich wirklich ein Blutiger anfänger bin, bin ich auf Dokus und Google angewiesen aber wie gesagt habe nach langem Suchen nichts gefunden.

Könntest Du mir auf die Sprünge helfen wie ich das anstellen soll? ggf. ein Referenzlink erstellen damit ich weis wie?

LG

z.b. https://developers.shopware.com/designers-guide/less/

 

Wenn du keine Ahnung von Klassen etc. hast, musst du dir erstmal ein paar css Grundlagen aneignen. Bzw. such dir jemanden, der davon Ahnung hat.

 

 

Hallo @Rednaxela‍, 

genau deshalb Frage ich dies im Forum  Wink

Diese Dokumentation kenn ich, bringt mir jedoch nicht viel weiter.

Hallo,

also einen CSS - Crashkurs wirst du hier auf keinen Fall bekommen, dafür gibt es genug Quellen im Internet (bspw.: https://www.w3schools.com/Css/ ) oder auch Bücher und dafür ist dieses Forum definitiv nicht gedacht.

Wie man das CSS / LESS im eigenen Theme einbindet ist hier erklärt: https://developers.shopware.com/designers-guide/getting-started/#add-less-files . Da sind auch schon CSS - Beispiele dabei. Besser und einfacher kann man es nicht mehr erklären.

Wenn dir selbst das noch zu hoch ist solltest du definitiv jemanden beauftragen, der dir das macht.

Grüße

Sebastian

Hallo @sschreier‍,

vielen Dank für deine Antwort.

Also den Link kenn ich und auch dort die Beispiele kenn ich und vielleicht habe ich mich etwas unverständlich ausgedrückt.

Wie ich normale Less/css anpassung machen kann z.b Body Farbe da schaue ich in die Console und Kopiere mir dies und füge diese in einer gleichnamige Datei (neu erstellte!) ein.

Diese neue Datei füge ich in die All.less per @Import “_XXXXXXXX/Name.less”; ein, aber das mit dem Link, da finde ich nichts zu. Da habe ich die Schwirigkeit, da selbst nicht dirkt in der Console dies ersichtlich.

Auch der das Sekment aus der Original Datei kann ich nicht übernehmen, vielleicht habe ich auch nur gerade ein Denkstau. 

Ich möchte ja nur den Text inkl. Hover wie im Original Footer und das kann ja eigentlich nicht so schwer sein oder? nur muss ich an den Teil ran kommen ohne dies komm ich also auch nicht weiter.

LG

 

 

Also im Chrome z.B. (und eigentlich in allen wichtigen Browsern) die Seite öffnen und F12 drücken.

Also im Chrome z.B. (und eigentlich in allen wichtigen Browsern) in dem DevTool-Fenster sollte dann oben links (evtl. nur im Tab Elements) das “Inspect”-Tool (Button/Icon) zu finden sein. Da einmal drauf klicken und dann im Browserfenster auf das gewünschte Element. Dann sollten im Elements-Tab im Style-Bereich alle Styles zu sehen sein die Anwendung auf dieses Element finden.