png-Dateien im Footer entweder falsche Position oder nicht transparent...

Hallo,

ich möchte 4 Logos, die als png vorliegen, im Footer platzieren. Da ich noch den Originalfooteraufbau nutze, wollte ich das nun “schnell” über einen Textbaustein lösen.

Im footerInfoIncludeVat ist bereits der Standardtext am unteren Rand mittig zentriert. Davor gebe ich meinen html-Code ein (Überschrift und draunter 4 Bilder). Die Überschrift steht mittig, aber die Bilder hängen links, sollen aber zentriert sein.

Jetzt habe ich die 4 Logos in eine Tabelle gepackt und die Tabelle zentriert. Nun ist alles perfekt in der Mitte. Problem: die Hintergrundfarbe des Footers ist weg, die Logos sind vor einem weißen Hintergrund. Die Hintergrundfarbe der Tabelle wird nicht berücksichtigt. In der html-Datei im Browser passt der Code, nur wenn ich ihn bei SW in den Textbaustein einfüge, stimmt es nicht mehr.

Kann mir jemand einen Tipp geben? So sieht der code aus:

Wir aktzeptieren 


  




LG

Kann mir jemand einen Tipp geben?

Also ICH würde die Tabelle mit CSS stylen und dazu „background“ bzw. „background-color“ benutzen.

Es funktioniert bei mir einfach nicht…

Ich habe nun einen Block in die footer.tpl eingebaut, weil der Textbaustein aus anderen Gründen ungeeignet war. Dennoch bleibt die Tabelle im Hintergrund weiß.

Folgenden Code habe ich - wobei die Anzahl und Anordnung der Spalten stimmt, nur die Hintergrundfarbe fehlt:

{block name='frontend_index_footer_menu' prepend}



Wir aktzeptieren

 
Wir bei 

 
Wir versenden mit 






b2 
leer 
x 
x 
leer 
x 
x 



b3 
b4 
 
x 
x 
 
x 
x 








{/block}

Ich hatte zunächst die Hintergrundfarbe nur bei table und die Überschrift als

statt | . Da war der Hintergrund der Überschriftenzeile farbig, der Rest weiß und feine Linien zwischen den Zellen zu sehen.

Dann habe ich aus th td gemacht, dann war der Hintergrund komplett weiß. so habe ich mir vorgetastet und an den weitren Stellen den Hintergrund eingefügt, jedoch ohne Änderung. Ich weiß nicht, wo der Fehler liegt. Die Anleitungen im Web helfen mir an der Stelle nicht mehr weiter…

|

style="background-color:#6C604E"

EDIT: #6C604E (6 Werte) statt #6C604E0 (7 Werte)

Diese Schreibweise funktioniert schon mal nicht:

Diese Schreibweise färbt die Kopfzeile , nicht die folgenden 




Habe nun alle in geändert und die Tabelle hat komplett Farbe - stören nur noch die Zwischenräume.

 

Kann es vlt sein, dass eine Voreinstellung von SW die Änderung der Farbe verhindert?

Möglicherweise musst du das forcieren, mit style=„background-color: #6C604E !important“ . Am allerbesten jedoch mittels Hierachie in LESS.

farblich passt es so, jetzt fehlt zu meinem Glück nur noch, dass ich die 3 Bilder, die in einer Zelle sind zentrieren kann. Mit align=“center” geht es schon mal nicht.

bilder |

Hat dieser Befehl nur bei Text Gültigkeit?

So geht das nicht! Du musst dich unbedingt mit CSS und HTML intensiver befassen. Leider haust du hier alles durcheinander. Das sind Grundlagen wenn man selber Änderungen im Template vornehmen möchte.

Sorry, dass es so nicht geht, weiß ich. Wenn ich das Thema beherrschen würde, würde ich hier nicht fragen. Hilfreich wäre eine Antwort, die mir meine Fehler zeigt. Ich lese diverse Seiten über die Grundlagen und das, was dort beschrieben ist, funktioniert überall, nur nicht im Shop.

Natürlich steht, wie oben geschrieben die Hintergrundfarbe nicht an allen 3 Stellen. Ich hatte sie nur an diesen Stellen getestet, weil sie sich immer nur auf die Überschrift auswirkte und nicht auf den Rest der Tabelle.

Ich weiß nicht, ob du die Antworten nach deinem Zitat noch gelesen hast.

 

Gestern Abend war ich nun soweit, dass die Tabelle eine Farbe hatte, nämlich diese #6c604e. (Weil ich nur mit

