How Alva Courses applies custom CSS
Alva Courses applies your custom CSS twice. It adds the whole text to the storefront page as a stylesheet, exactly as typed. Then it copies each plain, top-level rule onto the matching elements inside #alva-courses as inline !important styles, which beat the player's own.
Rules inside @media, hover and other state rules, ::before and ::after, and rules on #alva-courses itself get only the stylesheet copy, as do parts of a lesson drawn after it loads, such as quiz screens and a refreshed comments list. There they compete with the player's stylesheet, which sets many styles with !important.
Fix it step by step
1. Save the CSS and reload the storefront page
After editing the Custom CSS box, click Save in the save bar. Alva Courses reads your CSS each time the course player loads, so there is nothing to publish. Reload the storefront page: a page that was already open doesn't pick up the change by itself.
The Storefront Preview on that tab shows the mobile menu style, never your custom CSS.
2. Fix syntax errors
A red message under the box, CSS could not be parsed. Check for syntax errors. or one starting CSS may contain syntax errors, usually means the browser dropped some rules. The CSS still saves as typed, so the broken rules reach your storefront and do nothing.
Look for a missing closing brace, which can swallow every rule after it, and remove any <style> tags: the box takes plain CSS. Liquid doesn't work here, so use absolute URLs for font files.
3. Check that the selector matches
In your storefront, right-click the element and choose Inspect in your browser. Compare its real ID and classes with your selector; the CSS Selector Guide link under the box lists the player's main ones.
A rule shown crossed out in the Styles panel lost to another rule: see steps 4 and 5. A rule not shown at all didn't match. Start it with #alva-courses and check each class name.
4. Strengthen rules inside @media and hover states
A rule that gets only the stylesheet copy must outrank the player's stylesheet. End every declaration with !important and make the selector more specific than the player's rule shown in Inspect: #alva-courses .lesson-content p rather than #alva-courses p, for example.
Some player styles are set on the element itself with !important, and no stylesheet rule beats those. Move that rule out of @media to the top level, where the inline copy applies. Quiz screens set their colours, text sizes and spacing on each element with !important and are drawn after the inline copy runs, so custom CSS usually can't change those. The CSS Selector Guide also says not to wrap the mobile menu classes in @media.
5. Rule out your theme's CSS
The course player runs inside your theme's page, not in a separate frame, so your theme's stylesheets load alongside it. If Inspect shows a theme rule winning, make your selector more specific than the theme's.
6. Check that your CSS reaches that page
Custom CSS reaches only the storefront course list and course pages, not the student profile page, the My Courses page in customer accounts, or the thank-you and order status blocks.
Pop-ups such as the course-completion window and the image viewer sit outside #alva-courses, so selectors starting with it can't reach them. Embedded YouTube, Vimeo and Loom videos are separate frames: your CSS can size the frame, not what plays inside.
7. Load the font your CSS names
A font-family rule works only if the font loads. Alva Courses loads Montserrat and Poppins automatically when your CSS names them; any other font shows only if your theme or the student's device already has it. Set the font on the elements you want to change, not on #alva-courses alone: the player gives every element inside it a font of its own.
For another web font, put a Google Fonts @import line at the very top of the box, or add an @font-face rule with an absolute font URL. An @import below any other rule is ignored.
If you're still stuck
Email courses@alvaapps.com with the storefront page's address, the rule that isn't working, the element it should change and any red message under the Custom CSS box. A screenshot of the element in Inspect helps too.
Common questions
Why does my CSS work on desktop but not on mobile?
Alva Courses applies rules inside @media only through the stylesheet, where the player's own !important styles can win. Add !important to each declaration and use a more specific selector.
Does the Selector scope warnings banner stop my CSS working?
No. It lists up to five selectors that don't start with #alva-courses or another player prefix. Those rules still apply, but they can restyle your theme too.
Why does the box say my CSS may contain syntax errors when it looks fine?
The check compares a rough count of your rules with what the browser parsed, and an @media block holding more than one rule can trigger it on valid CSS. Inspect the element on your storefront to confirm.
Can custom CSS style the My Courses page in customer accounts?
No. Alva Courses applies custom CSS only to the storefront course list and course pages. Shopify draws the My Courses page and the thank-you and order status blocks without it.
See also
Was this helpful?
Last updated 2026-10-12