Select to view content in your preferred language

Changing Color Properties of Dijit Dialog?

6282
15
Jump to solution
05-15-2015 06:05 AM
IanPeebles
Regular Contributor

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

SplashWindow.jpg

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:

    <!-- Application Splash Screen -->

<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" id="dialogWelcomeTitle" title="City of Edmond, Oklahoma - Survey Monuments" style="width: 600px;">

        <table class="dijitDialogPaneContentArea">

            <tr>

                <td>

                    <div id="splashScreenDialogMessage">

                    This is where the main test goes.

                   <br>

                   </div>

                </td>

            </tr>

        </table>

        <div class="dijitDialogPaneActionBar">

      <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>

    </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.

0 Kudos
15 Replies
RickeyFight
MVP Regular Contributor

What does your css look for that element?

IanPeebles
Regular Contributor

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

DialogTitleProperties.jpg

0 Kudos
SteveCole
Frequent Contributor

I would think that

background-image: none;

or

background-image: none !important;

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

IanPeebles
Regular Contributor

Steve,

That did the trick:

background-image: none !important;

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

KellyHutchins
Esri Frequent Contributor

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

IanPeebles
Regular Contributor

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.

SplashWindowFinal.jpg