Este documento aborda os componentes usados para criar temas personalizados do Canvas para uma instituição.
O Editor de Temas permite que os administradores criem temas personalizados do Canvas para sua instituição, usando cores e imagens. No entanto, imagens, logotipos e marcas d'água não aparecem para usuários que ativam a configuração de recurso de usuário "Estilos de Alto Contraste". Para obter ajuda específica com arquivos de imagem, consulte o [link para a documentação].Documento de recursos do Editor de Temas Canvas: Modelos de Imagem.
Arquivos CSS e JavaScript personalizados também podem ser carregados no Editor de Temas para a visualização HTML e a visualização do aplicativo Canvas, respectivamente. No entanto, esteja ciente de que arquivos personalizados podem sobrescrever quaisquer cores compatíveis com estilos de alto contraste; por exemplo, alterar a cor de um link para vermelho em um arquivo CSS personalizado também será exibido em vermelho para usuários com estilos de alto contraste, o que pode causar problemas de acessibilidade. Conforme observado na janela de upload do Editor de Temas, usar arquivos CSS/JS personalizados é uma opção, mas significa que você é responsável por manter qualquer código que crie um conflito com o que o Canvas suporta no Editor de Temas.
Salvo indicação em contrário, os seguintes componentes do Editor de Temas aplicam-se à versão web do Canvas. Alguns componentes de Identidade Visual Global e Navegação Global também se aplicam aos aplicativos móveis do Canvas.
Marca Global
Cor principal da marcaCor primária usada em todo o Canvas, principalmente nos links de navegação do curso e no ícone de alternância do Painel. Usada nos aplicativos Canvas Student e Canvas Teacher para navegação global, caixa de entrada e cores de seleção de curso. O valor padrão é #008ee2.
Cor do texto principalCor do texto usada em todo o Canvas. Usada ao inserir texto na página de login dos aplicativos Canvas Student, Canvas Teacher e Canvas Parent. O valor padrão é #2d3b45.
Cor do linkCor para hiperlinks usada em todo o Canvas. Usada para ícones de links externos e ícones de download. Também aparece no link "Esqueci minha senha" da página de login para dispositivos móveis. O valor padrão é #008ee2.
Botão principalCor para os botões principais no Canvas;Se nenhuma cor for definida, o botão principal assume a cor principal. Essa funcionalidade é usada para personalizar a cor de botões e links nos aplicativos Canvas Student e Canvas Teacher. Também é usada para a cor do botão "Entrar" nos aplicativos Canvas Student, Canvas Teacher e Canvas Parent.
Texto do botão principalCor do texto exibido nos botões principais. Usada para o texto do botão "Entrar" nos aplicativos Canvas Student, Canvas Teacher e Canvas Parent. O valor padrão é #ffffff.
Botão secundárioCor para os botões secundários no Canvas.O valor padrão é #2d3b45.Este componente não é usado atualmente na interface Canvas.
Texto do botão secundárioCor do texto exibido nos botões secundários. O valor padrão é #ffffff.Este componente não é usado atualmente na interface Canvas.
Navegação Global
Navegação em segundo planoCor de fundo no Menu de Navegação Global. Também usada para colorir o fundo da barra de endereços em navegadores da web. O valor padrão é #394b58.
Ícone de navegaçãoCor dos ícones no Menu de Navegação Global. Também usada para colorir os ícones de Visibilidade e Configurações no SpeedGrader. O valor padrão é #ffffff.
Ícone de navegação ativoCor do ícone ativo (selecionado) no Menu de Navegação Global. Se nenhuma cor for definida, o ícone ativo de navegação assume a cor primária.
Texto de navegaçãoCor do texto no Menu de Navegação Global. Também usada para colorir o texto da barra de navegação superior nos aplicativos Canvas Student e Canvas Teacher. Além disso, a cor do texto de navegação é usada para colorir o ícone do Livro de Notas no SpeedGrader. O valor padrão é #ffffff.
Texto de navegação ativoCor do texto ativo no Menu de Navegação Global. Se nenhuma cor for definida, o Texto Ativo da Navegação assume a cor do Link.
Borda do Avatar de NavegaçãoCor usada para a borda ao redor do ícone do link da conta. O valor padrão é #ffffff.
Emblema de navegação:Cor usada para o indicador de mensagens não lidas no ícone da Caixa de Entrada. Se nenhuma cor for definida, o indicador de navegação assume a cor primária.
Emblema de navegação ativoCor do indicador ativo (selecionado) no Menu de Navegação Global. Se nenhuma cor for definida, o indicador ativo assume a cor primária.
Texto do emblema de navegaçãoCor usada para o número de mensagens não lidas no ícone da Caixa de Entrada. Se nenhuma cor for definida, o indicador de navegação assume a cor primária.
Texto do emblema de navegação ativoCor do texto ativo no Menu de Navegação Global. Se nenhuma cor for definida, o Texto Ativo do Indicador de Navegação assume a cor do link.
Fundo do logotipo de navegaçãoCor de fundo do logotipo no Menu de Navegação Global. O valor padrão é #394b58.
Logotipo de navegaçãoLogotipo na parte superior do Menu de Navegação Global (compatível com arquivos SVG, PNG e JPG). Também usado como logotipo na barra de navegação superior dos aplicativos Canvas Student e Canvas Teacher em dispositivos iOS. O padrão é o logotipo do Canvas.
Marcas d'água e outras imagens
Marca d'águaImagem de fundo clara que aparece atrás do conteúdo da página; o tamanho de exibição é subjetivo e depende do tamanho do arquivo carregado. Portanto, se a imagem for muito pequena ou muito grande para sua preferência de design, redimensione-a conforme necessário (compatível com arquivos PNG, SVG, GIF e JPG). A opção padrão é sem imagem.
Opacidade da marca d'água:Opacidade (transparência) da sua marca d'água. O padrão é 100% (sem transparência da imagem).
FaviconÍcone pequeno exibido na aba do navegador (compatível com arquivos ICO de 16x16, 32x32 e 48x48). O padrão é o favicon Canvas.
Ícone da tela inicial do celularÍcone exibido quando o Canvas é adicionado aos favoritos de um navegador em um dispositivo móvel (compatível com arquivos PNG de 180x180). O ícone padrão é o ícone de toque da Apple.
Usuários de versões mais recentes do Windows (8+) podem fixar sites e aplicativos na tela inicial de seus telefones Windows. Os campos do Windows são opcionais, mas permitem oferecer opções de personalização aos usuários do Windows Phone. No entanto, os ícones do Windows ainda exibem o favicon definido no Editor de Temas, se houver.
Cor do azulejo do WindowsCor do bloco do Windows. Se nenhuma cor for definida, a cor do bloco do Windows assumirá a cor primária.
Imagem quadrada de azulejo do WindowsImagem para a versão quadrada do bloco do Windows (suporta 1,8 vezes o tamanho padrão do bloco (arquivos SVG, PNG, JPG e GIF de 558x558). A imagem padrão é a do bloco do Windows).
Imagem de mosaico do Windows WideImagem para a versão ampla do bloco do Windows (compatível com arquivos SVG, PNG, JPG e GIF de 558x270). A imagem padrão é a do bloco do Windows.
Logotipo da barra lateral direitaO logotipo é exibido acima da barra lateral direita no Painel de Controle do Canvas, mas, quando visualizado em tablets ou em janelas de navegador com resoluções de tela menores, o logotipo não fica visível devido a limitações de espaço; o tamanho de exibição é subjetivo e depende do tamanho do arquivo carregado, mas o tamanho de imagem preferencial é 360x140 (compatível com SVG, PNG, JPG e GIF). A opção padrão é sem imagem.
Tela de login
A página de login móvel não é atualmente compatível com os componentes da tela de login, mas oferece suporte limitado à personalização da marca por meio dos componentes de Identidade Visual Global. Observe que os links de login único herdam as configurações do Editor de Temas.
Cor de fundo:Cor do fundo da tela de login. O valor padrão é #394b58.
Imagem de fundo:Imagem para o fundo da tela de login. O padrão é nenhuma imagem.
Sombra corporal:Cor para a sombra do corpo. O valor padrão é #2d3b45.
Logotipo de login:Logotipo exibido na parte superior da página de login. O padrão é o logotipo do Canvas.
Fundo da caixa superiorCor para a caixa externa ao redor do logotipo, formulário e rodapé do Canvas. O padrão é sem cor.
Borda superior da caixa:Cor da borda da caixa superior. O padrão é nenhuma cor.
Fundo da caixa internaCor para a caixa interna ao redor do logotipo, formulário e rodapé do Canvas. O padrão é sem cor.
Borda da caixa interna:Cor da borda da caixa interna. O padrão é nenhuma cor.
Fundo do formulário:Cor do fundo atrás do rótulo de login e dos campos de senha, do link "Esqueci minha senha" e do botão "Entrar". O padrão é sem cor.
Borda do formulário:Cor da borda ao redor do fundo do formulário. O padrão é nenhuma cor.
Etiqueta de login:Cor para o rótulo de login, senha e texto da caixa de seleção "Permanecer conectado". O valor padrão é #ffffff.
Cor do link de login:Cor para o contorno do botão de login, texto do botão de login, links da caixa interna, contorno do botão de logout e texto do botão de logout. O valor padrão é #ffffff.
Link para o rodapé da sessão de login:Cor dos links do rodapé. O valor padrão é #ffffff.
Link de rodapé de login ao passar o mouse:Cor dos links do rodapé ao passar o cursor sobre eles. O valor padrão é #ffffff.
Login com o logotipo da Instructure:Cor para o logotipo da By Instructure. O valor padrão é #ffffff.
Este recurso também pode ser acessado nos seguintes Guias do Canvas: