Introduction
This page defines the CSS classes used by Typepad Connect for comment threads and embedded profile pages.
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.
- .comments-content
- Top level container class.
- #tpc_thread
- #tpe-content
- #comments-loading
- Displays a message to the user while comments are loading.
- #tpe-comments-content
- #comment-ID .comment
- The container for each individual comment.
- .comment-avatar
- Contains the userpic for the commenter, if the blog owner has turned on display of userpics.
- .comment-data
- The container for the text of the individual comment.
- #comment-ID-header .comment-header
- .comment-content
- 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.
- .comment-datetime
- #comments-pager
- Contains the link for users to load additional comments into the thread.
- #comments-signin
- Contains the prompt for the user to sign in to comment.
- #comments-flyout
- 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.
- #comment-avatar-flyout-inner
- Container used for positioning.
- #avatar-flyout-content .avatar-flyout-content
- .profileLink
- #avatar-flyout-name
- #avatar-flyout-location
- .profileWebsite
- #avatar-flyout-counts
- Container for information about user activity on the service.
- .activityTitle
- .subTitle
- #avatar-flyout-thisblog
- #avatar-flyout-overall
- #comments-post
- Contains the IFRAME for the comment posting form. Users can not style elements of this IFRAME.
- #comments-action
- 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.
- .first
- Is applied if the comment is first in the thread.
- .last
- Is applied if the comment is last in the thread.
- .even
- Is applied if the comment is even in ordering (comment numbers 2, 4, 6, 8, etc.) in a thread. Note that the ".odd" class is implied.
- .comment-reply-1
- Is applied if the comment is a reply, 1 level deep.
- .comment-reply-2
- Is applied if the comment is a reply, 2 levels deep.
- .comment-reply-3
- Is applied if the comment is a reply, 3 levels deep.
- .comment-reply-4
- Is applied if the comment is a reply, 4 levels deep.
- .comment-reply-5
- Is applied if the comment is a reply, 5 levels deep.
- .comment-by-owner
- Is applied if the comment was created by the owner of the blog.
- .comment-has-avatar
- Is applied if the blog owner has chosen to turn on display of userpics / avatars for that blog.
- .comment-has-number
- Is applied if the blog owner has chosen to turn on display of comment numbering for that blog.