Skip to main content
Fermion provides a flexible way to customize the appearance of various components on its platform. By utilizing specific data attribute selectors, you can inject custom CSS to modify the default styles. This guide outlines the available selectors and demonstrates how to use them effectively.

​
How to Apply Custom CSS

To apply custom CSS to Fermion components, use the data-custom-css-class attribute with the appropriate selector. Here’s the general syntax: 
[data-custom-css-class='selector-name'] {
	/* Your custom CSS properties here */
}

​
Example

This example changes the background color of the completed lessons’ checkbox to green in the course items. 
[data-custom-css-class='course-item-mark-as-not-done-checkbox'] {
	background-color: 'darkgreen';
}

​
Currently Available Selectors

Below, we present a list of available values for the data-custom-css-class attribute that target specific locations on the Fermion platform.

​
Course Item Views

  • [data-custom-css-class="course-item-video"] - Targets video lessons
  • [data-custom-css-class="course-item-quiz"] - Targets quiz items
  • [data-custom-css-class="course-item-article"] - Targets article/read-only items
  • [data-custom-css-class="course-item-ebook"] - Targets embedded eBooks
  • [data-custom-css-class="course-item-contest"] - Targets contest/problem items
  • [data-custom-css-class="course-item-scorm"] - Targets SCORM packages
  • [data-custom-css-class="course-item-assignment"] - Targets assignment/homework items
  • [data-custom-css-class="course-item-iframe-embed"] - Targets generic iframe embeds
  • [data-custom-css-class="course-item-coding-lab"] - Targets coding lab items
  • [data-custom-css-class="course-item-live-event-fermion"] - Targets Fermion live events
  • [data-custom-css-class="course-item-live-class-fermion"] - Targets Fermion live classes
  • [data-custom-css-class="course-item-live-class-other"] - Targets non-Fermion live classes

​
Header Logo (Course Landing Page)

  • [data-custom-css-class="header-logo-course-landing-page-desktop"]
  • [data-custom-css-class="header-logo-course-landing-page-mobile"]

​
Header Logo (Website Pages)

  • [data-custom-css-class="header-logo-homepage-page-desktop"]
  • [data-custom-css-class="header-logo-homepage-page-mobile"]

​
Header Logo (Product Landing Page)

  • [data-custom-css-class="header-logo-product-landing-page-desktop"]
  • [data-custom-css-class="header-logo-product-landing-page-mobile"]

​
Learning Page

  • [data-custom-css-class="course-item-mark-as-done-checkbox"] - Targets the control to mark an item as complete
  • [data-custom-css-class="course-item-mark-as-not-done-checkbox"] - Targets the control to mark an item as incomplete

​
Learning Page (Sidebar Header)

  • [data-custom-css-class="header-logo-course-item-sidebar-mobile"]
  • [data-custom-css-class="header-logo-course-item-sidebar-desktop"]

​
Learning Page (Content Side)

  • [data-custom-css-class="course-item-main-area"] - This selector is the topmost parent class of the area where the user sees course item content.

​
Course Item Layout/Wrappers

  • [data-custom-css-class="course-item-main-area"] - Outer wrapper for the current course item content

​
Course Landing Page Sections

  • [data-custom-css-class="instructor-section-top"] - Top instructor information block
  • [data-custom-css-class="instructor-section-bottom"] - Bottom instructor information block
  • [data-custom-css-class="course-hero-section"] - Hero/header section of the course page
  • [data-custom-css-class="course-content-sections"] - Main content/what-you’ll-learn sections
  • [data-custom-css-class="course-reviews-grid"] - Reviews/testimonials grid container
  • [data-custom-css-class="course-faqs-container"] - FAQs accordion/container

​
Dynamic State and Type Marker

Pattern: course-item--state-${complete|incomplete}--type-${lowercase(item.type)}-v2
  • Use exact values to target specific combinations, for example:
[data-custom-css-class='course-item--state-complete--type-video-v2'] {
	/* Your custom CSS for completed video items */
}

[data-custom-css-class='course-item--state-incomplete--type-quiz-v2'] {
	/* Your custom CSS for incomplete quiz items */
}

​
Authentication Pages

  • [data-custom-css-class="login-page"] - Targets the login page at /login. Use this to customize background, fonts, and overall styling of the login page.
  • [data-custom-css-class="logout-page"] - Targets the logout page at /logout. Use this to customize page-level visuals while logging out.
  • [data-custom-css-class="register-page"] - Targets the registration page at /register. Use this to customize background, fonts, and overall styling of the registration page.
  • [data-custom-css-class="password-reset-page"] - Targets the password reset page at /password-reset. Use this to customize background, fonts, and overall styling of the password reset page.

​
Complete Example Configuration

Here’s a comprehensive example showing how to customize authentication pages with custom CSS(currently supports upto 20,000 characters for custom code injection): 
<style>
	/* Login page customization */
	[data-custom-css-class='login-page'] {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		font-family: 'Inter', sans-serif;
	}

	[data-custom-css-class='login-page'] .login-form {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 12px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	}

	/* Registration page customization */
	[data-custom-css-class='register-page'] {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		font-family: 'Poppins', sans-serif;
	}

	[data-custom-css-class='register-page'] .register-form {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 16px;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
	}

	/* Password reset page customization */
	[data-custom-css-class='password-reset-page'] {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		font-family: 'Roboto', sans-serif;
	}

	[data-custom-css-class='password-reset-page'] .reset-form {
		background: rgba(255, 255, 255, 0.92);
		border-radius: 10px;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	}

	/* Common button styling for all auth pages */
	[data-custom-css-class='login-page'] button,
	[data-custom-css-class='register-page'] button,
	[data-custom-css-class='password-reset-page'] button {
		background: linear-gradient(45deg, #667eea, #764ba2);
		border: none;
		border-radius: 8px;
		color: white;
		font-weight: 600;
		padding: 12px 24px;
		transition: all 0.3s ease;
	}

	[data-custom-css-class='login-page'] button:hover,
	[data-custom-css-class='register-page'] button:hover,
	[data-custom-css-class='password-reset-page'] button:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	}
</style>

​
Best Practices

  1. Specificity: When using these selectors, ensure your CSS rules are specific enough to override the default styles without affecting other elements unintentionally.
  2. Responsive Design: Consider both desktop and mobile selectors when making changes to ensure a consistent experience across devices.
  3. Testing: Always test your custom CSS on various screen sizes and browsers to ensure compatibility and proper rendering.

​
How to Access Custom CSS Settings

To apply custom CSS to your Fermion platform:
  1. Navigate to your Fermion dashboard
  2. Go to School Settings
  3. Scroll down to find the Custom Code Injection section
  4. Add your CSS code in the provided text area inside <style> tag
  5. Click Save to apply the changes
By leveraging these custom CSS selectors, you can tailor the Fermion platform to match your brand identity or specific design requirements. Remember to use these customization options judiciously to maintain a cohesive and user-friendly interface throughout your courses and website. For any further customization needs or questions about implementing these CSS modifications, please refer to the Fermion documentation or contact the support team.
⌘I