CSS Styling for Highlighting Alternate Rows


#1

I am using the Stylus extension in Chrome (link) to adjust the CSS within Asana so I can achieve what I think is a slightly better / more functional layout of the task list.

I was wondering if anyone had any tips on how to potentially style for alternating row colors in the task list so that tasks alternate between two colors in even / odd rows. I know with a traditional table I could reference rows with something like:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Appreciate any insight anyone has, thanks in advance!


#2

You can use the same logic with the current HTML structure. The list is stored inside a div with class TaskList and then each row has the class dropTargetRow. Is it enough or do you need the actual code? :+1:

Bastien - Asana Certified Pro
Delegate tasks to a virtual assistant :computer:


#3

Hi @Bastien_Siebman thanks for the reply.

I found the ‘dropTargetRow’ class, but I can’t quite figure out how to incorporate the even/odd alternating row color within this class.

I must admit that my CSS coding skills are somewhat limited, so I appreciate any further insight or assistance you might be able to provide.

Thanks in advance!

-Ben


#4

I was on holidays. I’ll share a CSS soon :wink:


#5

Hope you had a nice holiday.

Much appreciated!