Databases Reference
In-Depth Information
<div class="ui-state-highlight ui-corner-all">
<table><tbody><tr><td>
<span class="ui-icon ui-icon-alert"></span>
</td><td>
<p>Caps Lock is enabled.</p>
</td></tr></tbody></table>
</div>
There are a total of four classes used from the framework:
ui-state-highlight
: highlights elements so that they stand out
•
•
ui-corner-all
: applies corner-radius to all 4 corners of an element
ui-icon
: base class applied to make an icon (followed by an icon type class)
•
ui-icon-alert
: type class applied to make an alert icon (preceded by the icon base
class)
•
If the content were displayed in a browser without a CSS file from ThemeRoller, the result would
look like Figure 11-15.
Figure 11-15.
The warning message without ThemeRoller CSS
When a CSS ThemeRoller file is added to the page the same content looks like Figure 11-16. The fact
that this topic is not printed in color prevents you from seeing the full effect, but the visible icon and
rounded corners should be easy to notice.
Figure 11-16.
The warning message with ThemeRoller CSS
APEX actually does add a ThemeRoller CSS file to pages as part of the standard CSS/JavaScript files
that are added to every page. The link appears as follows:
<link type="text/css" href="/i/libraries/jquery-ui/1.8/themes/base/
jquery-ui-1.8.custom.min.css" rel="stylesheet">
The fact that the file name includes the word “custom” indicates that it doesn't include every CSS
class used by the entire jQuery UI library. The default name for the file that contains all of the definitions
is jquery-ui.css. Also, the file is located in a directory named base, which is the name of one of themes
from the ThemeRoller gallery. Alongside that directory are 24 others which comprise the rest of the
themes from the gallery. So if you wanted to add a completely different theme to the page—say,
