title: How to color a single Dojo button?
body: <p>Is there a way to affect a single Dojo button's color? I want to be able to override the default button color for specific buttons.  In the JSP markup I have a button defined like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="jelam-button-blue" data-dojo-type="dijit/form/Button" data-dojo-id="usdotSearchButton" id="usdotSearchButton" type="button" onClick="csfController.usdotSearch()"&gt;Search&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>where the "jelam-button-blue" is defined in our css file like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.jelam-button-blue {
      background-color: #5494c7 !important;
      background-image: none !important;
      border: 1px solid #a6cdec !important;
      border-radius: 0 !important;
      color: #ffffff !important;
      height: 38px;
  }
  .jelam-button-blue .dijitReset.dijitInline.dijitButtonText {
      font-size: 16px;
      font-weight: normal !important;
      position: relative;
      top: 2px;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This does not result in the button turning blue as I would like.  The markup that gets generated from the button markup is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span role="presentation" class="dijit dijitReset dijitInline dijitButton" widgetid="usdotSearchButton"&gt;
    &lt;span role="presentation" data-dojo-attach-event="ondijitclick:__onClick" class="dijitReset dijitInline dijitButtonNode"&gt;
      &lt;span aria-labelledby="usdotSearchButton_label" role="button" data-dojo-attach-point="titleNode,focusNode" class="dijitReset dijitStretch dijitButtonContents" tabindex="0" id="usdotSearchButton" style="-moz-user-select: none;"&gt;
        &lt;span data-dojo-attach-point="iconNode" class="dijitReset dijitInline dijitIcon dijitNoIcon"&gt;&lt;/span&gt;
        &lt;span class="dijitReset dijitToggleButtonIconChar"&gt;●&lt;/span&gt;
        &lt;span data-dojo-attach-point="containerNode" id="usdotSearchButton_label" class="dijitReset dijitInline dijitButtonText"&gt;Search&lt;/span&gt;
      &lt;/span&gt;
    &lt;/span&gt;
    &lt;input type="button" data-dojo-attach-point="valueNode" role="presentation" tabindex="-1" data-dojo-attach-event="onclick:_onClick" class="dijitOffScreen" value=""&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and the generated markup doesn't include any reference to the "jelam-button-blue" class that I had specified.  </p>
  
  <p>I'm including the dojo module from my local theme, defining the dojoConfig variable before I include the dojo.js like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  var dojoConfig = {
      baseUrl: "/CompassThemesURS/themes/html/commonurs/",
      async: false, // to support older pre-AMD IBM modules
      tlmSiblingOfDojo: false,  
      packages: [
          { name: "gridx", location: "dojo/gridx-1.3.0" },
          { name: "dojo",  location: "dojo/1.9.1/dojo" },
          { name: "dijit", location: "dojo/1.9.1/dijit" },
          { name: "dojox", location: "dojo/1.9.1/dojox" },
          { name: "commonjs", location: "js" }
      ]
  };
  &lt;/script&gt;
  &lt;script src="/CompassThemesURS/themes/html/commonurs/dojo/1.9.1/dojo/dojo.js.uncompressed.js"
                 data-dojo-config="isDebug:true, parseOnLoad: false"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way to turn just the designated button a specified color?
  Thanks.</p>