Elfsight Timeline Tips and Tricks

Ask the Community Customization
1
  • I like how the Elfsight Timeline is designed. But the information on my timeline is pretty brief. Is there a way to make the images bigger?
  • Is there a way to make the container card the same vertical height as the timeline events? It sometimes lines up with the top and sometimes lines up with the bottom. I would love it if it were vertically justified.
  • Could this layout have up and down arrows like the horizontal version?
  • Any tips to customize colors and fonts?

GCG_Timeline_Draft
GCG_Timeline_Draft1920Ă—1032 179 KB

2 Likes
3

Hi there, @Michael_Armado :waving_hand:

  1. If you’d like to increase the image width, please use this code in the Custom CSS field on the Settings tab of your widget’s settings:
.es-event-card-content-image {
  max-width: unset !important;
  width: 800px;
}
  1. This CSS code will do the trick:
.es-animated-event-card-container {
  top: 0 !important;
  height: 100% !important;
}

.es-event-card-container {
  height: 100% !important;
  min-height: unset !important;
}

.es-swap-scroll-container {
  height: auto !important;
}

  1. The Horizontal Carousel layout includes navigation arrows, since multiple event cards are displayed right away and some of them don’t show up in theviewport. The layout you’re using displays only 1 card at a time and all widget details show up in the viewport. Could you please describe why you’d need the arrows for the Snap Scroll Right layout?

  2. Could you please specify the elements you’d like to customize? I’ll be happy to provide you with the CSS codes :slightly_smiling_face:

4

Got it! I thought arrows would make it more intuitive for users.

5

GCG_Timeline_Draft2
GCG_Timeline_Draft21920Ă—1140 217 KB

Regarding fonts and colors, I wanted to change the widget-title “Guzman Construction Group Timeline” to the Industry font, which is the headline font. Everything seems to be pulling from the paragraph style fonts. I also want it to be in red.

I was able to change the color of the event-card-content-title by adding the code color: #c1382b;. I tried applying it the same way to the widget title, but it didn’t change.

Is there any way to bold certain text in the event-card-content-text?

Also, the theme I chose has a white background. Is there a way to make it transparent? So, if I choose to do an image background, would it show through?

Thank you for your help.

2 Likes
6

Hi there, @Michael_Armado :waving_hand:

Thank you so much for clarification!

  1. Got your idea regarding the navigation arrows. Unfortunately, there is no way to implement it now, but I’ve added this idea to the Wishlist on your behalf - Add vertical navigation arrows for more intuitive experience (Snap Scroll Right layout)

  2. I see you’ve added a code for changing the title size and color:

image

It works for the font size, but the color isn’t changing. To make it work, you should add !important after the color code. To change the font family, please add the following line - font-family: Industry!important; . Here it the how the whole code will look:

 .es-widget-title {
   font-size: 25px;
   font-family: Industry!important;  
   color: #c1382b!important;
 }

  1. Could you please specify the words/phrases you’d like to make bold? I’ll be happy to check if there is a custom solution :slightly_smiling_face:

  2. To make the background transparent, please use this code - Make widget background transparent


Please try these solutions and let me know if they helped :wink: