Implementing a Better Message Box

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-32Successwarning-32Warningerror-32Error

a) Defining the Icons

The CSS code above is added to the page definition through the standard WordPress style registration and queuing.

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>.

Share
The short URL of the present article is: http://www.terryobrien.me/SOt7p

Page 3 of 3
First | Prev | 1 | 2 | 3 | Next | Last
View All