CSS / Style Markup Guide

This document contains a guide to the class names and markup used within the Telligent Evolution platform.  Note that individual themes (Telligent Community and Telligent Enterprise) may apply adjustments to this markup/styling via Markup Translations. Optional items are color coded green.

Layouts

Where [LAYOUT-NAME] is the name of the layout and [LAYOUT-REGION-NAME] is the name of a region within that layout.  Current layouts and regions are:

• "content" with regions: "content"
• "content-left-sidebar-right" with regions "content", "right-sidebar"
• "content-left-split-sidebar-right-top-single-sidebar-right-bottom" with regions "content", "split-sidebar-left", "split-sidebar-right", "right-sidebar"
• "sidebar-left-content-center-sidebar-right" with regions "left-sidebar", "content", "right-sidebar"
• "sidebar-left-content-right" with regions "left-sidebar", "content"

Regions are rendered in the order mentioned above.

Page Titles

<h1 class="title">...</h1>
<h2 class="description">...</h2>

Administration Bar

This is the bar that will appear on a page for users who can edit the site theme.

Where THEME-TYPE is one of the following

• site - The site theme
• group - A group theme
• blog - A blog theme
• user - A user editable theme, such as the site homepage

Bread Crumbs

Site Banners

Banners include the site name and logo.

Group Banners

Banners include the group name, avatar, and related links.

Where [grouptype] is one of the following

• "Joinless" -- A group that does not require membership
• "PublicOpen" -- A group that is publicly available and does not require approval to join
• "PublicClosed" -- A group that is publicly available and does require approval to join
• "PrivateUnlisted" -- A group that is not listed and requires approval to join
• "PrivateListed" -- A group that is listed and requires approval to join

Application Banners

Banners include the application name and related links.

User Banners

Header Fragments

Where [HEADER-FRAGMENT-NAME] is the name of the header fragment in the hyphen-delimited format.

Content Fragments

Where [CONTENT-FRAGMENT-NAME] is the name of the content fragment.  For example, the "MediaGalleryPostList" widget would have a content fragment class name of "media-gallery-post-list".

[IDENTIFIER] will be set to "with-header" when the header tag will be written.

Footer Fragments

Where [FOOTER-FRAGMENT-NAME] is the name of the footer fragment in the hyphen-delimited format.

Forms

Input classes:

• "search [empty]" -- textbox used for searching

Where [form-name] is one of the following:

• "create-user-form" -- form used to create a new user account
• "openid-create-user-form" -- form used to create a new user account based on OpenID
• "email-subscription-form" -- form used to subscribe to content via email

Avatars

Users

Whenever a user is displayed in a list:

Groups

Whenever a group is displayed in a list:

Abbreviated Posts

Abbreviated posts are posts that show only truncated content, excerpts, or thumbnails.

Full Posts

Full posts display their full content and/or full view of attachments.

When a post is a response and the response is made by the author of the original post, the "full-post-header", "full-post" and "full-post-footer" should also be given the "response-by-originator" class.

Post Identifier

The POST_IDENTIFIER is optional and can be any of the following:

• "verified-answer" -- a post that is confirmed to be the best response to a question
• "suggested-answer" -- posts that are indicated to be an answer to a question
• "not-answered" -- post is a question and has not been answered yet
• "discussion" -- a post that is an exchange, but is not necessarily an answer
• "popular" -- the post is a popular post
• "user-is-author" - the accessing user is the author of the post or comment
• "new-profile-announcement" -- new profile announcement
• "new-profile-comment" -- new profile comment
• "new-user" -- new user
• "new-blog" -- new blog
• "new-blog-post" -- new blog post
• "new-blog-comment" -- new blog comment
• "new-forum" -- new forum
• "new-forum-thread" -- new forum thread
• "new-forum-post" -- new forum post
• "new-media-gallery" -- new media gallery
• "new-media-gallery-post" -- new media gallery post
• "new-media-gallery-comment" -- new media gallery comment
• "new-group" -- new group
• "new-group-member" -- new group member
• "new-friendship" -- new friendship
• "new-group-page" -- new group page
• "new-user-file" -- new user file
• "new-user-folder" -- new user folder
• "new-user-avatar" -- new user avatar
• "new-wiki-page" -- new wiki page
• "view-wiki-page"
• "edit-wiki-page"
• "wiki-page-history"
• "new-wiki" -- new wiki
• "updated-wiki-page" -- updated wiki page
• "new-wiki-page-comment" -- new wiki page comment
• "third-party-messagetype" -- third-party message type
• "status" -- status
• "reply" -- reply

Posts Attribute Names

