Example: Change the Panel Header Style (Modern Themes)

You can change the look-and-feel of the panel header title by overriding the “dht” class:

/* existing definition in BaseStyles.css */

.dialog_header_text, .dht { /* panel header title text */

     color: #fafafa;

     font-family: 'PT Sans Narrow', Arial, Verdana, sans-serif;

     font-size: 16px;

     font-weight: normal;

     padding-left: 10px;

     text-transform: uppercase;

     white-space: nowrap;

This renders as:

Let’s change the title’s “color” to black, its “font family” to Arial, increase its “font size” by four pixels, and render its characters in normal capitalization:

/* new definition in Styles.css */

.dht { /* panel header title text */

     color: #000000;  /* override default attribute */

     font-family:  Georgia, serif; /* override default attribute */

     font-size: 20px; /* override default attribute */

     text-transform: none; /* override default attribute */


The figure shows the effect of the newly added “dht” definition in Styles.css, with the original attributes overridden, i.e., “color” changed to black,” font family” changed to Georgia,” font size” changed to 20px, and “text transform” changed to normal capitalization.

See Also

Customizing Style Sheets and Page Styles

Creating Your Own Page Style

Compendium of CSS Classes Used in Applications (Modern Themes)