Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobirise-Kann man die Timeline Linie ändern
#1
Moin.
Ich habe einen MBR Timeline Block eingefügt.
www.tsad17.de

Kann man diese blauen Punkte bei den einzelnen Ereignissen eigentlich durch ein Bild ersetzen?
Natürlich der Größe entsprechend. Ich dachte z.B. in meinem Fall an ein Steuerrad.
Ist ja auch rund...  :D

.png  steuerrad-626x626.png (Größe: 47,8 KB / Downloads: 17)
Gruß
Thomas

Mobirise 4.12.3 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

sicher kann "man" das. Müsstest Du die Class umschreiben

Code:
.iconBackground {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 30px;
  display: inline-block;
  background-color: #0000ff;
  top: 20px;
  margin-left: -10px;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Und das Steuerrad???  Rolleyes


.jpg  stewuerlinie.jpg (Größe: 53,96 KB / Downloads: 2)


So in etwa...
Gruß
Thomas

Mobirise 4.12.3 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
So in etwa?

.png  1.png (Größe: 1.003,44 KB / Downloads: 20)


Die mit rot markierten Anweisungen habe ich hinzugefügt bzw. geändert:

.png  2.png (Größe: 241,52 KB / Downloads: 18)
Bleibt Gesund!
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

Benutze zum arbeiten: Win10 (Windows Insider) - Mozilla Firefox, Microsoft Edge - EmEditor, Visual Studio Code - WAMP,  FileZilla, paint.net und Gimp.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Genau so. Astrein.
Danke.
Gruß
Thomas

Mobirise 4.12.3 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Großartig Werner thumbs up

... ich hatte das vorhin auch schon kurz versucht, muss aber noch einen Fehler drin gehabt haben :confused:

Hier der Einbau auf einer meiner Testseiten in Mobirise:

http://www.mobirise-tutorials.com/Testse...clone.html

Das Steuerrad musst Du verkleinern, hier am Server mit 75 x 75 Pixeln und hier die gesamte CSS, die im "CSS Editor" des 'Timeline-Blocks' steht:

Code:
.iconBackground {
  position: absolute;
  left: 47.5%;
  width: 75px;
  height: 75px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 30px;
  display: inline-block;
  background-color: transparent;
  top: 20px;
  margin-left: -10px;
  background-image: url("http://www.mobirise-tutorials.com/Testseiten/Software-Ende/steuerrad.png");
  background-position: center center;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Ich habe mal ein bisschen hin und her geschraubt.
Ergebnis:

tsad17.de

Auf dem Smartphone super.
Aber auf dem PC....
Da sind die Steuerräder überhaupt nicht auf der Linie. (Ziemlich klein. Rechts und Links)
Gruß
Thomas

Mobirise 4.12.3 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Das passt auch am Handy bei Dir nicht, das liegt halt links (wie auch am PC) und sieht daher ungefähr richtig am Handy aus.

... ich habe das jetzt mal auf das Mini-Steuerrad geändert und die CSS ein wenig angepasst:

http://www.mobirise-tutorials.com/Testse...clone.html

Code:
.iconBackground {
  position: absolute;
  left: 50%;
  width: 25px;
  height: 25px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 30px;
  display: inline-block;
  background-color: transparent;
  top: 30px;
  margin-left: -12px;
  background-image: url("http://www.mobirise-tutorials.com/Testseiten/Software-Ende/meinsteuerradklein.png");
  background-position: center center;
}

Bei mir passt das :confused:

... vielleicht geht das so nicht mit Deiner class="img-fluid"

Versuche mal an das Bild direkt zu schreiben:

style="max-width: 100%;"

und die class="img-fluid" raus nehmen, also dann so:

Code:
<img style="max-width: 100%;" src="assets/images/bredereiche-1-826x415.png" alt="Bredereiche" title="Bredereiche">
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
also - an der class="img-fluid" liegt es doch nicht, habe es gerade getestet
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Jetzt ist es am PC korrekt drin. Am Smartphone (Galaxy S9) gar nicht mehr.
Habe aber wahrscheinlich schon zuviel an der Seite rumgefummelt.
Ich lasse Sie mal zur Ruhe kommen. Morgen ist auch noch ein Tag. Oder übermorgen.
:sleep:
Gruß
Thomas

Mobirise 4.12.3 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
... so etwas sollte man immer zunächst auf einer möglichst "sauberen" Seite testen - also auf einer Seite wo möglichst nichts anderes eingebaut ist, wie z.B. Dein "Backstretch" oder andere Skripte, sonst ist es schwer Fehler zu finden.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise Serverliste Down ? Hans Klawun 5 140 02.04.2020, 05:29
Letzter Beitrag: Tommy Herrmann
  Mobirise 4.12.3 - Schrift Formatierung Problem futurelike 19 298 30.03.2020, 09:20
Letzter Beitrag: c-laus
  Hinweise zu Mobirise entfernen barbara0701 18 326 29.03.2020, 19:00
Letzter Beitrag: barbara0701
  Veröffentlichen mit Mobirise funktioniert nur teilweise andreas.niklas 1 74 23.03.2020, 14:15
Letzter Beitrag: Tommy Herrmann
  Mobirise-Nach einfügen von PopUp lädt die Seite nicht mehr auf den Server Thomas Saake 26 354 21.03.2020, 13:38
Letzter Beitrag: Martin73
  Mobirise und TLS 1.2. harfenklang 2 114 12.03.2020, 13:38
Letzter Beitrag: harfenklang
  Mobirise-Site auf Androidhandy ansehen? harfenklang 2 99 09.03.2020, 16:17
Letzter Beitrag: Tommy Herrmann
  Mobirise- Fehlermeldung beim Publizieren Thomas Saake 14 355 07.03.2020, 10:14
Letzter Beitrag: Thomas Saake
  Programm Farbe ändern bei der Version 5.0.0 kfz-fotograf 1 79 04.03.2020, 11:12
Letzter Beitrag: Tommy Herrmann
  font im Mobirise Block ändern nof15us 2 138 03.03.2020, 14:08
Letzter Beitrag: nof15us



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!