2

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?

Stella
  • 121
  • 1
  • 2
  • 12
  • `div#:x.tl.U` is a pretty weird looking selector. Could you show the HTML that this is mean to apply to (that is, the div element with all the attributes attached to it)? – ralph.m Jun 01 '13 at 13:26
  • I put the HTML up in the question but I'm not sure it's that helpful... Peering into the CSS files, I think there's a class .x, a class td.tl (and only for td's), and a class .U ... how does that combine? It really doesn't help that most of Google's classes are named with seemingly random strings of characters. – Stella Jun 02 '13 at 09:18

1 Answers1

2

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.

ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • `body *` doesn't change the Tasks section, and I searched all the CSS files for mentions of "font-family" (to find all possible inner elements) and changed the appropriate elements in Stylish, and that doesn't work either. However it turns out the Tasks module is inside an iFrame with a whole new ` – Stella Jun 02 '13 at 14:05
  • Hehe, I was just about to ask if there was an iframe involved. That's a game changer, I'm afraid. You can't style anything inside an iframe. :-( – ralph.m Jun 02 '13 at 14:10
  • Oh well, thanks anyway! I looked this up, and there are a couple of other questions like http://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe with workarounds for iframes, I may investigate those if the different font bothers me enough :) – Stella Jun 03 '13 at 10:47
  • You can style iframes with ease in Firefox and Firefox Stylish. But iframes are an extreme PITA in Chrome. And, if the iframe has no `src`, Stylish cannot touch it. A Chrome userscript or extension *usually* can, but Google pages are extraordinarily *Evil* to script for. The difficulty factor doubles in Chrome. – Brock Adams Jun 06 '13 at 09:05