Suggestions for Timeline widget

[Master_Web]

Hey @Max,

So just started to tinker with this new widget. I think the devs did a great initial job. The 6 layouts are very creative and can suit various use cases.

So far what I think could enhance the widget are:

1. Descending chronological order wen using “Event Numbers” “Marker Style”. This would allow listing the most recent timeline event first, which would be the highest “Event Number”.
2. Date range option for each event. This feature would allow the inclusion of “key event” duration.
3. Auto scroll for “Carousel” layout. Self explanatory.

I’ll contintue to tinker and share my thoughts, and wishes.

With thanks,
mw

[Max]

Hi there, @Master_Web

Happy to hear that you love the new app - thank you so much for the feedback!

1. You can manually change the order of the events using “drag and drop option”:

Or do you want to display this event first, but with the number 5?

2. The Custom option of the Label setting will help you set the date range:

3. This is a great idea and I’ve moved it to the Wishlist on your behalf - Autoscroll for Carousel

[user21789]

Hi Max I just saw this timeline widget, is it possible to use it as a calendar event so the numbers are hours and the boxes are events?

[Max]

Hi @user21789

You can add the time to the Marker Title:

If you’d like to display the time inside the marker, you can use this code in the Custom CSS field on the Settings tab of your widget’s settings:

.es-marker-container .es-marker-point {
  width: fit-content !important;
  font-size: 0 !important;
  flex-grow: 1;
  flex-shrink: 0;
  border-radius:0;
}

.es-marker-container:nth-child(1) .es-marker-point:after {
  content: '5p.m';
  padding: 0 5px;
  font-size: 14px;
  color: #fff;
  display: block;
}

.es-marker-container:nth-child(2) .es-marker-point:after {
  content: '6 p.m';
  padding: 0 5px;
  font-size: 14px;
  color: #fff;
  display: block;
}

In the brackets you should set the number of the needed marker and in the content line you’ll need to set the time:

[Master_Web]

Thank you for the clarifications @Max, even more of an impressive widget.

I did recognize that I could rearrange the order of the timeline “events” manually. My “Descending chronological order” suggestion is exactly like your example of displaying the number 5 for the first event, with the last “event” becoming the number 1.

Thank for the CSS codes, these will be useful as well. I’ll keep tinkering and provide any further feedback.

Thank you again,
mw

[Max]

Yep, it’s possible to change the order using this CSS code:

.es-marker-container .es-marker-point {
  font-size: 0 !important;
}

.es-marker-container .es-marker-point:after {
  font-size: 14px;
  color: #fff;
}

.es-marker-container:nth-child(1) .es-marker-point:after {
  content: '6';
}

.es-marker-container:nth-child(2) .es-marker-point:after {
  content: '5';
}

.es-marker-container:nth-child(3) .es-marker-point:after {
  content: '4';
}

.es-marker-container:nth-child(4) .es-marker-point:after {
  content: '3';
}

.es-marker-container:nth-child(5) .es-marker-point:after {
  content: '2';
}

.es-marker-container:nth-child(6) .es-marker-point:after {
  content: '1';
}

Try it out and let me know if you like the result

[Master_Web]

Thank you @Max.

Is there a way to change the size of the font in the various sections?

[Max]

Sure, here is the solution - Change font size of all widget elements

[Master_Web]

Thank you @Max. I’m back now tinkering again, after taking a long needed break from academic studies. I hope you and Elfsight team are making full use of your holiday time off

[Max]

Happy to see you back again, @Master_Web

If any questions come up or assistance is needed, I’ll be delighted to help