Como carregar arquivos personalizados JavaScript e CSS em uma conta?

[#1]

No Canvas, você pode usar o Editor de Tema para criar a marca da sua conta. No entanto, se você deseja aplicar alguma marca adicional que atualmente não é suportada no Editor de Tema, você pode carregar folhas de estilo em cascata (CSS) e arquivos JavaScript (JS) customizados para sua conta. Os arquivos são hospedados diretamente no Canvas. Qualquer tema aplicado à conta também é aplicável a todas as subcontas, embora seja possível carregar arquivos CSS/JS para subcontas individuais.

O Editor de Tema oferece suporte a upload de arquivos para desktop e dispositivos móveis. Arquivos CSS/JS padrão são aplicados a páginas HTML no aplicativo desktop do Canvas, que inclui a página de login para dispositivos móveis. Arquivos CSS/JS para dispositivos móveis são aplicados somente ao conteúdo de usuário exibido dentro dos aplicativos Canvas iOS ou Android, bem como em aplicativos de terceiros usando a API do Canvas, mas arquivos para dispositivos móveis não se aplicam ao conteúdo de usuário exibido em navegadores de dispositivos móveis.

Arquivos JavaScript e CSS personalizados estão sujeitos às mesmas regras de herança de marcas para conta e subconta, como ao criar um tema no Editor de Tema.

Antes de adicionar arquivos JavaScript e CSS personalizados, você deve contatar seu Gerente de Sucesso do Cliente para habilitar a marca personalizada para a sua conta ou subconta.

Riscos de Arquivo Personalizado

Se você não pode usar as opções do Editor de Tema nativo para a marca, você deve estar ciente dos riscos associados ao usar arquivos personalizados, que podem causar problemas de acessibilidade ou conflitos com futuras atualizações do Canvas:

• Você deveria ter conhecimento avançado de JavaScript e CSS e deve manter seu próprio código.  
• Arquivos personalizados podem entrar em conflito com as futuras alterações ao Canvas DOM (por exemplo: nomes de classe de elemento ou estrutura HTML) e, portanto, não são suportados. Instructure se isenta de qualquer responsabilidade por quaisquer alterações feitas em seus arquivos de substituição personalizados.
• Você é responsável por rever as diretrizes de acessibilidade de conteúdo para assegurar que seus arquivos atendam a qualquer teste de acessibilidade web ou outras normas de conformidade que possam ser exigidas na sua jurisdição. Você é responsável por tornar as suas modificações acessíveis a leitores de tela, usuários com contraste de texto e necessidades de contraste de cores, e usuários dependendo de Estilos de Alto Contraste como uma configuração de recurso do usuário.
• Quando experimentando com marca personalizada, confirme sempre suas marca mudanças no ambiente de sua instituição beta ou teste de ambiente.

Observações:

• O Editor de Tema não está disponível para contas Free-For-Teacher.
• Se você for um administrador da subconta e o link Temas (Themes) não estiver visível na Navegação da Conta (Account Navigation), Temas não foi habilitado para subcontas. Se a guia de Upload de CSS/JS não estiver visível, carregamentos de arquivos não foram habilitados para subcontas.

Abrir Conta

Na Navegação Global (Global Navigation), clique no link Admin [1], depois clique no nome da conta [2].

Abrir Temas

Na Navegação da Conta, clique no link de Temas (Themes).

Observação: Se tiverem sido habilitados temas de subconta, cada subconta também inclui um link Temas (Themes). Para abrir o Editor de Tema para uma subconta, clique no link Subcontas (Sub-Accounts) para localizar e abrir a subconta e, em seguida, clique no link Temas (Themes) da subconta.

Abrir Modelo de Tema

Se você ainda não tem um tema do Canvas para sua conta, use um modelo para criar um novo tema. Você pode escolher entre o modelo Padrão do Canvas, um modelo minimalista e um modelo U. Se seu Gerente de Sucesso do Cliente tiver habilitado a configuração de recurso específicos K12, o Tema K12 também aparece como um modelo.

Para criar um novo tema, passe o mouse sobre um modelo e clique no botão Abrir Editor de Tema (Open in Theme Editor) [1], ou clique no botão Adicionar Tema (Add Theme) [2] e selecione um modelo na lista.

Abrir Tema Salvo

Se você anteriormente criou e salvou um tema, você pode editar temas salvos a qualquer momento. Temas salvos aparecem 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 Tema (Open in Theme Editor) [1].

Para criar um novo tema baseado em um tema salvo, clique no botão Adicionar tema (Add Theme) [2] e selecione o nome do tema salvo a partir da lista [3]. Essa opção ajuda a evitar a substituição de seu tema salvo anteriormente.

Abrir guia Carregar

Na barra lateral do Editor de Tema, clique na guia Carregar (Upload).

Upload de Arquivos Personalizados

Para enviar arquivos para o aplicativo desktop do Canvas, localize os títulos dos arquivos JavaScript/CSS [1]. Para fazer upload de arquivos para conteúdo de usuário em aplicativos móveis e de terceiros do Canvas, localize os títulos dos arquivos CSS/JavaScript para aplicativo móvel [2].

Localize o tipo de arquivo que deseja enviar e clique no botão Selecionar (Select) [3] e, em seguida, localize o arquivo no seu computador.

Localize arquivos adicionais para o upload, se necessário.

Pré-visualizar o Tema

Para pré-visualizar o seu tema, clique no botão Pré-visualizar Suas Modificações (Preview Your Changes).

O Canvas gerará a pré-visualização dos componentes com base em seus arquivos carregados.

Gerenciar Arquivos

Para gerenciar seus arquivos, clique na guia de Upload novamente [1].

Para remover e carregar um novo arquivo, clique no ícone de Remover (Remove) [2]. Você pode fazer alterações adicionais e fazer upload de seu arquivo revisado.

Para exibir o código do seu arquivo, clique no link Exibir Arquivo (View File) [3]. Como o arquivo é armazenado diretamente no Canvas, use este link se você precisar fazer o download do arquivo.

Salvar Tema

Uma vez que você estiver satisfeito com as alterações do modelo, salve seu tema clicando no botão Salvar Tema (Save Theme).

Criar Nome do Tema

Se você modificou um tema a partir de um modelo, o Editor de Tema cria uma cópia do tema. 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 (Save Theme) [2].

Observação: Se você editou um tema salvo anteriormente, salvando o tema substituirá a versão anterior do tema e usará o mesmo nome do tema.

Aplicar Tema

Para aplicar o seu tema em sua conta, clique no botão Aplicar tema (Apply theme) [1].

Para sair do tema e retornar para a página de Temas, clique no botão Sair (Exit) [2]. Você pode abrir o tema e aplicá-lo a sua conta a qualquer momento.

Nota: Se a sua conta permitir que subcontas personalizem os seus próprios temas, quaisquer alterações aplicáveis feitas também serão filtradas para quaisquer subcontas associadas. O Canvas mostra o status das suas atualizações do Editor de Temas; quando o processo para cada subconta estiver concluído, a subconta desaparece da janela de progresso. Quando todas as subcontas tiverem sido atualizadas, o Editor de Temas redireciona de volta para a página Temas.