Hallo zusammen, ich habe zwei Fragen zum Footer. Ich arbeite im Malibu-Cloudshop mit dem default footer, bei dem die sogenannte Spalte 1, die sich allerdings in der Spalte 2 befindet ("Mehr über", bzw. bei mir heißt sie "Rechtliches") bereits weitestgehend "vorgefertigt" war. 1.) Wie bekomme ich diese nach rechts zeigenden Doppelpfeile aus der von Gambio vorformatierten Spalte 1 auch in die Spalte 2 meines Footers? Die scheinen über Font Awesome angelegt worden zu sein. Aber wie und wo ändere ich das so, dass es auch für ul-Listen in Spalte 2 übernommen wird? 2.) Wenn ich nun meine "freie" Spalte 3 befülle, stimmen die Zeilenabstände leider nicht mit Spalte 1 und 2 überein, sie sind in dieser Spalte größer. Ich habe mir schon mittels Browser-Inspektor den Quellcode und CSS der unterschiedlichen Spalten angeschaut, doch finde ich dort keinen Ansatzpunkt, da ich auch nicht wirklich viel Ahnung habe. Kann ich das über eigenes CSS im StyleEdit irgendwie angleichen, so dass alle Footer Spalten (1-4) einen einheitlichen verbindlichen Zeilenabstand bekommen? Hier mal ein Foto, wie das bei mir aussieht (Shop ist noch in Arbeit, also nicht online).
Ohne Link zum Shop ist es echt schwierig zu helfen, denn ohne einen Blick in die Konsole kann man bei diesem Problem nur in die Glaskugel schauen, da es einfach zu viele potentielle Einflussmöglichkeiten gibt. Wie hast Du die Spalte denn "befüllt"? Ist das eine Aufzählung mit <ul> <li> Tags? Oder Hast Du einfach deinen Content da eingetragen und jeweils mit <br /> die Abstände hergestellt? Oder sind da Margin-Werte hinterlegt? Manche Tags bringen übrigens margin mit. Das gilt sicherlich auf für bestimmte Klassen. Oder hast Du dort den <p>-Tag verwendet? Oder hast Du falsche line-height Werte? Oder gar keine und dafür andere Einflüsse? Es gibt auch noch andere Möglichkeiten, warum die Abstände nicht passen. Daher, teile bitte am besten den Link zum Shop. Wenn Du den Link nicht öffentlich teilen willst, dann schreib gerne einfach eine PN. Dann kann ich bestimmt helfen.
Danke für Eure Antworten – mein Shop ist noch gar nicht fertig und online, sondern noch in der Aufbauphase, von daher wüsste ich nicht, wie ich in diesem Fall einen Link teilen könnte? Es handelt sich jedenfalls um den Malibu default footer. Um auf O.C.'s Frage zu antworten: Ich habe die Spalte "befüllt", indem ich im Text-Feld des Content Managers ("Footer Spalte 3") die sechs Zeilen mit Zeilenschaltung eingegeben und als Liste angelegt habe. Den html Code hat der Content Manager dann ja selber erstellt. Da alle Spalten im Theme bereits "vordefiniert" waren, hätte ich angenommen, dass Gambio dann auch identische Zeilenhöhen für die einzelnen Spalten via CSS definiert hat, was aber offenbar nicht der Fall ist. Hier einmal Screenshots wie das bei mir im Content Manager aussieht. Ich versuche gleich auch mal, Screenshots der CSS-Werte der beiden Spalten via Browser-Inspektor zu machen und hier hochzuladen.
Klicke ich im Inspektor nur auf die einzelnen Listeneinträge und lasse mir die Werte für die einzelnen Zeilen anzeigen, gibt es da eine Abweichung zwischen den beiden Spalten, denn bei Spalte 3 ist "line-height" nun 32px statt des Wertes "2".
Vielleicht könnt ihr noch einmal drüber schauen... ich hab's nun so (hoffentlich) gelöst bekommen, zumindest sind nun alle Spalten identisch, was die Zeilenhöhe betrifft: Ich habe im Feld "SCSS/CSS bearbeiten" vom StyleEdit das hier eingesetzt – bin allerdings unsicher, ob das so die beste Lösung ist. #footer .inside .row .footer-col-3 ul li { position: relative; line-height: 28px; padding-left: 20px; } #footer .panel .panel-body li { padding: 0px 0; } Seht ihr da irgendein zukünftiges Fehlerpotential, oder das ist so okay?
Bleibt die Frage mit den Doppelpfeilen. Wenn ich mir die CSS im Browser-Inspektor dazu anschaue, ist das alles sehr umfangreich und für mich als Laien verwirrend. Wo müsste ich ansetzen, um diese Pfeile , die anscheinend über "content" definiert worden sind (zumindest verschwinden sie, wenn ich "content" im Inspektor abklicke) nicht nur in Spalte 1 (footer-col-1), sondern auch in Spalte 2 (footer-col-2) zu erzeugen?
Das hab ich Dir doch schon bei Facebook beantwortet: Das sind meiner Meinung nach Font Awesome Symbole, nämlich das hier: Code: <i class="fas fa-angle-double-right"></i>
Danke Florian, ich war heute noch nicht online bei Facebook und hatte komischerweise auch keine Benachrichtigung über eine Antwort bekommen, habe deine Antwort erst eben jetzt gesehen.– Und ja, es sind Font Awesome Symbole, wie ich inzwischen auch herausgefunden habe. Bleibt die Frage, wie ich die regulären ul-Listensymbole, also die Kreise, die der Content-Mnager da in der Vorschau zeigt, durch diese Font Awsome Doppelpfeile ersetzt bekomme. Ich werde mir das jetzt mal im Footer-CSS aus dem Theme-Download anschauen, um herauszufinden, wie genau Gambio das gemacht hat. dass die FA Symbole die Standard-Listensymbole ersetzen.
Schwere Geburt, für einen Computerlegastheniker wie mich, aber es hat geklappt. Mittels der Datei _footer.scss aus dem Theme-Download und einigen Schnippseln, die ich mir aus den Browser-Inspektor-Fenstern kopiert habe, konnte ich mir nun mein individualisiertes CSS für die Spalte 2 zusammenbasteln und über StyleEdit in die vorhandene SCSS einfügen. Dauerte zwar ein bisschen, bis alles korrekt positioniert war, aber nun sieht die Spalte aus wie gewünscht, mit den Doppelpfeilen statt der regulären Listenpunkte. So sieht nun mein angepasstes CSS dafür aus: #footer .inside .row .footer-col-2 .panel .panel-body li a::before, #footer .inside .teaser-group-three-squares .footer-col-2 .panel .panel-body li a::before, #footer .inside .teaser-group-2-cols-big-image .footer-col-2 .panel .panel-body li a::before { padding-left: 0px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); @extend %fa-icon; @extend .fas; content: fa-content($fa-var-angle-double-right); font-size: 11px; } Wie gesagt, es funktioniert, aber falls irgendwem noch Bedenkliches oder potentielle Fehler an dem CSS auffallen, lasst es mich gerne jederzeit wissen... ich bin als Laie dankbar für jeden Tipp.
Wenn's funktioniert, ist's gut. Ich hatte für einen ähnlichen Fall nachfolgendes CSS verwendet. Wenn Du möchtest, kannst Du ja mal vergleichen: Code: #footer .inside .row .panel .panel-body ul>li>a:before{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ""; font-size: 11px; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; } #footer .inside .row .panel .panel-body ul>li{ padding: 0; } #footer .inside .row .panel .panel-body ul>li::before{ content: ''; } #footer .inside .row .panel .panel-body ul>li>a{ padding-left: 20px; }
Danke, Dominik, ich habe mir deinen Code mal rauskopiert und werde das mal mit meinem derzeitigen Stand vergleichen. Ich habe das Gefühl, bei mir sind noch Teile in der CSS, die eventuell überflüssig sind. Ich frage mich z.B. was es mit den aus der Gambio-CSS übernommenen ".teaser-group-three-squares .footer-col-2" und ".teaser-group-2-cols-big-image .footer-col-2" auf sich hat. Eventuell beziehen die sich auf einen anderen als den von mir verwendeten Standard-Footer und ich könnte diese Zeilen ganz weglassen? Hast Du eine Ahnung, was das für teaser-groups im Footer sein sollen, auf die sich diese CSS beziehen? Ergänzung 1: Ich habe diese beiden "teaser-group" Zeilen nun aus meiner CSS gelöscht, und es scheint sich nichts zu ändern, in keiner der unterschiedlichen Vorschauen. Ergänzung 2: Mir ist aufgefallen, dass in deiner CSS die Schreibweise lautet: ul>li{ bei mir hingegen nur ul li { – so hatte ich mir das aus der Konsole kopiert. Macht das einen Unterschied?