Como funciona
O Alva Courses estiliza o player de curso em dois níveis. As configurações de toda a loja em Configurações → Aparência valem para todos os cursos. A aba Configurações → Aparência de cada curso define se ele segue essas configurações ou usa a própria cor e fonte. As alterações salvas chegam aos alunos na próxima vez que carregarem ou atualizarem a página de um curso.
| Configuração | Toda a loja | Por curso |
|---|---|---|
| Cor de destaque | Cor padrão | Cores da marca, Personalização avançada de cores |
| Fonte | Fonte padrão | Default Font |
| Menu para celular | Estilo do Menu Móvel | Nenhuma |
| CSS personalizado | Estilos personalizados | Nenhuma |
Como personalizar a marca do player de curso
1. Defina a cor padrão
No admin do Shopify, abra Alva Courses → Configurações → Aparência. Em Cor padrão, digite um valor hexadecimal ou clique em Escolher cor para selecionar uma na janela Color Preview. Clique em Close e depois em Salvar na barra de salvamento.
Um curso só usa essa cor quando Use global color está marcado nesse curso. Caso contrário, ele mantém a própria cor (etapa 4).
2. Escolha a fonte padrão
Em Fonte padrão, escolha uma Família de fontes: Arial, Courier New, Georgia, Montserrat, Poppins, Times New Roman, Trebuchet MS ou Verdana. Montserrat e Poppins são carregadas do Google Fonts; as demais dependem das fontes instaladas no dispositivo do aluno.
A fonte vale para todos os cursos sem fonte própria e para os cursos com Use global font marcado. Padrão do sistema não define nenhuma fonte para toda a loja. Salve.
3. Escolha o estilo do menu para celular
Em Estilo do Menu Móvel, escolha como os alunos abrem a lista de aulas em telas com menos de 1.024 pixels de largura. A Visualização da loja logo abaixo mostra a sua escolha.
- Hambúrguer (Padrão): um botão quadrado na sua cor de destaque que abre a lista de aulas deslizando.
- Pílula (Cor de destaque): um botão arredondado Menu do curso na sua cor de destaque, fixo no topo enquanto os alunos rolam a página.
- Cabeçalho de navegação estrutural: uma barra de largura total com o nome da seção e da aula atuais, que exibe a lista de aulas logo abaixo dela. Também fica fixa no topo.
- Flutuante inferior direito: um botão Menu do curso fixo no canto inferior direito, onde pode entrar em conflito com widgets de chat.
Salve. Para alterar o texto de Menu do curso, use os textos da loja.
4. Dê a um curso a própria cor e fonte
Abra o curso e vá para Configurações → Aparência. Em Cores da marca, desmarque Use global color e escolha uma cor. Em Default Font, desmarque Use global font e escolha uma Font Family. Use global font fica esmaecido até você definir uma fonte para toda a loja.
Para um controle mais detalhado, clique em Ativar em Personalização avançada de cores. Um editor de cores é aberto, onde você define cores separadas para a barra lateral, o conteúdo, os botões, a barra de progresso, os campos e as bordas; Edit Colors o reabre depois. Ativar fica indisponível enquanto Use global color estiver marcado. Salve o curso.
Adicionar CSS personalizado
O CSS personalizado reestiliza tudo que as configurações acima não cobrem. Em Configurações → Aparência, digite as regras na caixa CSS personalizado, em Estilos personalizados, e salve. O Alva Courses as adiciona à lista de cursos e a todas as páginas de curso, onde elas substituem as configurações de cor e fonte.
O Alva Courses não restringe o seu CSS a um escopo. Ele o adiciona à página da loja exatamente como foi digitado, então um seletor genérico como h2 também reestiliza o seu tema. Comece cada seletor com #alva-courses, a raiz do player, ou com um ID do player, como #alva-course-sidebar.
Um banner Avisos de escopo de seletores lista até cinco seletores sem escopo, e a caixa sinaliza o CSS que não pode ser interpretado. Ambos são apenas avisos: o CSS é salvo como foi digitado, e a caixa não tem limite de tamanho.
Termine cada declaração com !important, pois o player define muitos dos próprios estilos dessa forma. O link Guia de seletores CSS abaixo da caixa lista os IDs e as classes que você pode usar. Dois exemplos seguros:
#alva-courses .lesson-content p { line-height: 1.7 !important; }aumenta o espaçamento entre as linhas dos parágrafos da aula.#alva-course-sidebar h2 { font-size: 22px !important; }redimensiona o título do curso no topo da barra lateral.
Para usar uma fonte fora da lista Família de fontes, coloque uma linha @import do Google Fonts bem no início, ou uma regra @font-face com uma URL absoluta da fonte (o Liquid não funciona aqui). Depois, indique a fonte em uma regra com escopo.
O que os alunos veem
Os alunos veem a sua cor de destaque na aula selecionada, nos ícones de conclusão, na barra de progresso, nos links das aulas, no botão Concluir e continuar e no menu para celular. A sua fonte aparece no título do curso, nos títulos das aulas e no texto das aulas.
Perguntas frequentes
Por que a minha Cor padrão não mudou em um curso?
Um curso segue a Cor padrão somente quando Use global color está marcado na aba Aparência do curso. Caso contrário, ele mantém a própria cor. Marque a opção, salve o curso e recarregue a página do curso.
Posso adicionar CSS personalizado a apenas um curso?
Não. Estilos personalizados é uma única configuração para toda a loja, que o Alva Courses adiciona à lista de cursos e a todas as páginas de curso. Para que um curso tenha outra aparência, dê a ele a própria cor e fonte na aba Aparência.
O meu CSS personalizado vai alterar o restante do meu tema?
Pode alterar. O Alva Courses adiciona o seu CSS à página da loja como foi digitado, então um seletor genérico como h2 também reestiliza os títulos do seu tema. Comece cada seletor com #alva-courses para mantê-lo dentro do player de curso.
Quando os alunos veem as minhas alterações?
No próximo carregamento da página. O Alva Courses lê as suas configurações de aparência sempre que o player de curso é carregado, então não há nada a publicar. Uma página que já estava aberta mantém o visual antigo até ser atualizada.
Veja também
Isso foi útil?
Última atualização 2026-10-09