Adding Custom CSS inside Fermion pages

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 the locations each of these values target with a help of a screenshot for easy visualization

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.

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.

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.