# Timeline **URL:** https://community.elfsight.com/c/css-codes/timeline/232.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Change order of Learn More and Action buttons (Carousel layout)](https://community.elfsight.com/t/change-order-of-learn-more-and-action-buttons-carousel-layout/163380)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 9, 2026, 1:49pm UTC](https://community.elfsight.com/t/change-order-of-learn-more-and-action-buttons-carousel-layout/163380 "2026-06-09T13:49:47Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-event-card-buttons-wrapper { flex-flow: column-reverse; justify-content: start; } --- ## [Change order of Learn More and Action buttons (List layout)](https://community.elfsight.com/t/change-order-of-learn-more-and-action-buttons-list-layout/149351)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [June 9, 2026, 1:49pm UTC](https://community.elfsight.com/t/change-order-of-learn-more-and-action-buttons-list-layout/149351 "2026-06-09T13:49:14Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-event-card-buttons-wrapper { flex-flow: row-reverse; justify-content: start; } --- ## [Display Action button from the event card (display in popup only)](https://community.elfsight.com/t/display-action-button-from-the-event-card-display-in-popup-only/149352)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [March 16, 2026, 9:12am UTC](https://community.elfsight.com/t/display-action-button-from-the-event-card-display-in-popup-only/149352 "2026-03-16T09:12:06Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-widget-container .es-event-card-buttons-wrapper:has(button:nth-child(2)) button:first-child { display: none; } --- ## [Make image unclickable when using Action buttons](https://community.elfsight.com/t/make-image-unclickable-when-using-action-buttons/145478)
**Author:** [@chusemann](https://community.elfsight.com/u/chusemann)\ **Replies:** 5\ **Last updated:** [February 18, 2026, 6:51pm UTC](https://community.elfsight.com/t/make-image-unclickable-when-using-action-buttons/145478 "2026-02-18T18:51:33Z")
.es-event-card-content-image { pointer-events: none !important; cursor: default; } --- ## [Change color of marker point and track progress bar](https://community.elfsight.com/t/change-color-of-marker-point-and-track-progress-bar/143507)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 28, 2026, 11:13am UTC](https://community.elfsight.com/t/change-color-of-marker-point-and-track-progress-bar/143507 "2026-01-28T11:13:13Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-marker-point { background-color: red; } .es-track-progress-bar { background-color: red; } --- ## [Change background and border color of the popup button](https://community.elfsight.com/t/change-background-and-border-color-of-the-popup-button/140086)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [January 26, 2026, 11:13am UTC](https://community.elfsight.com/t/change-background-and-border-color-of-the-popup-button/140086 "2026-01-26T11:13:47Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: \[class\*="Popup\_\_PopupInner-sc"\] .es-action-button { background-color: red !important; border: 2px solid green !important… --- ## [Change font size of the widget title](https://community.elfsight.com/t/change-font-size-of-the-widget-title/143382)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 23, 2026, 4:06pm UTC](https://community.elfsight.com/t/change-font-size-of-the-widget-title/143382 "2026-01-23T16:06:49Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-widget-title { font-size: 28px; } --- ## [Change widget's background color](https://community.elfsight.com/t/change-widgets-background-color/143381)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 23, 2026, 4:06pm UTC](https://community.elfsight.com/t/change-widgets-background-color/143381 "2026-01-23T16:06:01Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-background-overlay, .es-background-base { background-color: #062336 !important; } --- ## [Change border radius of the event cards](https://community.elfsight.com/t/change-border-radius-of-the-event-cards/143380)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 23, 2026, 4:04pm UTC](https://community.elfsight.com/t/change-border-radius-of-the-event-cards/143380 "2026-01-23T16:04:13Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-event-card-container { border-radius: 20px; } --- ## [Display each events full size on mobile (List Right)](https://community.elfsight.com/t/display-each-events-full-size-on-mobile-list-right/143379)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [January 23, 2026, 4:03pm UTC](https://community.elfsight.com/t/display-each-events-full-size-on-mobile-list-right/143379 "2026-01-23T16:03:16Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: @media (max-width: 500px) { \[class\*='carousel\_\_Column-sc'\] { max-height: calc(100vh - 130px); } .es-widget-contain… --- ## [Change size of the markers](https://community.elfsight.com/t/change-size-of-the-markers/141216)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [November 7, 2025, 8:28am UTC](https://community.elfsight.com/t/change-size-of-the-markers/141216 "2025-11-07T08:28:47Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-marker-container { scale: 1.2; } --- ## [Change title font, font weight and color](https://community.elfsight.com/t/change-title-font-font-weight-and-color/128218)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [October 9, 2025, 5:57pm UTC](https://community.elfsight.com/t/change-title-font-font-weight-and-color/128218 "2025-10-09T17:57:30Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-widget-title { font-family: Times New roman; font-weight: 400; color:red!important; } --- ## [Change image ratio](https://community.elfsight.com/t/change-image-ratio/110628)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 1, 2025, 1:21pm UTC](https://community.elfsight.com/t/change-image-ratio/110628 "2025-04-01T13:21:10Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-event-card-content-image { aspect-ratio: 2/1 !important; } You can set any ration in the 2nd line of the code … --- ## [Change background and border color of action button](https://community.elfsight.com/t/change-background-and-border-color-of-action-button/140169)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 1, 2025, 10:22am UTC](https://community.elfsight.com/t/change-background-and-border-color-of-action-button/140169 "2025-10-01T10:22:39Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-action-button { background-color: red !important; border: 2px solid green !important; } --- ## [Make image fit container (fix image cropping issue)](https://community.elfsight.com/t/make-image-fit-container-fix-image-cropping-issue/139721)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 16, 2025, 6:45pm UTC](https://community.elfsight.com/t/make-image-fit-container-fix-image-cropping-issue/139721 "2025-09-16T18:45:39Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: \[class\*="MediaImage\_\_Container-sc"\] img { object-fit: contain; } --- ## [Make the button opening popup rectangle with rounded corners](https://community.elfsight.com/t/make-the-button-opening-popup-rectangle-with-rounded-corners/139720)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 16, 2025, 6:40pm UTC](https://community.elfsight.com/t/make-the-button-opening-popup-rectangle-with-rounded-corners/139720 "2025-09-16T18:40:07Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-event-card-buttons-wrapper \[class\*='ButtonBase\_\_ButtonContainer-sc-'\] { border-radius: 8px!important; } --- ## [Make widget background transparent](https://community.elfsight.com/t/make-widget-background-transparent/115689)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 4\ **Last updated:** [August 14, 2025, 1:50pm UTC](https://community.elfsight.com/t/make-widget-background-transparent/115689 "2025-08-14T13:50:16Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: \[class\*='Background\_\_Base-sc'\] { background: transparent !important; } --- ## [Swap events cards and timeline (Carousel layout)](https://community.elfsight.com/t/swap-events-cards-and-timeline-carousel-layout/127007)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 19, 2025, 2:10pm UTC](https://community.elfsight.com/t/swap-events-cards-and-timeline-carousel-layout/127007 "2025-06-19T14:10:55Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-snap-carousel-item { flex-direction: column-reverse; } .es-snap-carousel-item \[class\*="carousel\_\_Column-sc"… --- ## [Change border radius of Action button](https://community.elfsight.com/t/change-border-radius-of-action-button/116890)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [April 30, 2025, 7:51am UTC](https://community.elfsight.com/t/change-border-radius-of-action-button/116890 "2025-04-30T07:51:37Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-action-button { border-radius: 0px!important; } --- ## [Change size of Action button (height and width)](https://community.elfsight.com/t/change-size-of-action-button-height-and-width/116891)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 28, 2025, 3:26pm UTC](https://community.elfsight.com/t/change-size-of-action-button-height-and-width/116891 "2025-04-28T15:26:39Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-action-button { height: 100px!important; width: 350px; } --- ## [Change font size of all widget elements](https://community.elfsight.com/t/change-font-size-of-all-widget-elements/110629)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 1, 2025, 1:22pm UTC](https://community.elfsight.com/t/change-font-size-of-all-widget-elements/110629 "2025-04-01T13:22:14Z")
Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings: .es-widget-title { font-size: 20px; } .es-event-card-content-label { font-size: 11px; } .es-event-card-content-title…