jQuery Theming

Apply colors through the plugin options.

View the page source and read the Javascript code to see how it was done.

jQuery code:


// Build items and set colors with plugin options
var items = [
  { id: 1, title: 'Done', content: 'Complete' },
  { id: 2, title: 'Working', content: 'In progress' }
];

var $container = jQuery('#jq-theme-tl .timeline__items');
items.forEach(function (it) {
  $container.append('
' + it.title + '
' + it.content + '
');
});

jQuery('#jq-theme-tl').timeline({
  mode: 'vertical',
  nodeColor: '#FF9800',
  lineColor: '#FFB74D'
});