CODEWITHSUNDEEP
cssdialogdojo
SJ11
SJ11

Reputation: 101

Change the theme or style of a dijit

JSP1: has Dojo widget.Style theme "claro" is used on body tag.

JSP2: has a dojo widget - Dialog box. The style definitions are applied directly to the widget. (Functionally this jsp is a footer).

<div dojoType="dijit.Dialog" id="privacyDialog" style="background-color:#FFFFDF; border-style:solid; border-width:1px; border-color:#000; height:203px; width:350px; z-index:9999; display:none;">

JSP1 includes the JSP2

Issue: At run time, styles defined on Dialog box in JSP2 are getting overriden and the dialog box appears with the styles which are defined in claro.css (title bar with blue colour, close icon, etc).

Required: Dialog box should display as it was defined in the widget in JSP2.

I have tried overriding theme after reading http://dojotoolkit.org/reference-guide/dijit/themes.html#id24 but it still is partially displaying the theme(close icon, title bar) specified in claro.css

In my case: specified the class as "form1" and the code added in claro.css is enter image description here

Upvotes: 1

Views: 5233

Answers (1)

mtyson
mtyson

Reputation: 8550

Your strategy is correct: create a style that is a more specific CSS selector, so it will override the default.

It must be that your selector (.form1 .dijitDialog) is not being applied to the element. Look at the element in Firebug inspector - is your style being found but overridden (in firebug style inspector, does it have strike-through)? There may be some style in claro that is more specific.

Or, is your style not being applied to the element at all?

Also, I would urge you not to put your styles into the claro.css file, but in your own .css file. This will make upgrading dojo less nightmarish.

Update I see that:

At run time, styles defined on Dialog box in JSP2 are getting overriden and the dialog box appears with the styles which are defined in claro.css (title bar with blue colour, close icon, etc).

So that means your styles are found and being applied. The dojo theme style is just more specific. What is the selector that overrides yours?

Without seeing that, I might recommend adding a class to your body tag, something like <body class='claro myCompany'... and then add that to your selector:

.myCompany .form1 .dijitDialog

Upvotes: 2

Related Questions