Hiding the Tasks calendar

[Michiel Helvensteijn]

Hi all!

I've been meaning to hide the Tasks calendar from the left navi for a while now. (Google Tasks is too simplistic for me, and I use something else.)

I've been able to do it with this CSS rule:

#lhscalinner_my div:nth-child(5) {

    display: none;

}

It works as intended, but note that this hides the *5th* calendar in the first calendar list. It only works because Tasks happens to be the 5th in the list for me. So it's an unstable rule, that might break when I create additional calendars.

Does anyone know a way to select the div that I want to hide by the text "Tasks" that is (nested deeply) inside it?

Cheers!

[Mike Ramia]

Here's a way (removes the contents as opposed to the row, though) :

#calendars_my [title="Tasks"], #calendars_my [title="Tasks"] + div { display: none; } #calendars_my .calListRow { height: auto; max-height: 19px; }

If you want to remove the actual row though I'd use this selector: #calendars_my .calListRow[aria-selected="false"]:last-child {

display: none;

}

[Michiel Helvensteijn]

Yes, I'd like to make the entire Tasks row invisible.

But aria-selected="false" doesn't mean Tasks. It means that that calendar is not selected / visible. Your rule works (if I remove :last-child), but if I ever deselect a calendar, it disappears completely so I can't turn it back on again. :-)

[Mike Ramia]

The first one is exactly what you want then.

As for aria-selected="false", I know what it means it's just there to hide the last element only if it was an element that you had chosen not to display anyway (as opposed to your css which would have hidden it no matter what). The ":last-child" pseudo-selector is an alternative to defining it as the nth since it's more likely to be the last on someone's list than the 5th ("t" is late in the alphabet).

[Michiel Helvensteijn]

Ah, cool! I misunderstood the first one, but now I see what it's doing. I just removed the max-height line. (I assume that's a different tweak you accidentally copied along? It's not necessary and it doesn't look good.)

And about :last-child, I have a calendar called Work. ;-)

Anyway, your first suggestion works great. Thanks!

[Mike Ramia]

Ah, the max-height line was because of a 1px height difference that occurs once the height is set to auto. 

If you don't mind it that's fine but if you're anal about things (sadly I am) the 1px difference can be overcome by
- the max-height line (apparently not a good way to do it)

or

- margin-bottom: -1px;

or

- border-bottom: none;

Cheers!

[Michiel Helvensteijn]

Maybe not anal. But that doesn't mean I won't fix this when a solution presents itself. ;-)

I went with the margin-bottom line. The problem with the max-height one is probably that I'm using the 'new look', which has a greater height for these things. So the margin-bottom solution is more robust.

Cheers!