Umbau Footer

[inno]

Hallo Tommy, ich brauche deine Hilfe.
Ich arbeite mit dem THEME GOAL M5 - der Footer müsste angepasst werden.
Ich brauche eine spalte mehr und das Logobild sollte am rechten Rand kleben. Ich habe schon alle Footer durchgeschaut leider gibt es nur 3 Spalten und Bild links oder 4 Spalten ohne Bild. Kann man das machen? Fotos anbei. Grüße

[Tommy Herrmann]

Moin,

also - das könnte so gehen.

Hier mal das Ergebnis meines Versuchs:

Zunächst habe ich ein <div> soeiner Spalte kopiert und unten dran noch eingefügt:

Dann habe ich die class="col-lg-3" auf 20% Breite (von 25%) im Bereich "CSS Editor" gesetzt:

Code: Alles auswählen

.col-lg-3 {
  width: 20%;
}

... und um das Logo nach rechts zu bekommen (damit wird die Reihe "row") seitenverkehrt dargestellt, habe ich noch die Bootstrap class="flex-row-reverse" an das äußere <div> dieser Reihe geschrieben:

<div class="row mbr-white flex-row-reverse">

In Zeile 27 mit Maus markiert und rechts unten auch die markierte CSS im "CSS Editor":

Bedenke aber, dass das eigentlich dann am mobilen Gerät zu eng wird und diese Spalten nur noch viel zu schmal dargestellt werden.

Vielleicht solltest Du über eine andere Lösung (eventuell 2 Blöcke) als Footer nachdenken.

[inno]

Hallo Tommy, danke dir.
Das funktioniert, nur in der mobilen Ansicht ist alles zerstört? Hast du hier noch eine Lösung? Vielen Dank

[inno]

Wenn ich den col-gl nicht setze wird MObil alles richtig dargestellt aber auf dem Desktop habe ich 2 Reihen?

[inno]

Kann man das Logo nicht an den rechten Rand "Kleben" wie bei mir oben im Screen?

[Tommy Herrmann]

da müsstest Du noch suchen - ich habe die richte Stelle für das Logo noch nicht gefunden.

Das müsste irgendwo in der class="media-wrap" gemacht werden, hier mal als Test ein Abstand nach links von 80px

margin-left: 80px;

... deswegen - die mobile Ansicht ist so doof - aber auch schon ohne Änderungen. Im Moment ist mir das zu aufwändig - gucke mal, ob Du da eine Lösung mit 2 Blöcken oder so finden kannst.

[inno]

Hallo Tommy, ich arbeite jetzt mal mit dem Footer-Block aus dem EXPERT M5-Theme. Wie kann ich hier das Logo auf die rechte Seite setzen? Danke für dein Hilfe.

[Tommy Herrmann]

Ja - na wahrscheinlich ist es am einfachsten einfachen diesen gesamten <div> Container </div> oben raus zu löschen und weiter unten wieder rein zu kopieren, also das hier:

Code: Alles auswählen

            <div class="col-12 col-sm-6 col-lg-3" mbr-if="showLogo || showBrand || showSocial">
                <div class="item-wrap">
                    <div class="navbar-brand" mbr-if="showLogo || showBrand">
                    <span mbr-if="showLogo" class="navbar-logo">
                        <a href="https://mobiri.se">
                            <img src="file:///C:/Users/User/Documents/Mobirise/ExpertM5/assets/images/logo-mobirise-220x220.png" alt="Mobirise" mbr-style="{'height': logoSize + 'rem'}">
                        </a>
                    </span>
                        <span mbr-if="showBrand" mbr-buttons mbr-theme-style="display-4" class="navbar-caption-wrap" data-toolbar="-mbrBtnMove,-mbrBtnAdd,-mbrBtnRemove,-iconFont"><a class="navbar-caption text-white" data-app-selector=".navbar-caption" href="https://mobiri.se" data-app-placeholder="Type Text">Tuorials</a></span>
                    </div>
                    <div class="social-list" mbr-if="showSocial">
                        <div class="soc-item" mbr-if="socialCount>0">
                            <span mbr-icon class="socicon-twitter socicon mbr-iconfont mbr-iconfont-social"></span>
                        </div>
                        <div class="soc-item" mbr-if="socialCount>1">
                            <span mbr-icon class="socicon-facebook socicon mbr-iconfont mbr-iconfont-social"></span>
                        </div>
                        <div class="soc-item" mbr-if="socialCount>2">
                            <span mbr-icon class="socicon-instagram socicon mbr-iconfont mbr-iconfont-social"></span>
                        </div>
                        <div class="soc-item" mbr-if="socialCount>3">
                            <span mbr-icon class="socicon-youtube socicon mbr-iconfont mbr-iconfont-social"></span>
                        </div>
                        <div class="soc-item" mbr-if="socialCount>4">
                            <span mbr-icon class="socicon-behance socicon mbr-iconfont mbr-iconfont-social"></span>
                        </div>
                        <div class="soc-item" mbr-if="socialCount>5">
                            <span mbr-icon class="socicon-vimeo socicon mbr-iconfont mbr-iconfont-social"></span>
                        </div>
                    </div>
                </div>
            </div>

