Forum

Import the Forum design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from Forum and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Blocks this design adds

Forum Header Dropdown

canvas-core/forum-header-dropdown

A header icon or portrait that opens a panel of notifications or account links. In the block inserter it is named Canvas Forum Header Dropdown.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• TriggerDefaultIcon

  What a visitor clicks in the header to open the panel: a small icon, such as a bell for notifications, or the portrait of the signed in member.

  ChoicesIconPortrait

• Trigger IconDefaultbi-bell

  The icon shown in the header.

  Shown when Trigger is "Icon"

• Extra Icon ClassesDefaultnotification-badge

  Style classes on that icon. The default adds the small dot that marks unread notifications.

  Shown when Trigger is "Icon"

• PortraitDefaultEmpty

  The picture shown in the header in place of an icon.

  Shown when Trigger is "Portrait"

• Portrait Alt TextDefaultUser

  How that picture is described to someone who cannot see it.

  Shown when Trigger is "Portrait"

• Portrait ClassesDefaultrounded-circle

  Style classes on that picture. The default crops it to a circle.

  Shown when Trigger is "Portrait"

• Trigger IDDefaultEmpty

  Ties the panel to its trigger for screen readers.

• Panel HeadingDefaultEmpty

  Optional label above the rows. Empty hides it.

• Rows

  The rows inside the panel, in the order they appear. A row is either a plain link or a notification with a portrait and a time.

  Each row of Rows takes:

  • Row TypeDefaultLink

    Whether this row is a plain menu link or a notification. Only the settings the chosen kind uses are read.

    ChoicesLinkNotification

  • TextDefaultEmpty

    What this row says. Basic formatting is kept, so a name inside a notification can be set in bold.

  • Link URLDefaultEmpty

    Where clicking this row takes the visitor.

  • IconDefaultEmpty

    An icon in front of this row.

  • Extra Icon ClassesDefaultEmpty

    Style classes on that icon.

  • PortraitDefaultEmpty

    A picture of whoever the notification is about, shown at the start of the row.

  • Portrait Alt TextDefaultProfile

    How that picture is described to someone who cannot see it.

  • TimestampDefaultEmpty

    The small line under a notification saying when it happened, such as 2 hours ago.

  • Extra Row ClassesDefaultEmpty

    Style classes on this one row, for marking it as unread or picking it out from the rest.

Display

• Wrapper ClassesDefaultheader-misc-icon

  Style classes on the trigger in the header, which is what spaces it alongside the other header icons.

• Panel ClassesDefaultdropdown-menu dropdown-menu-end py-0 m-0

  Style classes on the panel itself, which is what draws it and aligns it under the trigger.

• Panel Inline StyleDefaultEmpty

  For example a fixed panel width and maximum height.

• Panel Heading ClassesDefaultdropdown-header border-bottom border-f5 fw-medium text-uppercase ls-1

  Style classes on the heading at the top of the panel, which is what sets it in spaced capitals over a dividing line.

• Notification Group ClassesDefaultlist-group list-group-flush

  Wraps notification rows. Empty renders them unwrapped.

• Panel OffsetDefault0,15

  How far the panel is nudged from the trigger, written as sideways and downward distances separated by a comma. The default drops it clear of the header.

Forum Members

canvas-core/forum-members

A grid of community members with their portraits and names. In the block inserter it is named Canvas Forum Members.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• Members ShownDefault8

  How many members the grid holds. Pick a number that fills its rows evenly.

• Order ByDefaultContributions

  What decides which members appear and in what sequence. Contributions leads with the most active, Date Joined with the longest standing.

  ChoicesContributionsNameDate JoinedUser ID

• OrderDefaultDescending

  Which end of that sequence comes first. With Order By set to Contributions, Descending leads with the busiest member.

  ChoicesDescendingAscending

• RoleDefaultEmpty

  Limit the grid to one role slug. Empty includes every member.

• Empty MessageDefaultNo members yet.

  Shown in place of the grid when no member matches, so a new community never looks broken.

Display

• Show NamesDefaultOn

  Shows each member name under their portrait. Turn it off for a wall of faces alone.

• Link to ProfilesDefaultOff

  Makes each member clickable, taking the visitor to their profile page.

• Portrait WidthDefault80

  How wide each portrait is drawn, in pixels. Portraits are square, so this is their height as well.

• Row ClassesDefaultrow justify-content-center col-mb-30 gutter-50 text-center

  Style classes on the row holding the members. The default centres a part-filled row and spaces the portraits generously.

• Column ClassesDefaultcol-md-3 col-4

  Style classes on the column each member sits in. This is what decides how many fit across the row at each screen width.

• Portrait ClassesDefaultrounded-circle mb-2

  Style classes on each portrait. The default crops it to a circle and leaves a gap above the name.

• Name TagDefaultH5

  Which element carries a member name. Choose the plain span where the names are not headings in the outline of the page.

  ChoicesH3H4H5H6Span

