CityPortal - TimeLine

Для обозначения важный событий или мероприятий вы можете использовать данный TimeLine. Он очень легко редактируется и наполняется новыми событиями.

Пример

Прошедшее событие 25.01.14

Тут будет описание прошедшего события!
Скорое событие 17.05.14
Название очередного мероприятия 31.05.14

Некоторая информация может выходить за рамки заголовка и более подробно описывать ситуацию
Стили заголовков так же позволяют писать длинные названия без каких либо смещений или проблем Скоро
Продолжать можно до бесконечности 07.06.14

Как разместить или редактировать:
В визуальном редакторе нажмите на клавишу "Источник" (Желательно изначально выбрать "Редактировать HTML код" вашей страницы) и в нужном месте на странице вставьте данный код:

<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag grey">Прошедшее событие</span>
<span class="time-wrapper"><span class="time">25.01.14</span></span>
</div>
<div class="desc">Тут будет описание прошедшего события!</div>
</div>
</li>

<li>
<div class="direction-l">
<div class="flag-wrapper">
<span class="flag">Новое событие</span>
<span class="time-wrapper"><span class="time">17.05.14</span></span>
</div>
<div class="desc"></div>
</div>
</li>

</ul>

Красным цветом выделены места, которые подлежат редактированию. Если событие уже прошло, используйте класс "grey" (впишите его в <span class="flag grey">, выделено зеленым цветом). Для добавления новой даты скопируйте и добавьте данный код перед закрывающим тегом </ul>.

<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Название события</span>
<span class="time-wrapper"><span class="time">Дата</span></span>
</div>
<div class="desc">Описание события</div>
</div>
</li>

Для расположение блоков справа и слева от основной линии, следите за первым классом в списке <div class="direction-r"> и <div class="direction-l">. Где r - расположение справа (от английского right), а l - расположение слева (от английского left).