Changing Color Properties of Dijit Dialog?

[IanPeebles]

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:

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

[RickeyFight]

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. 

[IanPeebles]

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.

[TimWitt2]

Ian,

this changes the background of your title:

.claro .dijitDialogTitleBar {

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

    }

Tim

[RickeyFight]

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

[IanPeebles]

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?

[RickeyFight]

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

[SteveCole]

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.

[IanPeebles]

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

[IanPeebles]

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.