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!


#6

Hi @Bastien_Siebman, was wondering if you had any additional CSS to share with me to setup alternating row color?


#7

Sorry I completely forgot about you

.dropTargetRow:nth-child(odd) {
    background: #eee;
}

#8

@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.


#9

Oups :slight_smile: I’ll give you a new one


#10

@Bastien_Siebman think I got it!

.TaskList .dropTargetRow:nth-child(odd) {
background: #eee;
}

I was forgetting to put a space between .TaskList and .dropTargetRow


#11

Great! No space and it means you are looking for both classes on the same element :+1: