01

Icons anpassen


Hier ein kleines Tutorial, um die Icons in Mobirise nach Wunsch anzupassen. Ich habe aus dem Thema Mobirise 5 einen Toggle-Block verwendet. Mobirise Version 5.5.8


Toggle FAQ (original)

The number of items is limited in this block. Open the Block parameters to change the amount of items.

Mobirise Kit is a service that provides the access to all current and new themes/extensions developed by Mobirise. New themes/extensions are released every month and will be available in your account during your plan period, without any additional charge.

Yes, Mobirise is free for both non-profit and commercial sites.

Toggle FAQ (angepasste Icons)

The number of items is limited in this block. Open the Block parameters to change the amount of items.

Mobirise Kit is a service that provides the access to all current and new themes/extensions developed by Mobirise. New themes/extensions are released every month and will be available in your account during your plan period, without any additional charge.

Yes, Mobirise is free for both non-profit and commercial sites.

So lassen sich die Icons im Toggle Faq bzw. Akkordeon ändern:

1.
Mit dem Codeeditor die Zeile "<span class="sign mbr-iconfont mbri-arrow-down"></span>" suchen.
statt mbri-arrow-down nehme ich beispielsweise fa-caret-down der Schriftart FontAwesome. Nun muss die Zeile so aussehen: <span class="sign mbr-iconfont fa fa-caret-down"></span>



2.
Im CSS der class .mbr-iconfont die Schriftart zuweisen:

.mbr-iconfont {
font-family: 'FontAwesome' !important;
}


3.
um beide Zeichen (zum Auf- und Zuklappen) zu ändern, noch im CSS folgendes hinzufügen:

.mbri-arrow-up::before {
content: "\f0d8" !important;
}
.mbri-arrow-down::before {
content: "\f0d7" !important;
}

Der Wert für content muss entsprechend angepasst werden, er lässt sich über die Entwickler-Tools des Browsers auslesen.

02

Mobirise Video halbseitig einbinden


Hier eine Anleitung, um ein Video halbseitig einzusetzen. Mobirise Version 5.5.8


Einen 2-teiligen Block nehmen, z.B. einen Header aus dem Theme Journal M5:

1.
Mit dem Codeeditor die Zeile für das Bild <img…> suchen und mit dem Code für das Video ersetzen:

<video id="myVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" poster="https://www.rheingucken.de/labor/video/media/winter.jpg"></video>


2.
um das div "img-container" einen wrapper setzen:

<header>
<div class="img-container col-12 col-lg-6">…
</header>


3.
ins CSS muss nun noch:

header {
position: relative;
background-color: #ffffff;
width: 50%;
@media (max-width: 991px) {
width: 100%;
}
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
transform: translateX(-50%) translateY(-50%);
background: #FFFFFF;
}

Der Wert für width kann entsprechend angepasst werden, je nachdem, wie breit das Video werden soll.

(Den Code für das Einbinden eines Hintergrund-Videos habe ich hier bei Tommy Herrmann gefunden, dort gibt es weitere Tutorials.) 

03

Mobirise Submenu in Safari


Hier eine Anleitung, um das Submenu in Safari zu berichtigen. Mobirise Version 5.6.8


Das Submenu verhält sich in Safari nicht so, wie es sollte? Es klappt nicht zu, nicht automatisch auf? Und plötzlich wird ein Link aufgerufen, wenn man mit der Maus über die oberste Zeile kommt?

Hier meine Lösung:

1.
Mit dem Codeeditor die Zeile "<li class="nav-item dropdown" suchen.
statt data-toggle="dropdown-submenu" muss hier stehen: data-bs-toggle="dropdown-submenu".

(Hintergrund: Allen benutzerdefinierten Eigenschaften in Bootstrap 5 wird bs- vorangestellt, um Konflikte mit CSS von Drittanbietern zu vermeiden.)


2.
Außerdem gibt es in der Zeile <div class="dropdown-menu"> einen Link mit "href= …" auf dem obersten Menupunkt. Diesen einfach löschen, damit die Untermenus erwartungsgemäß funktionieren.

submenu-quelltext