La idea es simple. Crear una línea de tiempo animada con css. Muy útil para mostrar una página con la historia de una corporación o de los momentos importantes en la biografía de una persona. Y no es necesario instalar ninguna extensión. Solo bastará con hacer unas leves modificaciones a tu template y agregar unas líneas a tu css.

Curioseando en la web me encontré un código muy simple de aplicar y personalizar. El sitio http://codepen.io/ es un repositorio de código interminable donde los usuarios comparten sus creaciones. Me encontré este ejemplo posteado por el usuario “Peiwen lu” : 

http://codepen.io/P233/pen/lGewF

Lo que seguía era implementarlo en un artículo joomla, para lo cual necesitamos tres cosas. 

1. El html disponible el sitio del demo.

2. El css disponible también ahí.

3. La librería PrefixFree descargable desde aqui: https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js 

La librería PrefixFree es importante porque nos permite utilizar todas las propiedades css sin prefijos css  específicos para los distintos exploradores y automáticamente los agregará a nuestro css dependiendo del explorador con que ejecutemos nuestro sitio. 

Una de las formas más elegantes de implementar este código, es programando un plugin para joomla que cargue los archivos necesarios y solo agreguemos el código html a nuestros artículos, pero veremos la forma simple de lograrlo en unos cuantos pasos. Vamos a trabajar con la plantilla “protostar” de Joomla 3.2. 

Paso 1

Crea un archivo llamado timeline.css en la carpeta css de tu plantilla.

• Inicia sesión en el backend de tu instalación de joomla

• Ve al gestor de plantillas y da clic en “plantillas” y elige tu plantilla, en nuestro caso “protostar”.

• Da clic en el botón “new file”, selecciona la carpeta css, el tipo de archivo “css”, coloca el nombre “timeline” y da clic en “create”. 

/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */
/* -------------------------------------
 * General Style
 * ------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
.cuerpo {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 5%;
 font-size: 100%;
 font-family: "Noto Sans", sans-serif;
 color: #eee9dc;
 background: #48b379;
}
 
h2 {
 margin: 3em 0 0 0;
 font-size: 1.5em;
 letter-spacing: 2px;
 text-transform: uppercase;
}
 
/* -------------------------------------
 * timeline
 * ------------------------------------- */
#timeline {
 list-style: none;
 margin: 50px 0 30px 120px;
 padding-left: 30px;
 border-left: 8px solid #eee9dc;
}
#timeline li {
 margin: 40px 0;
 position: relative;
}
#timeline p {
 margin: 0 0 15px;
}
 
.date {
 margin-top: -10px;
 top: 50%;
 left: -158px;
 font-size: 0.95em;
 line-height: 20px;
 position: absolute;
}
 
.circle {
 margin-top: -10px;
 top: 50%;
 left: -44px;
 width: 10px;
 height: 10px;
 background: #48b379;
 border: 5px solid #eee9dc;
 border-radius: 50%;
 display: block;
 position: absolute;
}
 
.content {
 max-height: 20px;
 padding: 50px 20px 0;
 border-color: transparent;
 border-width: 2px;
 border-style: solid;
 border-radius: 0.5em;
 position: relative;
}
.content:before, .content:after {
 content: "";
 width: 0;
 height: 0;
 border: solid transparent;
 position: absolute;
 pointer-events: none;
 right: 100%;
}
.content:before {
 border-right-color: inherit;
 border-width: 20px;
 top: 50%;
 margin-top: -20px;
}
.content:after {
 border-right-color: #48b379;
 border-width: 17px;
 top: 50%;
 margin-top: -17px;
}
.content p {
 max-height: 0;
 color: transparent;
 text-align: justify;
 word-break: break-word;
 hyphens: auto;
 overflow: hidden;
}
 
label {
 font-size: 1.3em;
 position: absolute;
 z-index: 100;
 cursor: pointer;
 top: 20px;
 transition: -webkit-transform 0.2s linear;
}
 
.radio {
 display: none;
}
 
.radio:checked + .relative label {
 cursor: auto;
 -webkit-transform: translateX(42px);
}
.radio:checked + .relative .circle {
 background: #f98262;
}
.radio:checked ~ .content {
 max-height: 180px;
 border-color: #eee9dc;
 margin-right: 20px;
 -webkit-transform: translateX(20px);
 transition: max-height 0.4s linear, border-color 0.5s linear, -webkit-transform 0.2s linear;
}
.radio:checked ~ .content p {
 max-height: 200px;
 color: #eee9dc;
 transition: color 0.3s linear 0.3s;
}
 
/* -------------------------------------
 * mobile phones (vertical version only)
 * ------------------------------------- */
@media screen and (max-width: 767px) {
 #timeline {
 margin-left: 0;
 padding-left: 0;
 border-left: none;
 }
 #timeline li {
 margin: 50px 0;
 }
 
 label {
 width: 85%;
 font-size: 1.1em;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 display: block;
 -webkit-transform: translateX(18px);
 }
 
 .content {
 padding-top: 45px;
 border-color: #eee9dc;
 }
 .content:before, .content:after {
 border: solid transparent;
 bottom: 100%;
 }
 .content:before {
 border-bottom-color: inherit;
 border-width: 17px;
 top: -16px;
 left: 50px;
 margin-left: -17px;
 }
 .content:after {
 border-bottom-color: #48b379;
 border-width: 20px;
 top: -20px;
 left: 50px;
 margin-left: -20px;
 }
 .content p {
 font-size: 0.9em;
 line-height: 1.4;
 }
 
 .circle, .date {
 display: none;
 }
}

