Button order adjustments

Ask the Community Customization
1

Love this widget. I have it set up and use the Learn More to expand the topic, as intended. However if I use enable the Use Action Button option - it puts the new button before the Learn More button. For me it would work better to have the Learn More first, then optional additional button to the right. Either by default, or be able to configure the order.. Also it shows up in the expanded text as well after pressing Learn more.. depending on the context, this is better and I would like to enable but HIDE the Action button on the first screen and just have it in the second screen. But it’s a great tool for cleaning up an otherwise unruly page!

3 Likes
2

Hi @Mike_S welcome to the community :clap:

this Workaround will help.

Add this code to the Custom CSS field on the Settings tab of your Timeline widget’s settings:

Depending on the layout you’re using column-reverse or row-reverse.

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

.es-event-card-buttons-wrapper{
  flex-direction: column-reverse; !important; 
}

image
image178×182 3.09 KB

.es-event-card-buttons-wrapper{
  flex-direction: row-reverse; !important; 
}

image
image1153×149 4.12 KB

3 Likes
4

Hi there, @Mike_S and welcome to the Community :waving_hand:

Sina’s code works great. Just in case you’d like to keep the buttons ins the same line, here is a slightly adjusted version:

.es-event-card-buttons-wrapper {
  flex-flow: row-reverse;
  justify-content: start;
}

And if you’d like to display the action button in the popup only, please use this CSS code:

.es-widget-container .es-event-card-buttons-wrapper:has(button:nth-child(2)) button:first-child {
  display: none;
}

Please try it out and let me know if it worked :wink:

1 Like
5

Hi Sina and Max.. Thank you, I love it.. works exactly as I imagined. I used MAx’s version which kept it left justified for me. thank you so much. If you want to see it in action: 1968 Firebird Restoration – Engine, Interior & Audio Work - 68firebird.ca

2 Likes
6

Perfect, you’very welcome!

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 3-month extension for your subscription - March Contest: Create a Dating Profile for Elfsight Widget and Win 3 Months FREE! :wrapped_gift:

Check the details and join in :wink: