Help! Put Strikethrough on List items when Start date inside the list passed the current date.

[Poll David]

I have a List that is sorted by date input of the user, Is it possible to put a strikethrough on the entry when it is already done? maybe when "END DATE and TIME" already passed the current date

Ex.

Outing
Start - 1/24/2015 (12am)
End - 1/26/2015 (12am)

Since its already done, I want to put a STRIKETHROUGH on OUTING when it is listed on the LIST. Is this possible?

[Yurii Orishchuk]

Hi David,

Please follow these steps:

1. Open datasource that's populate this list.

2. Click "Success" mapping.

3. Click on "JS" on the link from "$" to list item.

4. Populate it with following JS code:

   pre

   var currentLi = element.closest("li");

   //You should replace true with your condition.
   var currentCondition = true;

   if(currentCondition)
   currentLi.addClass("liStrikethrough");

   /pre

   Details: http://prntscr.com/60f6pt/direct

   Note there is boolean constant that you should replace with your condition.

5. Create new CSS asset.

6. Populate it with following CSS code:

   pre

   .liStrikethrough a h3{
   text-decoration: line-through;
   }

   /pre

   Details: http://prntscr.com/60f7am/direct

   After you will get result like: http://prntscr.com/60f7h5/direct

   Regards.

[Poll David]

Hi Yurii! Thanks! it worked!

One follow-up question: Can I change the Swatch color of the List with the same condition instead of just strikethrough? Can the list button turn red if the condition is true?

[Alena Prykhodko]

Sure you can, use CSS rule in the same selector

[Poll David]

Can i have the CSS Code to change color of the whole button?

I am getting this if i put

.liStrikethrough a h3{
text-decoration: line-through;
background-color: red;
}

.liStrikethrough{
background-color: red;
}

[Alena Prykhodko]

You use not that selector.

[Poll David]

can you please help? i want to change the whole List Button color

[Alena Prykhodko]

Try

pre.liStrikethrough li a{
background-color: red!important;
}/pre

[Poll David]

It doesn't change the background.

[Alena Prykhodko]

Works for me. Then you need to open Inspect element option and search for appropriate selector.