How do you style the Dialog Close icon?

[RElliott]

I used the following HTML and CSS to control the look and feel of the buttons on my PrimeFaces Mobile header.

HTML

Code: Select all

<a class="ui-btn ui-icon-bars ui-btn-icon-notext ui-nodisc-icon ui-corner-all elis-action"
   title="ELIS Menu"
   href="#menu">Menu</a>

CSS

Code: Select all

/* Removes color and border from header icons; Icons blend into background better */
.ui-page-theme-a .elis-action {
	background-color: transparent;
	border-width: 0;
}

/* Turns header icons black when you hover over the icon */
.ui-page-theme-a .elis-action:hover {
	background-color: #000000;
}

I would like to style the Dialog component's Close button icon using the same technique but cannot figure out how to add classes to the following anchor.

Code: Select all

<div
    id="j_idt5:j_idt25"
    class="ui-dialog-container">
    <div class="ui-header ui-bar-inherit">
        <a
            href="#"
            class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-left"></a>
        <h1
            class="ui-title"
            role="heading">About ELIS</h1>
    </div>
    <div
        class="ui-content"
        role="main">ELIS Version 1.1</div>
</div>

I noticed that PrimeFaces Mobile creates the following jQuery Mobile function on my page.

Code: Select all

$(document).on('mobileinit', function() {
	$.mobile.ajaxEnabled = false;
	$.mobile.pushStateEnabled = false;
	$.mobile.page.prototype.options.domCache = true;
});

Is there a way for me to add custom code to this function? If so, I might be able to use the jQuery addClass method to add the classes to the anchor.

In general is there a way to add custom jQuery functions to my PrimeFaces Mobile pages?