arbeite und nicht mehr mit | ) Allerdings war das nicht die eigentliche Footerfarbe. Wenn ich die Farbwerte jetzt in Footerfarbe ändere #555555, ändert sich die Farbe der Tabelle nicht. Wenn der Farbwert an der von mir eingefügten Stelle keine Wirkung zeigt, frage ich mich, woher die aktuelle Tabellenfarbe kommt. Ohne Angabe der Hintergrundfarbe war sie ursprünglich weiß, mit Angabe hat sich sich entsprechend des Farbwertes verändert. Ändere ich nun den Farbwert erneut, passiert gar nichts. Nehme ich background-color:#xxx jetzt wieder raus, bleibt die Farbe 6c604e Ist das logisch? Frage mich langsam, ob hier Änderungen im FE einfach nicht angezeigt werden…

Auszug aus meinem Code

Wir aktzeptieren
 


.....

 

 

|

Neue Erkenntnis:

Habe die Tabelle jetzt gerade bei einer anderen Installation getestet. Hier gleich die Footerfarbe #555555 als Hintergrund eingegeben.

Angezeigt wird aber ein wesentlich hellerer Tabellenhintergrund. Ich würde sagen, er entsprecht der Farbe @brand-secondary des Themes. Auch hier kann ich anschließend
beliebige Farbwerte eingeben, ohne dass sich die Hintergrundfarbe ändert.

Wenn ich hier nun mit meiner Demoversion vergleiche, in der ist zuerst getestet habe, stelle ich fest, dass auch hier die @brand-secondary als Tabellenhintergrundfarbe verwendet wird. Das war dann Zufall, dass ich genau diesen Wert auch bei Background eingegeben habe.

Die Farbe des Tabellenhintergrundes wird also offensichtlich durch diese Themeeinstellung gesteuert, da kann ich am Code basteln wie ich möchte.

Merkwürdig ist nur, dass die Hintergrundfarbe @brand-secondary nur dann angezeigt wird, wenn ich bei

einen Hintergrund definiere. Sonst bleibts weiß.

 

Hat irgendjemand schon mal erfolgreich eine Tabelle im Footer platziert, die die passende Hintergrundfarbe hat?

Das ist Falsch!

Richtig geht das so:

oder auch

oder auch in Verbindung mit dem Width und Border

Beachte das Attribute style was für CSS steht. Und nicht die Tabelle sondern die Zellen mit Hintergrund färben. Nach den Änderungen immer den Cache leeren!

Die Schreibweise mit style hatte ich auch schon ausprobiert, wurde oben vorgeschlagen. Deine Vorschläge habe ich auch durchgetestet, es funktioniert keiner. Ich glaube, es gibt keine Schreibweise, die ich noch nicht versucht habe. Es bleibt dabei, dass die Farbe aus dem Theme von @brand-secondary verwendet wird. Der Zusatz !important hilft auch nicht.

Cache leeren, kompilieren, Browsercache leeren mache ich natürlich immer.

Wenn ich bei @brand-secondary die Farbe ändere, ändert sich auch der Tabellenhintergrund. Da liegt also der Hund begraben. Nur kann ich diese Farbe im Liveshop nicht ändern, da dann ja andere Dinge farblich nicht mehr passen…

Alternativ geht das auch so:

in HTML

...

in CSS Datei
 