... also z.B. unter der letzten Spalten mit den "Listen" Links (kopierte Block ist unten mit Maus markiert):

Das kann dann so aussehen:

[inno]

Funktioniert einwandfrei!
Wie kann ich dann das Logo in der mobilen Ansicht noch zentriert anzeigen lassen?

[inno]

... und leider noch etwas: Wie kann ich den Container denn genau mittig setzen, da der linke und rechte Rang unterschiedlich gross sind?

[Tommy Herrmann]

Du - ich denke da lassen wir uns beide von den unterschiedlichen Inhalten der Spalten optisch teuschen, denn diese sind alle vier genau gleich groß.

Hier die erste Spalte mit 297.5px Breite:

Hier die letzte Spalte mit 297.5px Breite:

Hier habe ich mal zur Verdeutlichung eine rechte "border" (Rahmen) gesetzt - da sieht man dann schon, dass alle gleich breit sind:

[inno]

Dann liegt es daran , dass das Logo linksbündig zur Spalte ist und nicht rechtbündig.
Kann man das einstellen, dann sollte es auch optisch passen. Grüße

[Tommy Herrmann]

Du - ganz sicher - ich habe leider heute keinerlei Zeit mehr an so etwas herum zu fummeln. Versuche es mal selbst, Bootstrap hat da viele Möglichkeiten und vorbereitete Klassen:

https://getbootstrap.com/docs/5.0/utili ... lign-items

Falls Du es nicht schaffst - melde Dich morgen nochmals ...

[Tommy Herrmann]

Meiner Meinung nach würde das aber auch nicht richtig aussehen, da alle anderen Spalten linksbündig sind - wäre das einfach optisch falsch.

[inno]

Hallo Tommy, ich komm hier leider nicht weiter. Der Footer sollte optisch mittig sein.
Das Logo müsste also rechtsbündig ausgerichtet werden. Wäre super, wenn du mir hier nochmal helfen könntest. Grüße

[Tommy Herrmann]

Moin,

Ich habe diese Style-Angaben von Mobirise aus dem <img> Tag entfernt:

mbr-style="{'height': logoSize + 'rem'}"

und die Größe meines Logos mit meiner eigenen Style-Anweisung style="max-witdh: 50%;" (bezogen auf die Breite des Bereichs) ersetzt sowie die Bootstrap class="float-end" hinzugefügt, die das Bild an das Ende des Blocks setzt:

<img style="max-width: 50%;" src="file:///C:/Users/User/Documents/Mobirise/ExpertM5/assets/images/logo-mobirise-220x220.png" alt="Mobirise" class="float-end">

Dann musst Du noch bei der class="navbar-brand" im "CSS Editor" (siehe Screenschot) das:

display: flex;

ändern in:

display: block;


Im Screenshot vom "Code Editor" habe ich diese Stellen markiert:

Im Screenshot der Ansicht habe ich noch einen grauen Hintergrund unter die einzelnen Bereiche gelegt, damit man sehen kann, dass diese gleich groß sind und auch sehen kann, dass das Bild nun ganz rechts sitzt:

... und so ohne den grauen Hintergrund:

[inno]

Tommy, du bist der Beste! Ich danke dir! Werde es heute Abend gleich versuchen! Grüße und schöne Ostern!

[inno]

Jetzt doch gleich getestet! TOP! Wie immer!