How to add color to horizontal timeline? (Timelines plugin)

Custom CSS & Theme Design
1

I’m building a timeline using this plugin:

I’ve got it working and my timeline is showing up.
Only, I don’t know how to edit the attributes in order to change the colour of the individual time bars.
I can add data-class=‘orange’ and it does change the item to orange, but if I try to put anything else in there, a different color, from in the css colours list, it doesn’t work.
I would also like to change the text color.

The help seems to presume I know how to format css in a way that this plugin understands it. I’ve added a couple of CSS Snippets that work, but more than that I’m a CSS noob.

How do I enter/format the info to color my timeline items?

1 Like
2

I seem to remember Timelines uses <span or <div blocks to create the sections, is that right?

If you copy/paste one or two examples here (the code itself), we could probably have a look. Surround the HTML in three backticks ` above and below so the forum doesn’t mess with it. Forum formatting tips.

3

I managed to get the coloring to work.

I went back through the youtube video tutorial on the plugin’s page slowly and paused it at a couple different places and managed to figure out what was happening. Through trial and error, I built up a .css file I put in my snippets folder. It holds a bunch of sections like this:

.vis-item.green {
	background-color: rgba(150,242,162,0.6);
	filter: none;
	border-color: rgba(112,181,121,1);	
}

Thanks for the backticks tip!

So, I’ve got the bars and the borders colour figured out.

What I don’t know now is if there is a way to change the colour of the text. I’ve tried a few different CSS type entries for the main text of the item in the timeline, but either my line breaks the formatting or does nothing.

If anyone has ideas how to format the text colour, I’d love to know.

1 Like
4

Thanks man, I’ve been searching this for a long time and it worked. Wish they developed more this plugin, bcse I find the timeline function extremely useful for visualizing long term goals

5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.