CSS Styling for Highlighting Alternate Rows

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? :+1:

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

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 :wink:

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 :slight_smile: 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:

1 Like