Select to view content in your preferred language

Changing Color Properties of Dijit Dialog?

6754
15
Jump to solution
05-15-2015 06:05 AM
IanPeebles
Frequent 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
1 Solution

Accepted Solutions
SteveCole
Honored 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).

View solution in original post

15 Replies
RickeyFight
MVP Regular Contributor

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

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.

SplashWindowSample2.jpg

0 Kudos
TimWitt2
MVP Alum

Ian,

this changes the background of your title:

.claro .dijitDialogTitleBar {

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

    }

Tim

RickeyFight
MVP Regular Contributor

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

0 Kudos
IanPeebles
Frequent Contributor

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?

SplashWindowSample3.jpg

0 Kudos
RickeyFight
MVP Regular Contributor

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

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

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.

SplashWindowSample4.jpg

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

IanPeebles
Frequent Contributor

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.

0 Kudos