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.

​
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"]

​
Learning Page

  • [data-custom-css-class="course-item-mark-as-not-done-checkbox"] - refers to completed checkbox
  • [data-custom-css-class="course-item-mark-as-done-checkbox"] - refers to incomplete checkbox

​
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.

​
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="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: 
<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.