Individual attributes of posts (in the post attribute list of a post in full or abbreviated view).

• "post-attachment-size" -- the size of a post's attachment
• "post-attachment-download-count" -- the number of downloads of this post's attachment
• "post-reply-count" -- the number of replies to this post
• "post-view-count" -- the number of views of this post
• "post-embed-code" -- code to embed the post in an external web site
• "post-rating-count" -- total ratings for a post
• "post-subscriber-count" -- total number of users tracking a post
• "post-moderated-true" -- post has been flagged as possible spam
• "post-moderated-false" --- post has not been flagged as possible spam
• "post-host-address" -- the address of the user who created the post
• "post-locked" -- post is currently locked and disallows future edits
• "post-points-count" -- the number of points for the post
• "post-associated-page" -- the page that is associated to the post
• "post-recent-reply" -- the most recent reply to a post
• "post-icons" -- Icons related to the post
• "post-emoticon" -- Emoticons for a given post
• "post-perma-link" -- The URL to the post, useful for posts displayed in a thread
• "gender-icons" -- Icons related to the post author

User Attribute Names

Individual attributes of users (in a user attribute list, such as user status).

• "user-avatar" -- the avatar and user name (as defined in Users)
• "edit-user-profile" -- edit the user's profile
• "edit-user-avatar" -- edit/change the user's avatar
• "view-user-status" -- view user's status
• "view-user-status-date" -- date user status was updated
• "edit-user-status" -- form to edit user status

Messages

A message is any alert, notification, or status that is meant to draw a user's attention.

Where [MESSAGE_TYPE] is one of:

• "norecords" -- message displaying that there are no records to display (from a none template)
• "success" -- message displaying a success message after an action is performed
• "error" -- message displaying an error when an action is attempted
• "warning" -- message displaying a warning that prevents the user from completing an action
• "disclaimer" -- disclaimer message (before downloading a protected file, for example)
• "capture" -- capture content to wiki message
• "directions" -- message displaying instructions
• "loading" -- message displayed while loading data or processing a request

Page Content

Any generic page content, such as NNTP information, that is more for informational purposes.

Pagers

Links

Where [LINK_TYPE] is the type of link, either:

• "internal-link" -- a link within the site.
• "external-link" -- a link outside of the site.

Where [application-type] is the type of application the link relates to, such as

• wiki
• media-gallery
• forum
• weblog

And [LINK_LOCATION] is the location/target of the link:

• "view-post [answer | unverified-answer | verified-answer | read | unread] [application-type]" -- View content.
• "view-next-post [application-type]" -- View next post.
• "view-previous-post [application-type]" -- View previous post.
• "view-post-archive-list [application-type]" -- View archived posts.
• "view-application [application-type] [single | multiple]" -- View an application. Use single/multiple to indicate a link to one or more instances of an application.
• "view-application-list" -- View a list of applications.
• "view-slideshow" -- View a slideshow of posts.
• "download-attachment" --  Download an attachment.
• "add-reply" -- Add a reply/comment to a post.
• "view-replies" -- View replies to content.
• "delete-post [application-type]" -- Delete content.
• "edit-post [application-type]" -- Edit content.
• "add-post [application-type]" -- Add a post.
• "quick-add-post" -- Add a post through a modal
• "lock-post" -- Locks a post so that it cannot be further edited
• "unlock-post" -- Unlocks a post so that it can be edited
• "add-application [application-type]" -- Link to the control panel page to create an application
• "edit-application [application-type]" -- Link to the control panel to edit the current application
• "rss" -- RSS feed.
• "view-rss-item" -- Links to an item in an rss feed
• "favorite-on" -- Favorite is enabled.
• "favorite-off" -- Favorite is disabled.
• "processing" -- A link is processing (for AJAX).
• "subscription-on" -- Subscription is enabled.
• "subscription-off" -- Subscription is disabled.
• "send-email" -- Send an email.
• "view-group" -- View a group.
• "edit-group" -- Edit a group.
• "edit-theme" -- Edit the site or application theme.
• "view-group-membership" -- View group membership.
• "edit-group-membership" -- Manage group membership. 
• "view-contact-requests" -- View contact requests page.
• "join-group" -- Join a group.
• "leave-group" -- Leave a group.
• "delete-activity" -- Delete an activity message.
• "approve-contact-request" -- Approve a contact request.
• "deny-contact-request" -- Delete a contact request.
• "delete-conversation" -- Delate a conversation message.
• "view-user-profile" -- View a user's profile page
• "edit-user-profile" -- Edit current user's profile
• "login" -- View the login page for the site
• "openid" -- View OpenID login
• "request-friendship" -- Request a user as a friend
• "start-conversation" -- Start a conversation with another user
• "suggest-answer" -- Suggest an answer to a question
• "report-post [application-type]" -- Report abuse for a post
• "capture-post [application-type]" -- Capture a post to a wiki page
• "view-user-search" -- Search for users.
• "view-home" -- View site home page.
• "edit-user-avatar" -- View page to change a users avatar
• "edit-api-keys" -- View page to change a users API keys
• "edit-password" -- Allows a user to change their password
• "approve-friend-request" -- Approve friendship request.
• "deny-friend-request" -- Deny friendship request.
• "cancel-friend-request" -- When a user makes a request for friendship and decides to cancel the request.
• "delete-friend" -- To delete an existing friendship.
• "view-friend-list" -- View list of friends.
• "user-registration" -- View the user registration page.
• "logout" -- View user logout page.
• "view-invite" -- View account invitation page.
• "view-friends" -- View friends page.
• "view-friends-pending" -- View pending friends page.
• "view-contact" -- View contact page.
• "view-control-panel" -- View control panel page.
• "view-unread-posts [application-type]" -- View posts that a user has not read
• "view-subscriptions" -- View page displaying subscription the user has
• "view-online-users" -- View a list of users who are currently logged in
• "search" -- View the site search page
• "clear-search" -- Clear the current search query
• "mark-all-read" -- Mark all posts as read.
• "view-all" -- View all (posts/friends/activity).
• "view-activity-list" -- View a list of activity messages
• "view-group-list" -- View a list of groups
• "view-favorite-list" -- View a list of favorites
• "view-comment-list" -- View a list of comments
• "view-announcement-list" -- View a list of announcements
• "view-user-file-list" -- View a list of user files
• "view-detail-list" -- When filtering a list, the link to the detailed view
• "view-thumbnail-list" -- When filtering a list, the link to view the list as thumbnails
• "view-moderation" -- View the page to moderate content
• "view-more" -- The link in a list when the user is presented with "And 10 more...", for example.
• "upload-file" -- Upload a file link
• "save-form" -- Save form 

