Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#11616 closed defect (fixed)

Claro overrides basic css like html, body, h1 etc...

Reported by: sourcerh Owned by: bill
Priority: high Milestone: 1.6
Component: themes Version: 1.5
Keywords: claro, css Cc:
Blocked By: Blocking:


After upgrading from dojo 1.4.3 with tundra to dojo 1.5 with claro, all my fonts have get smaller

It seems that claro.css is overriding basic css (you can check that by looking the file: from line 1655 to 1714)

For what I can remember, I've never seen such behavior in previous dojo themes.

A dojo theme (like claro) should only skins dojo widgets, and not the global website that contains dojo widgets (the website could also contain other widgets done with another framework afterwards...)

A workaround would be to add a batch of !important in my css, which is completely crappy and unmaintainable (think about if claro decides to override other common css, like strong, em, etc...)

Change History (9)

comment:1 Changed 11 years ago by bill

Yes, claro does this by design, to make the page and the widgets "match" each other. You can easily override that behavior by removing the following line from claro.css:

@import url("document.css");	/* rules on the document itself (rather than widgets), overriding dojo.css */

However I realize that's not possible if using the XD build from google.

As for the workaround you suggested, there's no reason to use !important in your rules, simply put your rules after the include of claro.css.

Note that the other themes are sort-of expecting the document CSS to be a certain way, but it's done through dojo.css, which apps explicitly include (or don't include) onto their page. For claro we didn't alter dojo.css so as to not affect the other themes... although we could put the claro rules in dojo.css with .claro prefixes, or alternately make apps explicitly include claro/document.css (unless they don't want to).

document.css is missing ".claro" in the patterns in that file, that should be fixed.

comment:2 Changed 11 years ago by bill

(In [22938]) Add missing .claro to selectors, and remove Dialog specific rule that should (if anywhere) be in Dialog.css, and should apply to the first element in a Dialog, rather than every H1. Refs #11616.

comment:3 Changed 11 years ago by bill

Milestone: tbd1.6
Owner: changed from nonken to bill
Status: newassigned

comment:4 Changed 11 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [22939]) Include claro after dojo.css, not before. Fixes #11616.

comment:5 Changed 11 years ago by bill

Resolution: fixed
Status: closedreopened

Oops, [22939] was to fix #11799.

comment:6 Changed 11 years ago by bill

Resolution: fixed
Status: reopenedclosed

(In [23315]) Remove @import of document.css from claro.css. Apps that want dojo's styling of page level elements (H1, H2, etc.) should manually import either dojo/resources/dojo.css or dijit/themes/claro/document.css.

I updated the test files to use claro/document.css, or if theme=tundra/nihilo/soria then to use dojo/resources/dojo.css.

Fixes #11616.

comment:7 Changed 11 years ago by bill

(In [23394]) Turns out document.css halfway-depends on dojo.css, specifically for the YUI reset code. Without it <body> gets an 8px padding that offsets full-viewport BorderContainers. Not sure whether to make document.css duplicate everything from dojo.css, or assume that dojo.css is loaded by the app, or import it. For now, @import dojo.css and only override rules where claro changes the values.

Refs #11616.

comment:8 Changed 11 years ago by bill

(In [24398]) IE6-8 doesn't allow modifying <script>'s innerHTML, it causes an exception, refs #11616

comment:9 Changed 11 years ago by bill

(In [24399]) IE6-8 doesn't allow modifying <script>'s innerHTML, it causes an exception, refs #11616

Note: See TracTickets for help on using tickets.