Customize Style
This article helps Skilljar Starter admins apply branding, colors, button styles, fonts, card layouts, and custom CSS to align the Catalog Page with their organization's visual identity.
Overview
The Style menu in the Skilljar Starter admin toolbar provides a structured way to customize the look and feel of a Catalog Page. Style options are grouped into six categories: Branding, Colors, Buttons, Fonts, Cards, and Custom CSS. Each category opens a dedicated configuration panel where you can adjust the relevant settings.
Together, these options enable both no-code styling for most use cases and full CSS overrides for advanced customization.
You can customize the following aspects of a Catalog Page:
- Branding
- Colors
- Buttons
- Fonts
- Cards
- Custom CSS
Configure Branding
Branding settings control the high-level identity elements that appear on the Catalog Page, such as the logo and favicon.
To configure the branding of the catalog page:
- On your Catalog Page, in the admin toolbar at the bottom of the page, click Style.
- From the Style menu, select Branding. The Branding configuration slide-out panel appears.
- Update the branding fields available in the panel such as logo image, favicon, and brand name.
- Save your changes.
Configure Colors
Color settings control the color palette used across page elements (such as primary, secondary, background, and accent colors).
- From the Style menu, select Colors. The Colors configuration panel appears.
- Update the color values using HEX codes that match your brand palette.
- Save your changes. The Catalog Page updates with the new color values.
Note: Use Preview State to check that the new colors render correctly for all four learner scenarios (No enrollments, One item in progress, Items in mixed progress states, Multiple items completed).
Configure Buttons
Button settings control the visual style of buttons across the Catalog Page, including primary action buttons such as Enroll and Resume.
- From the Style menu, select Buttons. The Buttons configuration panel appears.
- Adjust the available button properties (such as background color, text color, border, and corner radius).
- Save your changes.
Configure Fonts
Font settings control the typography used across the Catalog Page, including headings and body text.
- From the Style menu, select Fonts. The Fonts configuration panel appears.
- Select a font family and configure the size and weight options as needed.
- Save your changes. The new typography is applied across the Catalog Page.
Configure Cards
Card settings control how individual course cards appear on the Catalog Page (such as card background, border, shadow, and image placement).
- From the Style menu, select Cards. The Cards configuration panel appears.
- Adjust the available card properties to match your visual design.
- Save your changes.
Apply Custom CSS
Custom CSS allows advanced admins to override the default Skilljar Starter styles when the no-code options are not sufficient. To keep your CSS robust and to minimize the risk of broken styles after platform updates,
Skilljar does not recommend using custom CSS. Incorrectly applied custom CSS can cause existing custom code to stop working.
Open the Custom CSS editor
- From the Style menu, select Custom CSS. The Custom CSS editor opens.
- Enter your CSS in the editor, following the guidelines.
- Save your changes. The new styles are applied to the Catalog Page.
- Begin with overriding CSS variables: CSS variables are a resilient way to apply custom styles because they let you change properties such as colors, borders, and border radii without targeting HTML elements directly. This reduces the risk of styles breaking when the underlying markup changes.
- Start your styles with specific identifiersTo ensure your custom CSS does not conflict with existing platform styles and to avoid specificity issues, scope each rule with a parent identifier. For example:#customcss #root .your-css-selector { /* your custom styles */ }
- Using these identifiers gives your code sufficient specificity and provides flexibility if the underlying markup changes.
- Use data-css-anchor attributes as selectors: Where available, scope your styles using data-css-anchor attributes such as #customcss #root [data-css-anchor="name"]. These attributes represent stable modules in the codebase and provide a more reliable way to target elements than CSS classes that may change between releases.
- Avoid sibling and child combinators: To keep CSS simple and resilient to markup changes, avoid using the sibling (~), child (>), and adjacent sibling (+) combinators. Prefer the descendant combinator (space). This makes your styles more flexible if the HTML structure changes.
- Do not manipulate the DOM: Custom CSS and scripts should not modify the DOM (for example, by adding or removing classes or attributes from HTML elements). DOM manipulation leads to inconsistencies and conflicts that are difficult to support across future product updates.
- Do: Use existing classes and data attributes as selectors in your CSS.
- Don't: Add, remove, or alter classes or attributes on HTML elements.
It is recommended to test all Custom CSS changes across the four Preview States and across desktop and mobile breakpoints before publishing.