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!
1 Like
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?
Bastien - Asana Certified Pro
Delegate tasks to a virtual assistant
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
I was on holidays. I’ll share a CSS soon
Hope you had a nice holiday.
Much appreciated!
1 Like
Hi @Bastien_Siebman, was wondering if you had any additional CSS to share with me to setup alternating row color?
Sorry I completely forgot about you
.dropTargetRow:nth-child(odd) {
background: #eee;
}
@Bastien_Siebman no worries, appreciate the response.
One more quick question. After implementing the CSS you recommended, it appears to also impact items in the left hand menu (see image below)
I tried to reference the div class to limit the alternate row styling to just the main task section, but can’t get it to work.
Oups I’ll give you a new one
@Bastien_Siebman think I got it!
.TaskList .dropTargetRow:nth-child(odd) {
background: #eee;
}
I was forgetting to put a space between .TaskList and .dropTargetRow
Great! No space and it means you are looking for both classes on the same element
1 Like