Event Styling

Project Purpose

This project's client relied on a third-party events integration tool, 25Live, to manage and display event data. The client wanted the embedded calendar component (“Event Slider Spud”) to match specific wireframes, including centered text, consistently placed navigation arrows, and customized styling. However, 25Live's widget offered limited styling options and no native support for the requested layout. Rather than tell the client their request couldn't be fulfilled, I obtained approval to investigate a workaround. After analyzing the integration's structure, I discovered the widget was rendered inside an iframe, which restricted our ability to style or manipulate its content directly. I developed a custom Drupal module that used JavaScript to monitor the iframe's DOM state. Using a combination of a MutationObserver, a Promise, and a setTimeout, I delayed the injection of custom styles until the iframe had fully rendered. This allowed us to apply the necessary styling reliably—even during user interactions like scrolling or clicking. Initially, the styles could be injected without the observer, but user interaction would cause them to disappear until the page reloaded. Implementing the observer resolved this, ensuring a seamless and persistent experience for end users. To ensure long-term maintainability, I wrote detailed documentation for the client. It covered how to create and manage event calendars in 25Live, how to connect them to the Drupal site, and how to update the slider configuration and code as needed. This solution allowed us to fully meet the design specifications within a limited framework, while providing a sustainable approach for the client post-launch.

Tech Stack & Approach

This was my first foray into Site Studio, which allows for visual page building but can limit direct code access. Balancing drag-and-drop restrictions with developer-level customization required careful analysis and creative engineering.

Challenges & Lessons Learned