O CSS personalizado não é aplicado ao player de curso

Corrija passo a passo

1. Salve o CSS e recarregue a página da loja

Depois de editar a caixa CSS personalizado, clique em Salvar na barra de salvamento. O Alva Courses lê seu CSS sempre que o player de curso carrega, então não há nada a publicar. Recarregue a página da loja: uma página que já estava aberta não recebe a alteração sozinha.

A Visualização da loja nessa aba mostra o estilo do menu móvel, nunca o seu CSS personalizado.

2. Corrija erros de sintaxe

Uma mensagem vermelha abaixo da caixa, Não foi possível analisar o CSS. Verifique se há erros de sintaxe. ou uma que começa com O CSS pode conter erros de sintaxe, geralmente significa que o navegador descartou algumas regras. O CSS é salvo mesmo assim, como foi digitado, então as regras quebradas chegam à sua loja e não fazem nada.

Procure uma chave de fechamento ausente, que pode engolir todas as regras depois dela, e remova as tags <style>: a caixa aceita CSS puro. O Liquid não funciona aqui, então use URLs absolutas para os arquivos de fonte.

3. Confira se o seletor corresponde

Na sua loja, clique com o botão direito no elemento e escolha Inspecionar no seu navegador. Compare o ID e as classes reais dele com o seu seletor; o link Guia de seletores CSS abaixo da caixa lista os principais seletores do player.

Uma regra que aparece riscada no painel Estilos (Styles) perdeu para outra regra: veja as etapas 4 e 5. Uma regra que nem aparece não correspondeu ao elemento. Comece-a com #alva-courses e confira cada nome de classe.

4. Reforce as regras dentro de @media e de estados de hover

Uma regra que recebe apenas a cópia na folha de estilos precisa superar a folha de estilos do player. Termine cada declaração com !important e torne o seletor mais específico que a regra do player mostrada em Inspecionar: #alva-courses .lesson-content p em vez de #alva-courses p, por exemplo.

Alguns estilos do player são definidos no próprio elemento com !important, e nenhuma regra de folha de estilos vence esses. Mova essa regra para fora de @media, para o nível superior, onde a cópia inline se aplica. As telas de quiz definem as cores, os tamanhos de texto e os espaçamentos em cada elemento com !important e são desenhadas depois que a cópia inline é executada, então o CSS personalizado geralmente não consegue mudá-los. O Guia de seletores CSS também diz para não envolver as classes do menu móvel em @media.

5. Descarte o CSS do seu tema

O player de curso é executado dentro da página do seu tema, não em um frame separado, então as folhas de estilos do tema carregam junto com ele. Se Inspecionar mostrar uma regra do tema vencendo, torne seu seletor mais específico que o do tema.

6. Confira se o seu CSS chega a essa página

O CSS personalizado só chega à lista de cursos da loja e às páginas de curso, não à página de perfil do aluno, à página Meus cursos nas contas de clientes nem aos blocos de agradecimento e de status do pedido.

Pop-ups como a janela de conclusão do curso e o visualizador de imagens ficam fora de #alva-courses, então seletores que começam com ele não os alcançam. Os vídeos incorporados do YouTube, Vimeo e Loom são frames separados: seu CSS pode dimensionar o frame, não o que é reproduzido dentro dele.

7. Carregue a fonte que o seu CSS indica

Uma regra font-family só funciona se a fonte carregar. O Alva Courses carrega Montserrat e Poppins automaticamente quando seu CSS as indica; qualquer outra fonte só aparece se o seu tema ou o dispositivo do aluno já a tiver. Defina a fonte nos elementos que você quer alterar, e não apenas em #alva-courses: o player dá a cada elemento dentro dele uma fonte própria.

Para outra fonte web, coloque uma linha @import do Google Fonts bem no início da caixa ou adicione uma regra @font-face com uma URL absoluta da fonte. Um @import abaixo de qualquer outra regra é ignorado.