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.1 + Code Editor

Ich bin nicht doof. Ich denke nur anders.
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.1 + Code Editor

Ich bin nicht doof. Ich denke nur anders.
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)
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.1 + Code Editor

Ich bin nicht doof. Ich denke nur anders.
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.1 + Code Editor

Ich bin nicht doof. Ich denke nur anders.
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.1 + Code Editor

Ich bin nicht doof. Ich denke nur anders.
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
Photo Custom-Block aus Mobirise-Block erstellen Goldschwalbe 3 102 Heute, 00:18
Letzter Beitrag: Martin73
  Wieviel Seiten in Mobirise Uwe-Johannes 16 245 17.02.2020, 18:47
Letzter Beitrag: Uwe-Johannes
  Mobirise-Border Linie teilweise entfernen Thomas Saake 0 42 16.02.2020, 16:21
Letzter Beitrag: Thomas Saake
  Mobirise-Meldung Footer Thomas Saake 6 106 15.02.2020, 13:06
Letzter Beitrag: Rancher
  Mobirise mit OneDrive ullumulu 12 294 10.02.2020, 11:46
Letzter Beitrag: ullumulu
  NOF Seiten in Mobirise seehund57 9 219 09.02.2020, 16:23
Letzter Beitrag: Tommy Herrmann
  Mobirise- Fehlermeldung beim Publizieren Thomas Saake 10 213 07.02.2020, 08:20
Letzter Beitrag: Clemens
  Word-Texte in Mobirise Clemens 4 121 05.02.2020, 08:02
Letzter Beitrag: Clemens
  Mobirise-SEO Analyse Thomas Saake 3 121 04.02.2020, 17:11
Letzter Beitrag: Thomas Saake
  Mobirise-Popup Modal Thomas Saake 9 197 31.01.2020, 11:38
Letzter Beitrag: Tommy Herrmann



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!