Style Print dijit menu in esri JavaScript API

Question

Trying to add styles to a dijit is difficult enough, as I have to track down the classes it uses after it loads. I've managed to do that, but I'm struggling to find the appropriate classes to alter for the menu that pops out from the esri Print Dijit (esri.dijit.Print) that lists the different layout options. This doesn't show up in the structure in the browser's development environment, so I can't track them.

Is there a better way to find and alter these style classes?

Answer 1

After hunting through the generated html in Print Templates with esri.request example, I found that the generated menu is of type dijit.Menu. If you want to style it, Here's a very condensed version of the html, which will help you reskin it using css. This is by no means a comprehensive list of classes or table structure. It's just a boiled down version to help modify the styling. In this example, the second choice is hovered over.

<div class="dijitMenuPopup">
  <table class="dijitMenuTable">
    <tr class="dijitMenuItem">
      <td class="dijitMenuIconCell">
        <!-- image icon probably goes here -->
      </td>
      <td class="dijitMenuIconLabel">
         Letter ANSI Portrait
         <!-- label here -->
      </td>
      <td class="dijitMenuItemAccelKey">
        <!-- I don't know what goes here -->
      </td>
      <td class="dijitMenuArrowCell">
         <!-- if a submenu is present, the arrow goes here -->
      </td>
    </tr> 
    <tr class="dijitMenuItem dijitMenuItemSelected dijitMenuHover dijitHover">
      <td class="dijitMenuIconCell">
        <!-- image icon probably goes here -->
      </td>
      <td class="dijitMenuIconLabel">
         Letter ANSI Landscape
         <!-- label here -->
      </td>
      <td class="dijitMenuItemAccelKey">
        <!-- I don't know what goes here -->
      </td>
      <td class="dijitMenuArrowCell">
         <!-- if a submenu is present, the arrow goes here -->
      </td>
    </tr> 
  </table>
</div>

Answer 2

Nope, dijits are very difficult to change unless you have the source code.