Elfsight Timeline Tips and Tricks

[Michael_Armado]

• 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?

[Max]

Hi there, @Michael_Armado

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;
}

2. 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;
}

3. 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?

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

[Michael_Armado]

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

[Michael_Armado]

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.

[Max]

Hi there, @Michael_Armado

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:

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;
 }

3. 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

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

Please try these solutions and let me know if they helped

[Michael_Armado]

Thanks, Max! These tips worked.

The words or phrases that I like to bold in the timeline are the following:

Event Title August 2022, I want to bold Blackrock Concrete.

Event Title August 2024, I want to bold Top Latin-Owned and BIPOC-Owned Business.

Thank you,

Michael

[Max]

Thanks! I’ve passed you request on to the dev team and will update you once it’s done

[Max]

Hi there, @Michael_Armado

Thank you for waiting!

We’ve added this script to the Custom JS field on the Settings tab of your widget’s settings:

(async () => {
  const highlightConfig = {
    'August 2022': ['Blackrock Concrete'],
    'August 2024': ['Top Latin-Owned', 'BIPOC-Owned Business'],
  };

  const waitForElement = (selector, root = document) => {
    return new Promise((resolve) => {
      const existingElement = root.querySelector(selector);
      if (existingElement) {
        return resolve(existingElement);
      }

      const observer = new MutationObserver((_, obs) => {
        const element = root.querySelector(selector);
        if (element) {
          resolve(element);
          obs.disconnect();
        }
      });

      observer.observe(root, {
        childList: true,
        subtree: true,
      });
    });
  };

  const escapeRegExp = (string) => {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  };

  waitForElement('.es-snap-scroll-container').then((container) => {
    const cards = container.querySelectorAll('.es-event-card-content-wrapper');

    cards.forEach((card) => {
      const titleEl = card.querySelector('.es-event-card-content-title');
      const textEl = card.querySelector('.es-event-card-content-text');

      if (!titleEl || !textEl) return;

      const title = titleEl.textContent.trim();
      const phrasesToHighlight = highlightConfig[title];

      if (!phrasesToHighlight?.length) return;

      let text = textEl.innerHTML.trim();

      phrasesToHighlight.forEach((phrase) => {
        const escapedPhrase = escapeRegExp(phrase);
        const regex = new RegExp(escapedPhrase, 'g');

        text = text.replace(regex, `<strong>${phrase}</strong>`);
      });

      textEl.innerHTML = text;
    });
  });
})();

[!note]
Custom JS doesn’t operate in the preview mode. Thus, you’ll see all changes when checking the widget right on the website or through the Share Link.

Please check it out and let me know if you like the result

P.S. If you’d like to highlight more phrases, you can add them here:

[Michael_Armado]

Thanks, Max! This is wonderful! I see that the code is in the Custom JS. Unfortunately the words and phrases are not bolded. Let me know.

[Max]

Hi there, @Michael_Armado

The thing is that the Custom JS codes don’t work in the widget editor, but you can see the changed on the page, where the widget is installed or via Share Link.

I’ve just checked your widget via Share Link and the script is working fine:

Could you please double-check it?