Seite 1 von 1
Umbau Footer
Verfasst: Mi 5. Apr 2023, 10:54
von 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
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 11:58
von 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:
... 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.
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 12:24
von 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
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 12:26
von inno
Wenn ich den col-gl nicht setze wird MObil alles richtig dargestellt aber auf dem Desktop habe ich 2 Reihen?
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 12:30
von inno
Kann man das Logo nicht an den rechten Rand "Kleben" wie bei mir oben im Screen?
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 12:42
von 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.
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 14:37
von 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.
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 15:19
von 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:
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 16:06
von inno
Funktioniert einwandfrei!
Wie kann ich dann das Logo in der mobilen Ansicht noch zentriert anzeigen lassen?
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 16:14
von inno
... und leider noch etwas: Wie kann ich den Container denn genau mittig setzen, da der linke und rechte Rang unterschiedlich gross sind?
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 16:26
von 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:
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 16:40
von 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
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 16:48
von 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 ...
Re: Umbau Footer
Verfasst: Mi 5. Apr 2023, 16:50
von 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.
Re: Umbau Footer
Verfasst: Do 6. Apr 2023, 08:47
von 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
Re: Umbau Footer
Verfasst: Do 6. Apr 2023, 10:43
von 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:
Re: Umbau Footer
Verfasst: Do 6. Apr 2023, 16:26
von inno
Tommy, du bist der Beste! Ich danke dir! Werde es heute Abend gleich versuchen! Grüße und schöne Ostern!
Re: Umbau Footer
Verfasst: Do 6. Apr 2023, 16:42
von inno
Jetzt doch gleich getestet! TOP! Wie immer!
