Showing the Status Indicator
The CSS definition defines three icons: one each for the success, failure and warning statuses.These icons are 32x32 pixel PNG graphic icons and were collected from a variety of sources that were all freely available for personal or commercial use: the variety of sources was because no one source contained the icons that I wanted or that looked good together in one source.
 Success |  Warning |  Error |
a) Defining the Icons
1 2 3 4 5 6 7 8 9 | #icon-avp-error { background: transparent url(../images/error-32.png) no-repeat; } #icon-avp-success { background: transparent url(../images/success-32.png) no-repeat; } #icon-avp-warning { background: transparent url(../images/warning-32.png) no-repeat; } |
The CSS code above is added to the page definition through the standard WordPress style registration and queuing.
1 2 3 | wp_register_style( ‘avp-unicode-charkbd-icons’, plugins_url( ‘css/avp-unicode-charkbd-icons.css’, __FILE__ ) ); wp_enqueue_style( ‘avp-unicode-charkbd-icons’ ); |
In keeping with accepted coding standards, all CSS files are segregated into a sub-directory reserved exclusively for these files.
b) Adding the Icons to the Message Box
The status indicators are added to the message box through a definition.
This definition configuration should look somewhat familiar: its the same class definition as used for the admin page header icon. These statements are added as the first line of the <div>.
Personal Links