• Name ClassesDefaultfw-medium

  Style classes on a member name.

• Portrait Alt TextDefaultMembers

  How the portraits are described to someone who cannot see them.

Forum Search Overlay

canvas-core/forum-search-overlay

A full-screen search panel with columns of shortcut links drawn from live topics. In the block inserter it is named Canvas Forum Search Overlay.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• Results URLDefaultEmpty

  Where the query is sent. Empty posts to the site search.

• Query Field NameDefaults

  The name the query is submitted under. Leave it at the default unless the results page expects something else.

• PlaceholderDefaultType Your Query & Hit Enter..

  The faint prompt inside the empty search box, which disappears as soon as the visitor types.

• Shortcut Columns

  Columns of ready made links shown under the search box, so a visitor with nothing particular in mind still has somewhere to go.

  Each row of Shortcut Columns takes:

  • HeadingDefaultEmpty

    The heading above this column of links.

  • ForumDefaultEmpty

    Which forum this column takes its links from. All Forums draws on the whole board.

    ChoicesAll Forums (empty)

  • Links ShownDefault5

    How many links this column lists.

  • Order ByDefaultLast Activity

    What decides which discussions the column picks: the most recently active, the newest, the busiest, or the title in alphabetical order.

    ChoicesLast ActivityDate CreatedTitleReply Count

  • Column ClassesDefaultcol-md-6

    Style classes on this column, which is what sets how much of the row it takes.

  • Widget ClassesDefaultwidget widget_links

    Style classes on the list inside the column, so it matches the link lists elsewhere on the site.

Display

• Form ClassesDefaulttop-search-form bg-alt dark

  Style classes on the overlay itself, which is what fills the screen and switches its text to the light treatment.

• Inner ClassesDefaultcontainer row justify-content-center

  Style classes on the block inside the overlay, which is what holds the contents to the reading width and centres them.

• Column Wrapper ClassesDefaultcol-sm-8

  Style classes on the column holding the search box and the shortcuts, which is what stops them running the full width of a large screen.

• Query Field ClassesDefaultform-control form-control-lg mb-5 border-color

  Style classes on the search box, which is what makes it large and gives it the accent coloured edge.

• Shortcut Row ClassesDefaultrow col-mb-30

  Style classes on the row holding the shortcut columns.

• Heading ClassesDefaultEmpty

  Style classes on every shortcut column heading.

Forum Discussion

canvas-core/forum-topic-post

The opening post and every reply of a discussion, with a reply form. In the block inserter it is named Canvas Forum Discussion.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• Discussion IDDefault0

  Leave at 0 to show the discussion being viewed.

• Date FormatDefaultF j, Y, g:i A

  PHP date format for the posted time.

• Portrait SizeDefault50

  How large each member portrait is drawn, in pixels.

• Portrait Alt TextDefaultAuthor

  Empty uses each member name.

• Team BadgeDefaultTeam

  Shown beside moderators and administrators. Empty hides it.

• Reply HeadingDefaultReply

  The small heading marking each reply under the opening post.

• Show Status BadgeDefaultOn

  Shows whether the discussion is open, closed or resolved.

• Show Moderation MenuDefaultOn

  Shows the menu of moderation actions beside a post, such as editing, closing or removing it.

• Moderation RowsDefaulta preset list of 7 rows

  The rows inside the moderation menu, in the order they appear.

  Shown when Show Moderation Menu is on

  Each row of Moderation Rows takes:

  • TextDefaultEmpty

    The wording of this row in the menu.

  • IconDefaultEmpty

    An icon in front of the wording.

  • Link URLDefault#

    Where this row takes the moderator.

  • Scroll to TargetDefaultOff

    Glides down to the target on the same page rather than jumping to it, which suits a Reply row pointing at the form below.

Display

• Moderation IconDefaultuil uil-ellipsis-h

  The icon that opens the moderation menu.

  Shown when Show Moderation Menu is on

• Moderation Icon ClassesDefaulticon-2x alt-color

  Style classes on that icon, which is what sets its size and colour.

  Shown when Show Moderation Menu is on

• Portrait ClassesDefaultrounded-circle me-2

  Style classes on each member portrait. The default crops it to a circle and leaves a gap before the name.

• Team Badge ClassesDefaultbadge bg-info text-white p-1 ms-1

  Style classes on the badge marking a moderator or administrator.

• Reply Heading IconDefaultbi-check-lg

  An icon in front of the reply heading.

• Reply Heading Icon ClassesDefaulttext-success

  Style classes on that icon, which is what colours it.

• Opening Post ClassesDefaulttopic-post

  Style classes on the post that opens the discussion.

• Reply ClassesDefaulttopic-post reply mt-5 p-4 p-md-5 border-top border-width-5 border-color

  Style classes on each reply. The default sets it apart from the post above with a thick accent coloured rule.

• Show Reply PaginationDefaultOn

  Shows the page controls under the replies, which a long discussion needs.