.MyFooterTable {
  border: none;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

.MyFooterTable td {
  background-color:#555555;
}

 

Und nicht die Tabelle sondern die Zellen mit Hintergrund färben.

Ich zitiere mich mal selber.

Zum Code bei separater css-Datei hatte ich einiges gefunden, nur weiß ich nicht, in welches Verzeichnis die CSS muss und ob die möglicherweise mit anderen CSS im Shop kollidieren kann. Über diese Datei könnte ich dann auch irgendwie festlegen, dass alle Zelleninhalte horizontal zentriert werden?! Das würde auch mein zweites Problem lösen.

In einem Shop ist zufällig die Themefarbe identisch mit dem Footer, da bräuchte ich die css nicht unbedingt wegen der Farbe, aber die Bilder sind nicht zentriert.

Beim zweiten Shop komme ich dann ohne die CSS wohl nicht aus. Ich nehme an, die css muss dann heißen myfootertable.css?

Nachtrag:

Ich habe in meinem Theme eine myfootertable.css mit dem o.g. Inhalt gespeichert (also in Verzeichnis, in dem auch die footer.tpl liegt). in der Footer.tpl habe ich die erste Zeile wie von dir geschrieben angepasst. Kein Wirkung…

Lieber Toric,

also jetzt mal im ernst, das Forum hier ist für Fragen rund um Shopware gedacht. Grundlagen in HTML und CSS sollten und müssen schon sitzen. Schau mal bitte im Netz, dazu gibt es unzählige Seiten die das ausführlich beschreiben. Das würden dann auch deine Frage bezüglich der Ausrichting in Zellen mit beantworten.

 

Beim zweiten Shop komme ich dann ohne die CSS wohl nicht aus. Ich nehme an, die css muss dann heißen myfootertable.css?

Ich keine leider dein Theme nicht. Für eigene Anpassungen wird jedoch empfohlen ein eigenes Theme im Shop anzulegen und dort deine CSS-Einstellungen (z.b. all.less) vorzunehmen. Ich gehe davon aus, das du dich auch damit noch nie befasst hast. Bevor das hier völlig ausufert, würde ich vorschlagen, dass du dein CSS als Style-Attribute in den HTML (vorerst) schreibst.

Nachtrag:

https://developers.shopware.com/designers-guide/theme-startup-guide/

Ist ne Menge an Text, aber da müssen wir alle durch wenn wir eigene Anpassungen haben möchten.

 

@Toric schrieb:

Zum Code bei separater css-Datei hatte ich einiges gefunden, nur weiß ich nicht, in welches Verzeichnis die CSS muss und ob die möglicherweise mit anderen CSS im Shop kollidieren kann. Über diese Datei könnte ich dann auch irgendwie festlegen, dass alle Zelleninhalte horizontal zentriert werden?! Das würde auch mein zweites Problem lösen.

In einem Shop ist zufällig die Themefarbe identisch mit dem Footer, da bräuchte ich die css nicht unbedingt wegen der Farbe, aber die Bilder sind nicht zentriert.

Beim zweiten Shop komme ich dann ohne die CSS wohl nicht aus. Ich nehme an, die css muss dann heißen myfootertable.css?

Nachtrag:

Ich habe in meinem Theme eine myfootertable.css mit dem o.g. Inhalt gespeichert (also in Verzeichnis, in dem auch die footer.tpl liegt). in der Footer.tpl habe ich die erste Zeile wie von dir geschrieben angepasst. Kein Wirkung…

Hallo,

dein ganzes inline-CSS ist echt murks und geht auch zu Lasten der Perfomance etc. Beschäftige dich am besten einfach einmal damit, wie man eine eigene LESS-Datei im eigenen Theme nutzen kann (was auch super einfach ist), siehe: Getting started with Shopware templating . Die Anleitungen und Dokumentationen sind dazu da, das man sie liest - und das Shopware Forum ist nicht dazu da, das man hier noch einmal die Anleitungen und Dokumentationen nachschreibt.

In der eigenen LESS-Datei kannst du dann einfach dein eigenes CSS aber auch LESS ablegen. Diese wird dann auch automatisch mit komprimiert. Und genau dort gehören auch deine CSS-Kommandos rein und nicht in ein style-Attribut. Und ohne irgendeinen Link zum Shop müssen hier alle die Glaskugel rausholen um helfen zu können. Oft kann es auch zu Überlagerungen von Bereichen kommen, die solche Einfärbungen verhindern. Und < table > ist ja mal sowas von veraltet und würde ich niemals nutzen - erstrecht weil es schwierig responsiv nutzbar oder darstellbar ist (Shopware selbst nutzt es ja auch nirgends).

Beste Grüße

Sebastian

Liebe :slight_smile:

also ich bin keine Programmiererin, sondern einfach Shopbetreiberin. Dennoch habe ich es 2015 geschafft, ein eigenes Theme inkl. less & Co anzulegen. Die Seiten die du mir empfiehlst kenne ich alle (was nicht heißt, dass ich immer alles genau verstehe :slight_smile:

Auch die Grundlagenseiten zu html und css kenne ich. Was ich aufgrund der dortigen Anleitungen zusammenbaue funktioniert in der Regel im Browser nur nicht immer bei Shopware.

Ich versuche jetzt ein paar simple png-Dateien/Socialbuttons an die richtige Stelle im Footer zu bringen und scheitere an der Tabellenformatierung.

Es geht mir nicht darum, dass mir hier jemand alle möglichen Anleitungen aus dem Web zitiert.

Ich hatte oben einen Block gepostet, den ich in der footer.tpl im eigenen Theme ergänzt hatte, jedoch nicht die erwartete/gewünschte Optik (Hintergrundfarbe) hatte. Es ist zu sehen, an welchen 3 Stellen ich nacheinander die Hintergrundfarbe eingesetzt hatte.

Dass hier

  • nur Zellen mit

    und nicht die mit | gefärbt werden

  • die Zellen mit | nur dann Farbe annehmen, wenn ich in der Zeile

einen background angebe (egal in welcher Schreibweise)

  • die dann gefärbten Zellen aber immer die im Theme bei @brand-secondary angegebene Farbe habe - egal welche Farbe ich im Code definiere

steht in diesen ganzen Anleitungen nicht. Das habe ich selbst herausgefunden, denn das was hier als korrekte Schreibweise angegeben wurde, funktioniert ja ebenfalls nicht.

Der Code ist deshalb zu Stande gekommen, weil alles andere überhaupt nicht funktioniert hat. Ich hatte nicht vor, eine Tabelle ausschließlich aus Überschriftenzellen zu basteln.

Ich werde hier aber eine andere Lösung finden…

Vielen Dank soweit

|
|