Web AIM CSS Reference

The following is a list of class names and ids assigned to HTML elements generated by the Web AIM JavaScript API, so that you can style your widgets however you like. An example CSS file that styles the Buddy List widget to look similar to the AIM 6.0 client can be found here.

• Buddy List Selectors
• Instant Message Window Selectors
• Miscellaneous Selectors

Buddy List Selectors

#AIMBuddyListContainer

This is the main container element under which the API builds its required elements. It is the only element that you are required to hard-code into the document, and is the element with the wim_key attribute that the API will access and pass to the host.

#AIMBuddyList

A <ul> element that acts as the top level container element for the buddy list.

.AIMBuddyListHeading

An <h2> element used for the group names in the buddy list (i.e. – "Family" or "Buddies").

.AIMBuddyListGroup

A <ul> element that is the container element for the AIM screen names in that group.

.AIMBuddyListGroupEven

Assigned to the <ul> elements that act as the container element for AIM screen names in a group. Can be used to facilitate zebra-stripe color schemes (e.g. – for buddy groups).

.AIMBuddyListGroupOdd

Assigned to the <ul> elements that act as the container element for AIM screen names in a group. Can be used to facilitate zebra-stripe color schemes (e.g. – for buddy groups).

#AIMBuddyList .AIMBuddyListGroup .buddy

An <li> element that contains an AIM screen name. Is a child of .AIMBuddyListGroup.

#AIMBuddyList .AIMBuddyListGroup .away

Assigned to the <li> element that represents a given AIM screen name when that user has changed their online status to "away".

#AIMBuddyList .AIMBuddyListGroup .online

Assigned to the <li> element that represents a given AIM screen name when that user has changed their online status to "available".

#AIMBuddyList .AIMBuddyListGroup .idle

Assigned to the <li> element that represents a given AIM screen name when that user has changed their online status to "idle".

#AIMBuddyList .AIMBuddyListGroup .mobile

Assigned to the <li> element that represents a given AIM screen name when that user has changed their online status to "mobile".

#AIMBuddyList .AIMBuddyListGroup .offline

Assigned to the <li> element that represents a given AIM screen name when that user signs off or goes invisible.

#AIMBuddyList .AIMBuddyListGroup .even

Assigned to even-numbered <li> elements in the buddy list. Can be used to zebra-stripe the list.

#AIMBuddyList .AIMBuddyListGroup .odd

Assigned to odd-numbered <li> elements in the buddy list. Can be used to zebra-stripe the list.

#AIMBuddyListBuddyInfo

A <div> element that floats above an AIM screen name in the buddy list and displays that user's information.

.AIMBuddyListAvailabilityMenu

A menu that allows the user to set their status, sign off, start a conversation, etc. Also exists on IM windows if CREATE_AVAILABILITY_MENU_IM is true.

.AIMBuddyListAvailabilityMenuActionPoint

The clickable portion of the menu that invokes the menu proper. Also exists on IM windows if CREATE_AVAILABILITY_MENU_IM is true.

.AIMBuddyListAvailabilityMenuAvailable

How the actionable portion of the availability menu will appear when the user's state is "online".

.AIMBuddyListAvailabilityMenuAway

How the actionable portion of the availability menu will appear when the user's state is "away".

.AIMBuddyListAvailabilitySubMenu

The appearence of the menu that pops up when the user activates the availability menu.

.AIMBuddyListAvailabilitySubMenu li

Each item in the availability menu.

.AIMBuddyListUserScreenName

The user's screen name at the top of the buddy list.

.AIMBuddyListBranding

An element to contain branding for the application.

#AIMBuddyListContainer hr

Divider lines in the availability menu.

Instant Message Window Selectors

.AIMBuddyListIMWindow

Assigned to <div> elements that act as IM windows.

.AIMBuddyListWindowTitleBar

Assigned to <h2> elements that act as the title bar in IM windows.

.AIMBuddyListIMWindowDragState

Assigned to the <div> element that acts as an IM window when the window is being dragged by the user.

.AIMBuddyListIMWindowTextArea

A <div> element in the IM window where conversation text appears.

.AIMBuddyListIMWindowTextArea p

Each conversation block in the IM window is wrapped in a <p> element. This includes the AIM screen name, the time stamp, and the message text.

.AIMBuddyListIMWindowTextInput

The text <input> element into which the user enters IM text.

.AIMBuddyListUser

How the screen name of the user running the application will appear in their conversation window.

.AIMBuddyListUserBuddy

How the screen name with which the user is having a conversation will appear in the conversation window.

.AIMBuddyListIMWindowButton

The look of the "send" button on an IM window.

.AIMBuddyListTimeStamp

The appearance of the time stamp in the conversation window.

.AIMBuddyListTypingStatusTyping

Assigned to the element that shows typing status when the other user is currently typing.

.AIMBuddyListTypingStatusTyped

Assigned to the element that shows typing status when the other user has entered text.

.AIMBuddyListTypingStatusStoppedTyping

Assigned to the element that shows typing status when the other user has stopped typing or cleared the text from the input box.

.AIMBuddyListIMWindowNotifyOn

Applied to the title bar of an IM window as the "on" state of a flashing visual notification.

.AIMBuddyListIMWindowNotifyOff

Applied to the title bar of an IM window as the "off" state of a flashing visual notification.

Miscellaneous Selectors

.AIMFrameContainer

Applied to the <div> element that wraps the authentication and consent <iframe>.

.AIMFrameContainer iframe

The <iframe> that contains the authentication and consent forms.

.AIMFrameContainer h2

The element that acts as the window title for the authentication and consent <iframe>.