Search code examples
cssgoogle-calendar-apistylish

How do I use Stylish to change the font in Google Tasks?

So, I pulled Arial over onto Linux from my former Windows distribution, but I then had to fight with the 12px Arial issue. I fixed that as suggested by resizing it to 13px, but I decided that I actually much preferred Google Calendar in Liberation Sans as I'd had it before. I've used Stylish to fix that for the main part of the calendar, but I can't get the Google Tasks section to use Liberation Sans because it uses much more complex/strange CSS selectors. Firebug says the font-family of the Tasks section is defined by div#:x.tl.U, with HTML 

<div id=":x.fc" class="bb" style="height: 165px;">
<div id=":x.tl" class="U Rb">
<table class="v" cellspacing="0" cellpadding="0" style="width:100%">
(lots more nested tds/divs here)
</table></div></div>

but using 

div#:x.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}

or even

div#\3a x\.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}

doesn't produce any results. For the main (month / 2 weeks view) section,

div.st-c-pos {font-family: "Liberation Sans", Arial, sans-serif !important; }

works fine (altering exactly the element Google uses to define the font-family). How do I work with these selectors? I do know some CSS but that kind of complexity is beyond me. (Also if someone could explain what the different "., :" etc. parts mean...?)

Edit: It's not just the Tasks section, the week view also displays a mixture of Arial and Liberation Sans. I've defined the font-family for the body element as well, but that doesn't really seem to inherit... Any better ideas than just hunting down every single declaration of Arial in the page and replacing it manually?

Solution

  • Adding that HTML does help, though as you say, that ID name is pretty weird. However, your first shot at div#:x.tl.U looks right to me, as it chains the ID and class. So it's most likely that the inner elements also have a font-family declaration of Arial that is overriding your rule.

    I suppose, as a test, you could try something like this, though it's a bit of a sledgehammer option that may not suit anyway:

    body * {font-family: "Liberation Sans", Arial, sans-serif !important;}

    Otherwise, have a look at the inner elements and see if any of them have explicit font declarations.