View Categories

Customizing the Forum Design

Table of Contents

GravityOps Forum is designed to be highly customizable, allowing you to match the look and feel of your WordPress theme. You can customize the design using CSS for styling or, in the paid version, by overriding the default templates for deeper structural changes.

1. Adding Custom CSS #

The plugin includes a base stylesheet (forum.css), but you can easily add your own styles to override its defaults.

All forum elements are prefixed with gofrm- or gravityops-forum- to ensure they do not conflict with other styles on your site.

Page Containers #

  • .gravityops-forum-archive: The main forum index page container.
  • .gravityops-forum-single: The single forum view container (topic list).
  • .gravityops-forum-topic: The single topic/thread view container.
  • .gravityops-forum-profile: The user profile page container.

Layout Elements #

  • .gofrm-header: The page header containing the title and primary actions.
  • .gofrm-breadcrumb: Breadcrumb navigation container.
  • .gofrm-board-section: A section containing a board and its forums.
  • .gofrm-board-title: Board headings on the index page.
  • .gofrm-forum-list / .gofrm-forum-item: Lists and individual forum rows on the index page.
  • .gofrm-topic-list / .gofrm-topic-item: The table and rows for topics in a single forum view.
  • .gofrm-button-primary: The primary button style used throughout the forum.

Post Elements #

  • .gofrm-post: General container for both topics and replies.
  • .gofrm-post--topic: Specific styling for the initial topic post.
  • .gofrm-post--reply: Specific styling for replies.
  • .gofrm-post-meta: Meta information bar (author name, date, etc.).
  • .gofrm-post-author: The author information sidebar within a post.
  • .gofrm-post-content: The main body container for the post content.
  • .gofrm-author-avatar: Container for the author’s avatar.
  • .gofrm-tag: Individual topic tag style.
  • .gofrm-topic-tags: Container for the list of tags on a topic.

Inline Editor (AJAX) #

  • .gofrm-edit-wrapper: The inline editor container.
  • .gofrm-edit-textarea: The textarea within the inline editor.
  • .gofrm-save-edit: The Save button in the editor.
  • .gofrm-cancel-edit: The Cancel button in the editor.

Example: Customizing Topic Posts #

/* Change the background color of topic posts */
.gofrm-post--topic {
    background-color: #f0f8ff;
    border-left: 5px solid #0073aa;
}

/* Style the meta information */
.gofrm-post-meta {
    font-style: italic;
    color: #444;
}

2. Overriding Forum Templates (Paid only) #

For deeper structural changes, you can override the plugin’s default PHP templates within your WordPress theme. This feature is only available in the paid version of GravityOps Forum.

How to Override a Template #

  1. In your active theme’s directory, create a new folder named gravityops-forum.
  2. Copy the template file you wish to modify from the plugin’s templates/ directory into your theme’s gravityops-forum/ folder.
  3. Modify the copied file as needed. GravityOps Forum will automatically detect and use your theme’s version instead of its default one.

Overridable Templates #

  • archive-forum.php: The main forum index.
  • single-forum.php: The view for a specific forum and its topic list.
  • single-topic.php: The view for a single topic and its replies.
  • profile.php: The user profile page.

Redirection and Navigation in Embedded Forums #

When you embed a forum or topic on a page that is not the primary forum page, keep in mind how navigation works:

  • Default Behavior: Clicking on a forum or topic link will normally take the user to the “official” forum URL (e.g., /forum/my-forum/).
  • Staying on the Current Page: If you want users to navigate the forum without leaving your custom page (e.g., on a dashboard or landing page), [gofrm_index] is sufficient for full fallback rendering. You can still add dedicated shortcodes for explicit layout control.
  • Automatic Detection: The plugin automatically detects when it’s being rendered via a shortcode. In this context, it will generate links that point back to the current page using query parameters, ensuring a seamless experience for users within your custom layout.
What are your Feelings