topic Re: Changing Color Properties of Dijit Dialog? in ArcGIS JavaScript Maps SDK Questions

Changing Color Properties of Dijit Dialog?

IanPeebles — Fri, 15 May 2015 13:05:40 GMT

Good morning. I have added a splash window to my application as shown below.

I am looking to change the colors of the title banner, main text space, bottom banner, button color, and dialog border (see red arrows). I am using the DIV ID's and trying to specify the properties in .css, but I am not getting what I need.

Here is a sample of my HTML code:

<tr>

<td>

This is where the main test goes.

<br>

</div>

</td>

</tr>

</table>

<div dojotype="dijit.form.Button" id="buttonClose" data-dojo-type="dijit/form/Button" type="button" style="align-content: center" onclick="dialogWelcome.onCancel();">Yes, I Accept</div>

<div dojotype="dijit.form.Button" id="buttonExit" data-dojo-type="dijit/form/Button" type="button" style="align-content: center">No, Return to Home</div>

</div>

I have looked at the dijit guide online for assistance, but have not found what I am looking for. For those who have customized some splash screen windows, can you provide some guidance? Thank you.

Re: Changing Color Properties of Dijit Dialog?

RickeyFight — Fri, 15 May 2015 13:12:18 GMT

Ian,

If you want all of those changed I would change the theme.

Themes and Theming — The Dojo Toolkit - Reference Guide

If this is not what you want you can go in and change the individual elements using the developer toolbar to find the proper css.

Re: Changing Color Properties of Dijit Dialog?

IanPeebles — Fri, 15 May 2015 14:49:18 GMT

Thanks for the link.

By luck, I found these properties. I cannot seem to find a list of properties to change colors for all elements of the dialog window. Here is what I have figured out so far:

.claro .dijitDialogUnderlay {

background: #000;

}

.claro .dijitDialogPaneContentArea {

background: #f2eee8;

}

Here is the result. Notice how I still have the blue colors in the dialog window, yet I can put a transparent background underneath the dialog window and change the main content area to a tan color.

Re: Changing Color Properties of Dijit Dialog?

TimWitt2 — Fri, 15 May 2015 14:52:11 GMT

Ian,

this changes the background of your title:

.claro .dijitDialogTitleBar {

background-color:rgba(56,56,56,.5);

}

Tim

Re: Changing Color Properties of Dijit Dialog?

RickeyFight — Fri, 15 May 2015 14:54:07 GMT

Ian If you post a link to your site we could help you more.

Re: Changing Color Properties of Dijit Dialog?

IanPeebles — Fri, 15 May 2015 15:02:18 GMT

Tim and Rickey, you guys have been a huge help so far. Good stuff so far. Unfortunately, I cannot host this site on the DMZ at this time. I am working on the site on localhost.

Here is now how it looks with your suggestions. Just down to a few properties. Does the documentation not cover these properties?

Re: Changing Color Properties of Dijit Dialog?

RickeyFight — Fri, 15 May 2015 15:08:39 GMT

So in chrome Developer Tools you can use the magnify glass to select the elements you have left.

Then click on add new Style rule. From there you can change the color

Re: Changing Color Properties of Dijit Dialog?

SteveCole — Sat, 11 Dec 2021 18:09:33 GMT

The way the dojo CSS files are structured, you'll find the various CSS styles for a given type of dojo object all grouped together. If you use the Chrome developer tools, use the Search box for ".dijiDialog".

I think the relevant CSS from claro.css that you're looking for is:

.claro .dijitDialogTitleBar {
    border: 1px solid #ffffff;
    border-top: none;
    background-color: #abd6ff;
    background-image: url("images/standardGradient.png");
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
    background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
    _background-image: none;
    padding: 5px 7px 4px 7px;
}

The gradient you see may or may not be the result of an image as specified in the background-image CSS property. I haven't poked around with it to tell. I should note that the same thing is probably happening with the buttons you want to modify as well.

Re: Changing Color Properties of Dijit Dialog?

IanPeebles — Fri, 15 May 2015 16:04:35 GMT

Steve,

Thanks. Still struggling with the color gradient and border, but I am close. I guess your sample, allows for removing the gradient? If so, I will try it out.

Rickey, the element selector and Chrome is making things much easier

Re: Changing Color Properties of Dijit Dialog?

IanPeebles — Fri, 15 May 2015 16:35:10 GMT

Is there an easy way to remove the color gradient? I am still looking for that property. I am all set if I can figure that out. Thanks.

Re: Changing Color Properties of Dijit Dialog?

RickeyFight — Fri, 15 May 2015 16:38:12 GMT

What does your css look for that element?

Re: Changing Color Properties of Dijit Dialog?

IanPeebles — Fri, 15 May 2015 16:42:51 GMT

It looks like this. Properties are specified on index line number 177.

Re: Changing Color Properties of Dijit Dialog?

SteveCole — Fri, 15 May 2015 16:44:01 GMT

I would think that

should do it. That should eliminate the CSS gradients that are there by default (or not display the gradient PNG image).

Re: Changing Color Properties of Dijit Dialog?

KellyHutchins — Fri, 15 May 2015 16:46:06 GMT

I really like the work the developer of this dojo theme (Flat Dojo) has done. Its a nice modern looking theme for many dojo (and Esri) widgets. It has a pretty bare-bones looking dialog that I think would be fairly straightforward to customize to suit your needs.

Flat Dojo Theme

Re: Changing Color Properties of Dijit Dialog?

IanPeebles — Fri, 15 May 2015 16:46:27 GMT

Steve,

That did the trick:

I have a solid blue title bar. Going to change the text to white. Thank you much!

Re: Changing Color Properties of Dijit Dialog?

IanPeebles — Fri, 15 May 2015 18:16:25 GMT

Thank you for all of the assistance. I was able to solve the issue with all of your input. Lots of great feedback. The splash window looks pretty nice (see below). It matches the application.