Understanding User Interface

Site Help
1

:bookmark: This resource covers the names for each element of the Discourse user interface.

:person_raising_hand: Required user level: All users

Table of Content

  1. Main Page
  2. Topic
  3. User Card
  4. Notification Menu
  5. Composer
2

Main Page

Here’s what NSFireHub.ca’s interface looks like most of the time. Themes, theme components, and plugins may affect this layout.

1000008278
10000082781182×1000 76.1 KB

Let’s break down the main parts, and then the main parts into smaller parts.

1000008279
10000082791172×1000 77.4 KB

  1. Header
  2. Sidebar
  3. Main content

Header

1000008280

  1. Sidebar button/toggle (or Hamburger)
  2. Logo
  3. Top right icons:
    a. Chat toggle
    b. Quick search
    c. Notifications Menu / Avatar menu

Sidebar

1000008281
1000008281370×1000 21.5 KB

  1. Sections
  2. New Section Button
  3. Keyboard Shortcuts

Main Content

1000008282
10000082821307×685 49.7 KB

  1. Navigation / Nav bar
    a. Category Selector
    b. Tag selector
    c. Navigation buttons
  2. Topics list headers
  3. Topics list
3

Topic

1000008283
10000082831300×1000 97.1 KB

  1. Title
  2. Category
  3. Tags
  4. Avatar
  5. Username and Name
  6. Edit History Button
  7. Post Date
  8. Post Actions
  9. Reply to Post button
  10. Topic Map
  11. Topic Actions Buttons
  12. Reply to Topic Button
  13. Admin Wrench
  14. Timeline
  15. Reply to Topic Button
  16. Notification State Button
4

User Card

1000008284
1000008284884×444 44 KB

  1. Location
  2. Badge list
  3. Avatar
  4. Username
  5. Name
  6. Bio
  7. Last Activity Stats
  8. Website
  9. Cakeday (Registration Anniversary)
  10. New Personal Message Button
  11. New Personal Chat Button
5

Notifications menu

1000008285
1000008285756×883 37.7 KB

  1. Notifications
  2. All notifications
  3. Replies and Mentions
  4. Likes
  5. Personal Messages
  6. Bookmarks Reminders
  7. Chat Notifications
  8. Reviewable Items
  9. Other Notifications
  10. User Menu
  11. See All Notifications Button
  12. Dismiss Notifications Button
6

Composer

1000008286
10000082861380×678 85.2 KB

  1. Post Type Selector
  2. Topic Title
  3. Topic Category Selector
  4. Topic Tags Selector
  5. Formatting Toolbar
  6. Text Area
  7. Post Creation/Edition Button
  8. Cancel Post Button
  9. Resizing Grip
  10. Fullscreen Toogle
  11. Minimize Toggle
  12. Preview Panel
  13. Preview Panel Toggle

Additional Composer options