Tabbed Panes

Use the following class names for tabbed pane tables

• "tab-pane" - The outer container class
• "tab-set" - Use for each of the set of tabs
• "tab" - Use for each individual tab
• "tab selected" - Use for the selected tab
• "tab hover" - Use for a tab that has a mouseover

Modal Dialogs

Use the following markup for a modal dialog.

• "modal" -- The wrapper around the modal dialog box
• "modal-mask" -- The modal backgound that overlays the page
• "modal-title" -- The title area of the dialog box, including drag-and-drop
• "modal-content" -- The content area of the dialog box
• "modal-footer" -- The footer area of the dialog box
• "modal-close" -- The close button/image for the dialog box
• "modal-resize" -- The resize handle for the dialog box

Ratings

For the following span class, the class name can change according to the following

• "rating readonly" -- When ratings are not able to be changed by the current user
• "rating active" -- When the ratings class is hovered
• "rating' -- When the rating class is not hovered and not readonly

Menus

Use the following for popup menus

• "menu" -- For the main menu classname
• "menu-list" -- For the item list wrapper
• "menu-item [MENU-ITEM-TYPE]" -- For each list item in the menu
• "menu-item selected" -- When a menu item is selected
• "menu-item expanded" -- Whenever a menu item is selected and expanded
• "menu-button [active] [MENU-NAME]" -- for the button that opens  the menu, if it is active or not, and its type, see below

[MENU-NAME] is a type from below:

• "forum-post-option" -- menu button for popup menu displaying forum options
• "forum-post-moderation" -- menu button for the forum moderation menu
• "forum-post-favorite" -- menu button for favoriting a post
• "forum-create-post" -- menu for creating a forum post
• "favorite-list" -- menu for a list of user favorited links

[MENU-ITEM-TYPE] is a type from below:

• "favorite-header" -- menu for headers in a favorite list.
• "favorite-forum" -- menu for forum in a favorite list
• "favorite-weblog" -- menu for blog in a favorite list
• "favorite-weblogpost" -- menu for blog post in a favorite list
• "favorite-group" -- menu for a group in a favorite list
• "favorite-forumpost" -- menu for a forum post in a favorite list
• "favorite-mediagallery" -- menu for a media gallery in a favorite list
• "favorite-mediagallerypost" -- menu for a media gallery post in a favorite list
• "favorite-wiki" -- menu item for a wiki in a favorite list
• "favorite-none" -- menu item stating there are no items the user has favorited
• "favorite-view-all" -- menu item to view all favorites