Es prácticamente el mismo código que el demo, solo que en este caso cambiaremos la etiqueta “body” por la clase “.cuerpo” y no afectar al body de nuestro sitio.

Paso 2

Descarga el script “prefixfree.min.js” del sitio http://leaverou.github.io/prefixfree/  y súbelo a la carpeta “js” de tu template:

• Abre el gestor de plantillas

• Da clic en la opción “plantillas” y luego en el botón “new file”

• Selecciona la carpeta “js” y haz clic en el botón “seleccionar un archivo”

• y finalmente haz clic en el botón “upload”. 

Paso 3

Finalmente habrá que editar el layout principal de tu plantilla. Por lo general se trata del archivo index.php dentro de la carpeta de tu template. Sin embargo, muchos desarrolladores de plantillas tienen distintos layouts y tendrás que editar aquel que tienes seleccionado por default en la configuración de tu plantilla. Incluso algunos desarrolladores de plantillas incluyen dentro de las opciones de configuración la posibilidad de incluir archivos con solo seleccionarlos. Consulta con tu soporte para más información. 

En el caso de la plantilla “protostar” el layout está de la forma general: en el archivo “index.php” 

Si sigues en el editor de plantillas podrás seleccionar el archivo y editarlo. Vamos a ubicar la etiqueta “</head>” y justo antes colocamos el siguiente código para que quede de la siguiente manera: 

<?php
     $document = JFactory::getDocument();
     $document->addStyleSheet('templates/'.$this->template.'/css/timeline.css'); //agregar el css
     $document->addScript('templates/'.$this->template.'/js/prefixfree.min.js'); //agregar el js
 
 ?>
</head>

Lo que este código hará es agregar las etiquetas necesarias para incluir los archivos en la carga de tu sitio. También podrías agregar tú mismo las etiquetas como sigue, solo que de la forma anterior Joomla! lo agregará en el lugar indicado: 

<link rel="stylesheet" href="/templates/protostar/css/timeline.css" type="text/css" />
<script src="/templates/protostar/js/prefixfree.min.js" type="text/javascript"></script> 

Paso 4

Lo último que queda es crear un artículo con el html, cambiando los datos “lorem ipsum” por tu text. Como puedes observar metemos todo en un <div> con la case “cuerpo” para que sea dentro de este div donde actúe nuestro css:

<div class=”cuerpo”>
     <h2>CSS3 Timeline</h2>
     <p>Please set the $vertical variable to false to see the horizontal version.</p>
     <ul id='timeline'>
          <li class='work'>
               <input class='radio' id='work5' name='works' type='radio' checked>
               <div class="relative">
                    <label for='work5'>Lorem ipsum dolor sit amet</label>
                    <span class='date'>12 May 2013</span>
                    <span class='circle'></span>
              </div>
              <div class='content'>
                   <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
                   </p>
              </div>
          </li>
          <li class='work'>
               <input class='radio' id='work4' name='works' type='radio'>
               <div class="relative">
                    <label for='work4'>Lorem ipsum dolor sit amet</label>
                    <span class='date'>11 May 2013</span>
                    <span class='circle'></span>
               </div>
               <div class='content'>
                    <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
                    </p>
               </div>
          </li>
          <li class='work'>
               <input class='radio' id='work3' name='works' type='radio'>
               <div class="relative">
                    <label for='work3'>Lorem ipsum dolor sit amet</label>
                    <span class='date'>10 May 2013</span>
                    <span class='circle'></span>
               </div>
               <div class='content'>
                    <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
                    </p>
               </div>
          </li>
          <li class='work'>
               <input class='radio' id='work2' name='works' type='radio'>
               <div class="relative">
                    <label for='work2'>Lorem ipsum dolor sit amet</label>
                    <span class='date'>09 May 2013</span>
                    <span class='circle'></span>
               </div>
               <div class='content'>
                    <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
                    </p>
               </div>
          </li>
          <li class='work'>
               <input class='radio' id='work1' name='works' type='radio'>
               <div class="relative">
                    <label for='work1'>Lorem ipsum dolor sit amet</label>
                    <span class='date'>08 May 2013</span>
                    <span class='circle'></span>
               </div>
               <div class='content'>
                    <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
                    </p>
               </div>
          </li>
     </ul>
</div>

Lo último, es publicar tu artículo y listo: Se verá como en el demo. Lo único que resta es que le agregues tu sazón modificando el css para ajustar los colores a tu voluntad.

El sitio http://codepen.io/ es un gran almacén de curiosidades y códigos muy buenos. Adaptarlos a joomla no debe ser un problema. En general, la mayoría lo podrás agregar de una manera similar. Espero que hayas disfrutado este tutorial tanto como yo al escribirlo y espero tus comentarios y sugerencias.