August 17, 2011

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.

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


Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Typepad Services badge