- Joomla Version
- 6.1.2
- PHP Version
- PHP 8.3.x
- Hoster
- Netcup
- Link (URL) zur Seite mit dem Problem
- https://www.crazy-to-bike.de/blogs/event-blog.html
Hallo,
ich möchte das kostenpflichtige Timeline-Modul, das ich seit Jahren nutze, gegen die Custom-Variante von drmenzelit (https://magazine.joomla.org/issues/2025/au…eate-a-timeline) ersetzen. Grundsätzlich funktioniert das auch - vielen Dank für die Anregung und den Code.
Allerdings musste ich die timeline.php unter /modules/mod_articles/tmpl ablegen, damit das Layout gefunden wird. Weder gibt es den Ordner templates\cassiopeia\html\mod_articles, noch einen entsprechenden Ordner im von mir verwendeten Template.
Hier https://www.crazy-to-bike.de/blogs/event-blog.html ist das im Lightmode (!!!) und unterhalb der bisherigen Timeline (also runterscrollen) zu sehen.
Folgende Anpassungen klappen noch nicht wie gewünscht:
Ich hätte gerne, dass die Kästen der Timeline-Elemente links und rechts nicht erst beginnen, wenn der vorherige auf der jeweils anderen Seite zu Ende ist, sondern, dass sich das überlappt. Folgenden css-Code habe ich dafür (bislang nur im Darkmode !!!):
[data-bs-theme="dark"] #timeline {
position: relative;
width: 100%;
padding-inline: .5rem;
margin: 30px auto;
}
[data-bs-theme="dark"] #timeline:before {
position: absolute;
top: 0;
left: 50%;
width: 3px;
height: 100%;
content: "";
background-color: #cc3333 !important;
}
[data-bs-theme="dark"] #timeline:after {
display: table;
width: 100%;
clear: both;
content: "";
}
[data-bs-theme="dark"] .timeline-item:after,
[data-bs-theme="dark"] .timeline-item:before {
display: block;
width: 100%;
clear: both;
content: "";
}
[data-bs-theme="dark"] .timeline-item {
position: relative !important;
}
[data-bs-theme="dark"] .timeline-item .timeline-icon {
position: absolute;
top: -20px;
left: 50%;
width: 26px;
height: 26px;
margin-left: -23px;
overflow: hidden;
background-color: #cc3333 !important;
border-radius: 50%;
border: 12px solid #191724;
padding: 12px;
}
[data-bs-theme="dark"] .timeline-item .timeline-content {
position: relative !important; /* ohne funktionieren die weiterlesen-Links nicht, wenn mit margin-bottom der Abstand zwischen den Boxen verringert wird */
/* mit verschwindet allerdings der Pfeil an den Boxen */
z-index: 1 !important; /* sonst funktionieren die weiterlesen-Links nicht, wenn mit margin-bottom der Abstand zwischen den Boxen verringert wird */
width: 45%;
padding: .5rem;
background: #191724;
border-radius: var(--border-radius);
box-shadow: 0 0.5rem 1rem rgba(248, 248, 248, 0.1);
}
[data-bs-theme="dark"] .timeline-item .timeline-content h2 {
padding: .5rem;
margin: -.5rem -.5rem .5rem -.5rem;
font-size: 1.5rem;
color: #fff;
background-color: #cc3333 !important;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
[data-bs-theme="dark"] .timeline-item .timeline-content p {
margin-top: 1rem;
}
[data-bs-theme="dark"] .timeline-item .timeline-content:before {
position: absolute;
top: 0px;
left: 45%;
width: 0;
height: 0;
content: "";
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #cc3333;
z-index: 2 !important; /* der Pfeil an den Boxen erscheint trotzdem nicht, wenn bei ".timeline-item .timeline-content" das "position: relative;" einkommentiert ist */
}
[data-bs-theme="dark"] .timeline-item:nth-child(odd) .timeline-content {
/* Block linksbündig, immer wieder unter dem vorherigen linken Block */
float: left; /* linksbündig */
clear: left !important; /* verhindert Lücken zwischen den linken Einträgen */
width: 45%; /* Breite wie bisher */
margin-bottom: -200px; /* bewirkt, dass die nächste Box auf derselben Seiten nach oben wandert */
}
[data-bs-theme="dark"] .timeline-item:nth-child(even) .timeline-content {
/* Block rechtsbündig, immer wieder unter dem vorherigen rechten Block */
float: right; /* rechtsbündig */
clear: right !important; /* verhindert Lücken zwischen den rechten Einträgen */
width: 45%; /* gleiche Breite wie links */
margin-bottom: -200px; /* bewirkt, dass die nächste Box auf derselben Seiten nach oben wandert */
}
[data-bs-theme="dark"] .timeline-item:nth-child(even) .timeline-content:before {
right: 45%;
left: inherit;
content: "";
border-right: 20px solid #cc3333;
border-left: 0;
z-index: 2 !important; /* muss über dem z‑Index von timeline-item .timeline-content liegen, damit der Pfeil an der Box erscheint - funktioniert aber nicht */
}
[data-bs-theme="dark"] @media (max-width: 768px) {
[data-bs-theme="dark"] #timeline {
width: 90%;
padding: 0;
margin: 30px;
}
[data-bs-theme="dark"] #timeline:before {
left: 0;
}
[data-bs-theme="dark"] .timeline-item .timeline-content {
float: right;
width: 90%;
}
[data-bs-theme="dark"] .timeline-item .timeline-content:before,
[data-bs-theme="dark"] .timeline-item:nth-child(odd) .timeline-content:before
[data-bs-theme="dark"] .timeline-item:nth-child(even) .timeline-content:before {
left: 10%;
margin-left: -6px;
border-right: 20px solid #cc3333;
border-left: 0;
}
[data-bs-theme="dark"] .timeline-item .timeline-icon {
left: 0;
}
}Hier https://www.crazy-to-bike.de/blogs/event-blog.html ist das im Darkmode (!!!) und unterhalb der bisherigen Timeline (also runterscrollen) zu sehen.
Durch die Änderungen verschwindet entweder der Pfeil an den Boxen an eine falsche Stelle, oder der Weiterlesen-Button ist nicht anklickbar. Imho irgendwie ein falsches Zusammenspiel von position: relative;, z-index und margin-bottom: -200px;, den ich nicht aufgelöst bekomme. Im Code oben wird anhand der eingefügten Kommentare imho ganz gut deutlich, was ich meine.
Mir ist auch klar ist, dass margin-bottom: -200px; programmiertechnisch wohl sowieso eine miese Krücke ist. Aber selbst mit Hilfe von KI bekomme ich keine saubere Lösung, die macht, was sie soll.
Vielleicht kann sich das mal jemand mit Ahnung anschauen und im Idealfall verbessern / lösen.
