<ul class="timeline">

  <li>

  <div class="timeline-badge"><img src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>/img/nophoto.png<?endif?>"></div>

  <div class="timeline-panel">

  <div class="timeline-heading">

  <a href="$ENTRY_URL$" class="timeline-title">$TITLE$</a>

  <p><small class="text-muted">$CATEGORY_NAME$</small></p>

  </div>

  <div class="timeline-body">

  <p>$MESSAGE$</p>

  </div>

  </div>

  </li>

  </ul>

.timeline {

 list-style: none;

 padding: 20px 0 20px;

 position: relative;

}

.timeline:before {

 top: 0;

 bottom: 0;

 position: absolute;

 content: " ";

 width: 3px;

 background-color: #eeeeee;

 left: 50%;

 margin-left: -1.5px;

}

.timeline li {

 margin-bottom: 20px;

 position: relative;

}

.timeline li:before,

.timeline li:after {

 content: " ";

 display: table;

}

.timeline li:after {

 clear: both;

}

.timeline li .timeline-panel {

 width: 46%;

 float: left;

 border: 1px solid #d4d4d4;

 border-radius: 2px;

 padding: 20px;

 position: relative;

 -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

}

.timeline li .timeline-panel:before {

 position: absolute;

 top: 26px;

 right: -15px;

 display: inline-block;

 border-top: 15px solid transparent;

 border-left: 15px solid #ccc;

 border-right: 0 solid #ccc;

 border-bottom: 15px solid transparent;

 content: " ";

}

.timeline li .timeline-panel:after {

 position: absolute;

 top: 27px;

 right: -14px;

 display: inline-block;

 border-top: 14px solid transparent;

 border-left: 14px solid #fff;

 border-right: 0 solid #fff;

 border-bottom: 14px solid transparent;

 content: " ";

}

.timeline li .timeline-badge {

 color: #fff;

 width: 50px;

 height: 50px;

 line-height: 50px;

 font-size: 1.4em;

 text-align: center;

 position: absolute;

 top: 16px;

 left: 50%;

 margin-left: -25px;

 background-color: #999999;

 z-index: 100;

 border-top-right-radius: 50%;

 border-top-left-radius: 50%;

 border-bottom-right-radius: 50%;

 border-bottom-left-radius: 50%;

}

.timeline li.timeline-inverted .timeline-panel {

 float: right;

}

.timeline li.timeline-inverted .timeline-panel:before {

 border-left-width: 0;

 border-right-width: 15px;

 left: -15px;

 right: auto;

}

.timeline li.timeline-inverted .timeline-panel:after {

 border-left-width: 0;

 border-right-width: 14px;

 left: -14px;

 right: auto;

}

.timeline-title {

 margin-top: 0;

 color: black;

 font-size: 18px;

}

.timeline-body p,

.timeline-body ul {

 margin-bottom: 0;

}

.timeline-body p {

 margin-top: 5px;

}

.timeline-badge img {

 border-radius: 999px;

}

<script>$(function(){  

$('#rtim li:even').addClass('');  

$('#rtim li:odd').addClass('timeline-inverted');  

$('#rtim li:last').addClass('');  

});</script>

<div id="rtim">$BODY$</div>