Frontend Display

How courses appear to visitors and enrolled students on your website. Classerna provides templates for course archives and single course pages that integrate with your theme.

Course Archive Page

The course archive displays all published courses. Access it at yoursite.com/courses/.

Archive Features

Course Cards - Each course shows thumbnail, title, excerpt, and key details
Search - Filter courses by keyword (if enabled in settings)
Category Filter - Filter by course category
Pagination - Navigate through multiple pages of courses

📸

Course Archive Page

Screenshot of the course archive page showing: search bar at top, category filter dropdown, grid of course cards with images and titles, and pagination at bottom.

images/frontend-archive.png

Course Card Information

Each course card displays:

Element	Description
Featured Image	Course thumbnail (or placeholder if none set)
Title	Course name, linked to single course page
Excerpt	Short course description
Price	Course price or "Free"
Delivery Type	In-Person, Online, or Hybrid badge
Coming Soon Badge	Displayed if course is in Coming Soon mode
View/Register Button	Link to view course details or register

📸

Course Card Detail

Screenshot of a single course card from the archive, with annotations pointing to the image, title, excerpt, price, delivery badge, and action button.

images/course-card-detail.png

Single Course Page

The single course page shows complete course details. The layout adapts based on the display option set in Settings (Tabbed or List).

Page Sections

Section	Content
Header	Course title, Coming Soon badge, featured image
Meta	Price, delivery type, location/link, capacity, dates
Content	Full course description from the editor
Sessions	List of all sessions with dates and times
FAQs	Accordion of frequently asked questions
Materials	Preview for visitors, full access for enrolled students
Registration	Register button, pricing options, or notification signup
Financial Aid	Financial aid information if configured

📸

Single Course Page - Full View

Screenshot of a complete single course page showing the header with title, course meta section, content area, and the beginning of the sessions list.

images/frontend-single-course.png

Registration Section

The registration section changes based on course status:

Status	Display
Open for Registration	Price display and "Register Now" button
Coming Soon	Notification signup form
Registration Closed	"Registration Closed" message with notification option
Already Enrolled	"You're enrolled" message with materials access

📸

Registration Section Variations

Composite screenshot showing three variations: Open registration with button, Coming Soon with notification form, and Enrolled state with checkmark.

images/registration-variations.png

Enrolled Student View

When a logged-in student who is enrolled views the course:

Registration section shows "You're enrolled" confirmation
Session materials are fully accessible
Online meeting links are visible
Materials can be downloaded or viewed inline

📸

Enrolled Student View

Screenshot of a course page as seen by an enrolled student, showing the "You're enrolled" badge, accessible materials with download links, and visible meeting link.

images/frontend-enrolled-view.png

Layout Options

Tabbed Layout

Content is organized into tabs: Content, Sessions, FAQs, Materials. Users click tabs to switch between sections.

📸

Tabbed Layout

Screenshot of a course page using tabbed layout, showing the tab bar with Content, Sessions, FAQs, and Materials tabs, with one tab active.

images/layout-tabbed.png

List Layout

All sections display vertically on a single scrolling page. Each section has its own heading.

📸

List Layout

Screenshot of a course page using list layout, showing all sections stacked vertically: description, then sessions section with header, then FAQs section.

images/layout-list.png

Changing Layout

Go to Classerna > Settings.
In the General tab, find "Course Layout".
Select "Tabbed" or "List".
Save Settings.

Styling & CSS

CSS Custom Properties

Classerna uses CSS custom properties (variables) for easy customization. Override these in your theme's CSS:

:root {
  /* Primary Colors */
  --clsn-primary: #2563EB;
  --clsn-primary-dark: #1D4ED8;

  /* CTA Buttons */
  --clsn-cta: #2563EB;
  --clsn-cta-hover: #1D4ED8;
  --clsn-cta-text: #FFFFFF;

  /* Text Colors */
  --clsn-text-primary: #111827;
  --clsn-text-secondary: #374151;

  /* Backgrounds */
  --clsn-bg-white: #FFFFFF;
  --clsn-bg-light: #F9FAFB;

  /* Borders */
  --clsn-border: #E5E7EB;

  /* Border Radius */
  --clsn-radius-sm: 6px;
  --clsn-radius-md: 8px;
  --clsn-radius-lg: 12px;
}

Common Customizations

Change Button Color

:root {
  --clsn-cta: #10B981;  /* Green buttons */
  --clsn-cta-hover: #059669;
}

Change Primary Accent Color

:root {
  --clsn-primary: #8B5CF6;  /* Purple accent */
  --clsn-primary-dark: #7C3AED;
}

Adjust Card Border Radius

:root {
  --clsn-radius-lg: 20px;  /* More rounded cards */
}

CSS Classes Reference

Class	Element
`.idcms-course-wrapper`	Main wrapper on single course page
`.idcms-courses-grid`	Course archive grid container
`.idcms-course-item`	Individual course card
`.idcms-register-button`	Register/CTA buttons
`.idcms-tabs-navigation`	Tab bar in tabbed layout
`.idcms-tab-btn`	Individual tab buttons
`.idcms-session-item`	Session list items
`.idcms-faqs-accordion`	FAQ accordion container
`.idcms-coming-soon-badge`	Coming Soon badge

Dark Theme Compatibility

Classerna includes a course wrapper with a light background to ensure readability on dark themes. If your theme is light, you can make the wrapper transparent:

.idcms-course-wrapper {
  background-color: transparent;
  padding: 0;
}

Tip: Always test your CSS customizations on multiple pages (archive, single course, My Courses) and in both logged-in and logged-out states.