Developer notes: templates and styling

Theme template overrides, branding tokens as CSS custom properties, and class names for the registration form and interactive elements.

Nothing here is needed to run the plugin. It’s the short list a theme or page builder specialist will ask about.

Template overrides

A theme can replace any of the plugin’s templates by supplying its own in a the-nonprofit-lms/ folder (child theme first, then parent). The course page goes in as the-nonprofit-lms/single-lms_course.php, and shortcode and partial templates use their own file names in the same folder. The standard theme root single-lms_course.php also works.

The post type is lms_course and the course category taxonomy is lms_category. Public names use the nonprofit-lms prefix for CSS classes, nonprofit_lms_ for hooks and filters, and nonprofit-lms/v1 for the REST namespace.

Branding tokens

Whatever the site owner sets under Settings, then Branding, is output as CSS custom properties on the plugin’s own .nonprofit-lms wrappers, never on :root. Every rule in the plugin’s stylesheets reads one, with the shipped value as the fallback, so a page still renders in the default colors if the tokens are ever missing.

Seven tokens come from the owner’s single color and carry contrast floors: --nonprofit-lms-primary, --nonprofit-lms-primary-on (text on a primary fill), --nonprofit-lms-primary-hover, --nonprofit-lms-primary-ink (brand color as text on the page), --nonprofit-lms-primary-soft, --nonprofit-lms-primary-soft-ink and --nonprofit-lms-focus-ring. --nonprofit-lms-radius-control carries the corner roundness.

If you extend this, a focus ring uses focus-ring unless it’s drawn on a dark fill, where it uses focus-ring-inverse. A theme override that drops the nonprofit-lms root class simply gets the fallbacks.

The course page

When the plugin lays out the course page, the container carries the class nonprofit-lms-single-course--contained and two custom properties, --nonprofit-lms-landing-max-width and --nonprofit-lms-landing-image-max-height. No layout property is forced, so your theme can override any of it.

The registration form

Every field on the registration form is wrapped in a div with the classes nonprofit-lms-register__field, nonprofit-lms-register__field--{type} and nonprofit-lms-register__field--{key}, plus the id nonprofit-lms-field-{key}. The control inside carries nonprofit-lms-register__input and nonprofit-lms-register__input--{type}.

A field’s key is shown on its row under Settings, then Profile Fields. It’s the label as a slug (like organization-name) and never changes once created. Radio, checkbox, date, address and name fields are fieldsets named by their legend, with part classes such as nonprofit-lms-register__address-part--city and nonprofit-lms-register__name-part--first. An Other text box carries nonprofit-lms-register__other-input. The form owns its field spacing (.nonprofit-lms-register__field { margin: 0 0 16px }).

The same pattern applies on the WordPress login page form and the admin profile screen.

Interactive elements

On the student side, every element’s root carries nonprofit-lms-interaction and a type class (nonprofit-lms-interaction--click-reveal, --checkbox, --expandable or --slideshow), plus nonprofit-lms-interaction--completed once done, plus whatever the author typed into the element’s CSS class box. An element placed inside the lesson text sits in a nonprofit-lms-lesson__interactions--inline wrapper between nonprofit-lms-lesson__content blocks. Elements that aren’t placed stack in nonprofit-lms-lesson__interactions at the end.

Still stuck?

Search the knowledgebase for another angle, or head to support. Pro customers can open a ticket there.