Timeline - Milestone Bullet - Support | Kriesi.at

the rule that is responsible for the little dashed line is:

.avia-timeline-vertical .av-milestone-icon-wrap::after {
    content: "";
    height: 1000%;
    width: 1px;
    position: absolute;
    top: 0;
    left: 50%;
    border-left-style: dashed;
    border-left-width: 1px;
}

if you want to change something that will be the first startpoint for it.
For border-style see f.e.: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#values

to put instead a dynamic Date inbetween these spaces is hard to obtain.

March 26, 2021 at 6:27 pm #1290614

Hallo, thanx for reply.
Where to put this code?

But – Im looking for something like this, Im not sure, if it is right solution?
https://www.hradloket.cz/hrad-loket/

March 26, 2021 at 6:31 pm #1290615

I dont need dynamic date – I need only “text” datem writen by me – it means – “date column” from Timeline edit show on place instead bullets.

March 26, 2021 at 10:27 pm #1290641

https://webers-testseite.de/timeline-2/

h- hhh – clears throat – and why not cloneing ? ;)

put a codeblock element in a column (1/1)
and insert that html pasted from that page:

<div id="timeline"> <!-- opening tag of the timeline -->

      <!--  So this is the always the same block  -->
      <div class="timeline-block">
        <div class="timeline-date">
          <h3><em>Text</em> Date <em> after Date </em></h3>
        </div>
        <div class="timeline-content">
            <h3>Title</h3>
            <p>Text-block</p>
        </div>
      </div>
       <!--  End of timeline item -->

</div> <!--  Closing tag of the whole timeline -->

quick css for that:


#timeline {
 margin: 30px 30px 80px;
 position:relative
}
#timeline .timeline-block {
 width:100%;
 float:left;
 position:relative
}
#timeline .timeline-block:before {
 content:'';
 position:absolute;
 top:0;
 left:15%;
 height:100%;
 width:1px;
 background:#433322;
 margin-left:-1px;
 z-index:-1
}
#timeline .timeline-date {
 float:left;
 text-align:center;
 width:30%;
 height:100%;
 background:url('/wp-content/uploads/separator-2.svg') no-repeat #f5ede2;
 background-position:center bottom 10px;
 background-size:auto 10px;
 padding:10px 0 30px 0;
 margin-top:5px
}
#timeline .timeline-date h3 {
 margin:0
}
#timeline .timeline-date h3 em {
 font-style:normal;
 font-size:1.2rem;
 display:block
}
#timeline .timeline-content {
 width:70%;
 float:right;
 position:relative;
 padding:20px 0 80px 0;
 box-sizing:border-box
}
#timeline .timeline-content:last-child {
 padding-bottom:0
}
#timeline .timeline-content h3 {
 text-align:left
}
@media only screen and (min-width:960px) {
 #timeline .timeline-block {
  width:58.8%;
  float:right
 }
 #timeline .timeline-block:nth-child(even) {
  float:left
 }
 #timeline .timeline-block:nth-child(even):before {
  left:auto;
  right:15%;
  margin-left:0;
  margin-right:-1px
 }
 #timeline .timeline-block:nth-child(even) .timeline-date {
  float:right
 }
 #timeline .timeline-block:nth-child(even) .timeline-content {
  float:left
 }
 #timeline .timeline-block:nth-child(even) .timeline-content,
 #timeline .timeline-block:nth-child(even) .timeline-content h3 {
  text-align:right
 }
}

March 26, 2021 at 10:35 pm #1290642

there are ways with jQuery to get a timeline ALB to something like this – but – that is too complicated i think:
the code above is clear enough – and pure html – and very fast to add a lot of timeline-blocks
better you forgot the next !!!

child-theme functions.php:

function timeline_reconstruction(){
?>
<script>
(function($) {
	$('.av-milestone-date').each( function() {
	     var mstoneDate = $(this).html();
	     $(this).find('.av-milestone-indicator').html('<div class="sign"></div>');
	     $(this).siblings('.av-milestone-icon-wrap').html(mstoneDate);
	     $(this).css('opacity', '0');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'timeline_reconstruction');

.av-milestone-indicator {
  position: absolute;
  content: "";
  top: 100px;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/wp-content/uploads/a-nice.svg);
  background-repeat: no-repeat;
}

.av-milestone-icon-wrap strong {
  font-size: 24px
}

and you may have this only for the non responsive case in a media query with min-width.

March 26, 2021 at 11:43 pm #1290645

Ah thanx for reply, but it dosnt work so good, like looks like from your test..
Im not so experienced for this …:/
When Im trying it by your steps, it looks like that:

pokus

I dont know whats wrong?:))

March 27, 2021 at 3:38 am #1290668

i do not see private message content – i’m participant as you are.

March 27, 2021 at 3:41 am #1290669

sorry – remove those comments which are not suitable for html
PS this is the right way for comments in html docs:


<div id="timeline">
      <div class="timeline-block">
        <div class="timeline-date">
          <h3><em>Text</em> Date <em> after Date </em></h3>
        </div>
        <div class="timeline-content">
            <h3>Title</h3>
            <p>Text-block</p>
        </div>
      </div>
</div>

and this is the part that is duplicated for each timeline item:

<div class="timeline-block">
        <div class="timeline-date">
          <h3><em>Text</em> Date <em> after Date </em></h3>
        </div>
        <div class="timeline-content">
            <h3>Title</h3>
            <p>Text-block</p>
        </div>
</div>

surrounded only by one :

<div id="timeline">
 … here comes the timeline-items( once , twice, etc. pp.)
</div>

March 27, 2021 at 3:46 am #1290670

take this for the first try:

<div id="timeline">
<div class="timeline-block">
        <div class="timeline-date">
          <h3><em>Text</em> Date <em> after Date </em></h3>
        </div>
        <div class="timeline-content">
            <h3>Title</h3>
            <p>Text-block</p>
        </div>
</div>
<div class="timeline-block">
        <div class="timeline-date">
          <h3><em>Text</em> Date <em> after Date </em></h3>
        </div>
        <div class="timeline-content">
            <h3>Title</h3>
            <p>Text-block</p>
        </div>
</div>
<div class="timeline-block">
        <div class="timeline-date">
          <h3><em>Text</em> Date <em> after Date </em></h3>
        </div>
        <div class="timeline-content">
            <h3>Title</h3>
            <p>Text-block</p>
        </div>
</div>
<div class="timeline-block">
        <div class="timeline-date">
          <h3><em>Text</em> Date <em> after Date </em></h3>
        </div>
        <div class="timeline-content">
            <h3>Title</h3>
            <p>Text-block</p>
        </div>
</div>
<div class="timeline-block">
        <div class="timeline-date">
          <h3><em>Text</em> Date <em> after Date </em></h3>
        </div>
        <div class="timeline-content">
            <h3>Title</h3>
            <p>Text-block</p>
        </div>
</div>
</div>

March 29, 2021 at 12:13 pm #1291076