Typepad Connect CSS Documentation: Comment Threads
Comment Thread Class Structure
Outlined below is the CSS class structure for Typepad Connect comment threads. IDs are denoted as #idname and class names are denoted as .classname. Elements are documented where the classname is not immediately descriptive of its contents.
- Top level container class.
- Displays a message to the user while comments are loading.
- #comment-ID .comment
- The container for each individual comment.
- Contains the userpic for the commenter, if the blog owner has turned on display of userpics.
- The container for the text of the individual comment.
- #comment-ID-header .comment-header
- The body text of the comment.
- #comment-ID-footer .comment-footer
- #comment-ID-footerlinks .comment-footerlinks
- Contains the links for replying, editing and deleting individual comments.
- Contains the link for users to load additional comments into the thread.
- Contains the prompt for the user to sign in to comment.
- Contains flyouts that are displayed when a user hovers their mouse over a userpic.
- #comment-avatar-flyout .avatar-flyout
- Container for the userpic / avatar flyout panel.
- Container used for positioning.
- #avatar-flyout-content .avatar-flyout-content
- Container for information about user activity on the service.
- Contains the IFRAME for the comment posting form. Users can not style elements of this IFRAME.
- Contains the IFRAME for individual comment actions. Users can not style elements of this IFRAME.
Additional comment classes
Additional classes are applied to the .comment div, based on the attributes of the individual comment. These classes are useful for providing further customization and styling based on individual comment attributes.