No Canvas, você pode usar o Editor de Temas para personalizar a identidade visual da sua conta. No entanto, se desejar aplicar elementos visuais adicionais que não são suportados pelo Editor de Temas, você pode fazer o upload de arquivos CSS (folhas de estilo em cascata) e JS (JavaScript) personalizados para a sua conta. Os arquivos são hospedados diretamente no Canvas. Qualquer tema aplicado à conta também se aplica a todas as subcontas, embora você possa fazer o upload de arquivos CSS/JS para subcontas individuais.
O Editor de Temas suporta o upload de arquivos para desktop e dispositivos móveis. Arquivos CSS/JS padrão são aplicados às páginas HTML no aplicativo Canvas para desktop, incluindo a página de login para dispositivos móveis. Arquivos CSS/JS para dispositivos móveis são aplicados apenas ao conteúdo do usuário exibido nos aplicativos Canvas para iOS ou Android, bem como em aplicativos de terceiros que utilizam a API do Canvas, mas não se aplicam ao conteúdo do usuário exibido em navegadores móveis.
Os arquivos JavaScript e CSS personalizados estão sujeitos às mesmas regras de herança de marca da conta e da subconta que são aplicadas na criação de um tema no Editor de Temas.
Antes de adicionar arquivos JavaScript e CSS personalizados, você deve entrar em contato com seu Gerente de Sucesso do Cliente para habilitar a personalização da marca para sua conta e quaisquer subcontas. Após a habilitação da personalização da marca, a opção de fazer upload de arquivos CSS e JS personalizados estará disponível na conta e em todas as subcontas.
Riscos de Arquivos Personalizados
Se não for possível usar as opções nativas do Editor de Temas para personalização da marca, é preciso estar ciente dos riscos associados ao uso de arquivos personalizados, que podem causar problemas de acessibilidade ou conflitos com futuras atualizações do Canvas:
- Você deve ter conhecimento avançado de JavaScript e CSS e ser capaz de manter seu próprio código.
- Arquivos personalizados podem entrar em conflito com alterações futuras no DOM do Canvas (por exemplo: nomes de classes de elementos ou estrutura HTML) e, portanto, não são suportados. A Instructure se isenta de qualquer responsabilidade por quaisquer alterações feitas em seus arquivos de sobreposição personalizados.
- É sua responsabilidade revisar as diretrizes de acessibilidade de conteúdo da web para garantir que seus arquivos atendam a quaisquer testes de acessibilidade da web ou outros padrões de conformidade que possam ser exigidos em sua jurisdição. Você é responsável por tornar suas modificações acessíveis a leitores de tela, usuários com necessidades de contraste de texto e de cores e usuários que dependem de Estilos de Alto Contraste como uma configuração de recurso do usuário .
- Ao experimentar com identidade visual personalizada, sempre confirme as alterações de marca no ambiente beta ou de teste da sua instituição.
Notas:
- O Editor de Temas não está disponível para contas gratuitas para professores.
- Se você for administrador de uma subconta e o link "Temas" não estiver visível na Navegação da Conta, significa que os Temas não foram habilitados para subcontas. Se a aba "Upload de CSS/JS" não estiver visível, significa que o upload de arquivos não foi habilitado para subcontas.
00:07: Como faço para enviar arquivos JavaScript e CSS personalizados para uma conta?
00:11: Na Navegação Global, clique no link Administrador e, em seguida, clique no nome da conta.
00:17: Nas Configurações da conta, clique no link Temas.
00:21: Se você já criou e salvou um tema, pode editá-lo a qualquer momento. Os temas salvos são exibidos na seção Meus Temas. Para abrir um tema salvo, passe o cursor sobre o nome do tema e clique no botão Abrir no Editor de Temas.
00:37: Ou clique no botão Adicionar Tema. Você também pode criar um tema com base em um modelo salvo.
00:43: Para criar um novo tema com base em um tema salvo, clique no botão Adicionar Tema e selecione o nome do tema salvo na lista. Essa opção ajuda a evitar a sobrescrita do tema salvo anteriormente.
00:56: Na barra lateral do Editor de Temas, clique na aba Carregar.
01:00: Para carregar arquivos para o aplicativo Canvas para desktop, localize os cabeçalhos dos arquivos CSS ou JavaScript.
01:08: Para carregar arquivos de conteúdo do usuário em aplicativos móveis Canvas e de terceiros, localize os cabeçalhos do arquivo CSS ou do arquivo JavaScript do aplicativo móvel.
01:18: Localize o tipo de arquivo que deseja enviar e clique no botão Selecionar. Em seguida, localize o arquivo no seu computador.
01:26: Localize arquivos adicionais para upload, se necessário.
01:30: Para pré-visualizar seu tema, clique no botão "Pré-visualizar suas alterações".
01:34: O Canvas irá gerar a pré-visualização dos componentes com base nos arquivos que você carregou.
01:40: Para gerenciar seus arquivos, clique novamente na guia Carregar.
01:44: Para remover e carregar um novo arquivo, clique no ícone Remover. Você pode fazer alterações adicionais e carregar o arquivo revisado.
01:52: Para visualizar o código do seu arquivo, clique no link "Visualizar Arquivo".
01:55: Como o arquivo está armazenado diretamente no Canvas, use este link caso precise baixá-lo.
02:02: Quando estiver satisfeito com as alterações do seu modelo, salve o tema clicando no botão Salvar Tema.
02:08: Se você modificou um tema a partir de um modelo, o Editor de Temas cria uma cópia do tema. Os modelos não podem ser editados diretamente. No campo Nome do Tema, insira um nome para o seu tema. Clique no botão Salvar Tema.
02:22: Para aplicar o tema à sua conta, clique no botão Aplicar tema.
02:27: Para sair do tema e retornar à página de Temas, clique no botão Sair. Você pode abrir o tema e aplicá-lo à sua conta a qualquer momento.
02:36: Este guia abordou como fazer o upload de arquivos JavaScript e CSS personalizados para uma conta.
Abrir conta
Na Navegação Global, clique no link Admin [1] e, em seguida, clique no nome da conta [2].
Temas abertos
Na Navegação da Conta, clique no link Temas .
Observação: Se os temas de subconta estiverem ativados, cada subconta também incluirá um link "Temas" . Para abrir o Editor de Temas de uma subconta, clique no link "Subcontas" para localizar e abrir a subconta e, em seguida, clique no link "Temas" da subconta.
Modelo de tema aberto
Se você ainda não possui um tema Canvas para sua conta, use um modelo para criar um novo tema. Você pode escolher entre o modelo Canvas padrão, um modelo minimalista e um modelo State U. Se o seu Gerente de Sucesso do Cliente tiver habilitado a configuração de recurso específica para o Ensino Fundamental e Médio (K12), o Tema K12 também aparecerá como um modelo.
Para criar um novo tema, passe o cursor sobre um modelo e clique no botão Abrir no Editor de Temas [1], ou clique no botão Adicionar Tema [2] e selecione um modelo da lista.
Abrir tema salvo
Se você criou e salvou um tema anteriormente, pode editá-lo a qualquer momento. Os temas salvos são exibidos na seção Meus Temas. Para abrir um tema salvo, passe o mouse sobre o nome do tema e clique no botão Abrir no Editor de Temas [1].
Para criar um novo tema baseado em um tema salvo, clique no botão Adicionar tema [2] e selecione o nome do tema salvo na lista [3]. Esta opção ajuda você a evitar sobrescrever seu tema salvo anteriormente.
Abra a aba de upload.
Na barra lateral do Editor de Temas, clique na aba "Carregar" .
Carregar arquivos personalizados
Para carregar arquivos para o aplicativo Canvas para desktop, localize os cabeçalhos de arquivo CSS/arquivo JavaScript [1]. Para carregar arquivos de conteúdo do usuário em aplicativos Canvas para dispositivos móveis e de terceiros, localize os cabeçalhos de arquivo CSS/arquivo JavaScript do aplicativo móvel [2].
Localize o tipo de arquivo que deseja carregar e clique no botão Selecionar [3], depois localize o arquivo em seu computador.
Localize arquivos adicionais para upload, se necessário.
Tema de pré-visualização
Para pré-visualizar o seu tema, clique no botão "Pré-visualizar as suas alterações" .
O Canvas irá gerar a pré-visualização dos componentes com base nos arquivos que você carregou.
Gerenciar arquivos
Para gerenciar seus arquivos, clique novamente na guia Carregar [1].
Para remover e carregar um novo arquivo, clique no ícone Remover [2]. Você pode fazer alterações adicionais e carregar seu arquivo revisado.
Para visualizar o código do seu arquivo, clique no link Visualizar Arquivo [3]. Como o arquivo está armazenado diretamente no Canvas, use este link se precisar baixar o arquivo.
Salvar tema
Quando estiver satisfeito com as alterações no seu modelo, salve o tema clicando no botão Salvar Tema .
Criar nome do tema
Se você modificou um tema a partir de um modelo, o Editor de Temas cria uma cópia do tema. Os modelos não podem ser editados diretamente. No campo Nome do Tema [1], insira um nome para o seu tema. Clique no botão Salvar Tema [2].
Observação: Se você editou um tema salvo anteriormente, salvar o tema sobrescreve a versão anterior, mantendo o mesmo nome.
Aplicar tema
Para aplicar o tema à sua conta, clique no botão Aplicar tema [1].
Para sair do tema e retornar à página de Temas, clique no botão Sair [2]. Você pode abrir o tema e aplicá-lo à sua conta a qualquer momento.
Observação: Se sua conta permitir que subcontas personalizem seus próprios temas, quaisquer alterações aplicáveis feitas por você também serão aplicadas a todas as subcontas associadas. O Canvas mostra o status das atualizações do Editor de Temas; quando o processo de cada subconta for concluído, a subconta desaparecerá da janela de progresso. Quando todas as subcontas forem atualizadas, o Editor de Temas redirecionará você de volta para a página de Temas.