• Pagination ClassesDefaultpagination justify-content-end mt-5

  Style classes on those controls, which is what ranges them to the right with a gap above.

  Shown when Show Reply Pagination is on

Reply Form

• Show Reply FormDefaultOn

  Shows the form under the discussion where a member writes a reply.

• Form AnchorDefaultmessage-reply

  An anchor name for the reply form, so a Reply row in the moderation menu can point at it. Keep the two the same.

  Shown when Show Reply Form is on

• Form Section ClassesDefaulttopic-form mt-5

  Style classes on the section that holds the reply form.

  Shown when Show Reply Form is on

• Form HeadingDefaultReply to the Message

  The heading above the reply form.

  Shown when Show Reply Form is on

• Form Heading ClassesDefaulth2 fw-bolder mb-4

  Style classes on that heading, which is what sets its size and weight.

  Shown when Show Reply Form is on

• Message RowsDefault10

  How many lines of the message box are visible at once, which is how tall it starts.

  Shown when Show Reply Form is on

• Subscribe LabelDefaultEmail me when Someone Replies

  Empty hides the subscribe checkbox.

  Shown when Show Reply Form is on

• Button LabelDefaultSubmit Now

  Wording on the button that posts the reply.

  Shown when Show Reply Form is on

• Button ClassesDefaultbutton button-large bg-alt py-2 rounded-1 fw-medium text-transform-none ls-0 ms-0

  Style classes on that button, which is what makes it large and keeps its wording as typed rather than in capitals.

  Shown when Show Reply Form is on

• Signed-Out MessageDefaultSign in to reply to this discussion.

  Shown in place of the form to a visitor who is not signed in. Tell them where to sign in, or the invitation is a dead end.

  Shown when Show Reply Form is on

Forum Topics

canvas-core/forum-topics

A live list of discussion topics with reply counts, activity times and participant avatars. In the block inserter it is named Canvas Forum Topics.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• ForumDefaultEmpty

  Limit the list to one forum. Leave on All Forums to list everything.

  ChoicesAll Forums (empty)

• Search TermDefaultEmpty

  Show only topics matching this term. Empty shows all topics.

• Search Term SourceDefaultUse the term above

  On a results page, take the term from the address bar and fall back to the term above.

  ChoicesUse the term aboveUse the visitor search query

• Topics per PageDefault3

  How many discussions the list holds before the page controls take over.

• Order ByDefaultLast Activity

  What decides the sequence discussions appear in. Last Activity keeps the liveliest conversations at the top, which is what a busy board wants.

  ChoicesLast ActivityDate CreatedTitleReply Count

• OrderDefaultDescending

  Which end of that sequence comes first. With Order By set to Last Activity, Descending puts the most recent conversation at the top.

  ChoicesDescendingAscending

• Empty MessageDefaultNo topics found.

  Shown in place of the list when nothing matches, so an empty forum or a fruitless search never looks broken.

Display

• Show Participant AvatarsDefaultOn

  Shows the faces of the people taking part beside each discussion, which is what tells a visitor how busy it is.

• Maximum AvatarsDefault4

  How many faces are shown before the rest are left out, so a long thread does not fill the row.

  Shown when Show Participant Avatars is on

• Show Last ActivityDefaultOn

  Shows how long ago the discussion was last posted in.

• Show Reply CountDefaultOn

  Shows how many replies the discussion has had.

• Show Status BadgeDefaultOn

  Marks a discussion that is closed, pinned or resolved, so a visitor knows before opening it.

• Show PaginationDefaultOn

  Shows the controls that move between pages of discussions under the list.

• List ClassesDefaultlist-unstyled mb-4

  Style classes on the list as a whole, which is what drops the bullet points and sets the gap under it.

• Row ClassesDefaulttopic list-unstyled row mx-0 justify-content-between align-items-center

  Style classes on each discussion row, which is what puts the title and the faces at opposite ends of the same line.

• First Row Extra ClassesDefaultEmpty

  Added to the first row only, e.g. to drop its top border.

• Alternate Row ClassesDefaultodd

  Style classes added to every other row, which is what gives a long list its banded stripes.

• Entry Column ClassesDefaultentry mb-0 col-sm-10

  Style classes on the column holding the title and its details, which is what sets how much of the row it takes.

• Avatar Column ClassesDefaultcol-sm-2

  Style classes on the column holding the faces, at the other end of the row.

  Shown when Show Participant Avatars is on

• Avatar Alt TextDefaultUser

  Alt text on every participant avatar. Empty uses each member name.

  Shown when Show Participant Avatars is on

• Title ClassesDefaultmb-0

  Style classes on the discussion title.

• Title Link ClassesDefaultlink-dark

  Style classes on the link inside the title, which is what colours it.

• Meta ClassesDefaultentry-meta mt-1

  Style classes on the small line of details under a title, carrying the reply count and the last activity.

• Pagination ClassesDefaultpagination justify-content-end

  Style classes on the page controls, which is what ranges them to the right of the list.

  Shown when Show Pagination is on