Customização de cores e imagem na Plataforma LMS


Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo: 


Para acessá-la, siga o seguinte caminho:

Passo 1. Para visualizar a ‘Identidade visual’, acesse “NEXT Dashboard > Next > Customizações visuais > Cores e imagens dos objetos”:

Passo 1.1. Você será redirecionado a página de definição de estilo, para que defina previamente o template da estilização. Você pode optar pelo:

Padrão: O template que já vem com a plataforma;

Personalizado: Caso queira modificar e editar esse template padrão.


Passo 1.2. Ao definir o template “personalizado”, clique em “salvar” e, logo após, clique no botão “Voltar à página anterior” para começar a estilizar os modais:


Passo 2. Menu superior:

Fundo do ícone principal: Ícone aonde está inserido o logo do projeto/empresa na view do treinando, acima do menu de navegação;

Fundo do cabeçalho: Todo o espaço superior do Dash;

Fundo da pesquisa: Campo de consulta aos usuários, ao lado do logo;

Cor do texto do usuário: Nome do usuário e escritas do XP e moedas da gamificação presentes no cabeçalho;

Cor do ícone: Ícone de lupa presente na pesquisa de usuários, no cabeçalho. E os ícones de notificações de conversas, amigos e notificações em geral.


Passo 3. Menu lateral:

Cor do ícone: Ícones presentes no menu de navegação do treinando;

Cor do ícone (mouse em cima): Ao passar o cursor do mouse em cima dos ícones há uma troca de cor;

Cor do texto: Nome dos ícones do menu lateral.


Passo 4. Ajuste dos títulos:

Cor do título: Título do cabeçalho dos modais.
Ex: Minhas trilhas, Categoria, Meus eventos, Benefícios, Minhas conquistas e Meus amigos.

Dimensões do banner: 1920x(240px até 400px) em .Jpeg (Quanto maior for a altura da imagem menor será o laço de repetição, caso o banner esteja com a animação ativa).

Visando garantir que a presença de imagens dentro das telas da plataforma NEXT não impactem negativa no consumo de recursos, a imagem acima possui um limite de tamanho de 5mb. 

Ativar animação: O banner ficará passando ao invés de ser uma imagem fixa.


Passo 5. Ajuste dos botões:

Cor do texto: Texto dos botões da view do treinando;

Cor do fundo: Cor do fundo dos botões;

Cor do texto (mouse em cima): Ao passar o cursor do mouse em cima do texto do botão há uma troca de cor;

Cor de fundo (mouse em cima): Ao passar o cursor do mouse em cima do botão há uma troca de cor.


Passo 6. Ajuste nos ícones:

Cor do ícone: ícones como os que estão presentes ao comentar ou curtir alguma publicação no feed e ícones presentes no calendário;

Cor do ícone (mouse em cima): Ao passar o cursor do mouse em cima do ícone há uma troca de cor.


Passo 7. Ajuste nos cards: Cards como os modais de cursos, categorias, benefícios e feed:

Cor do título: Título do Card;

Cor do título (mouse em cima): Ao passar o cursor do mouse em cima do título do card há uma troca de cor;

Cor do texto: Descrição/texto presente nos Cards;

Cor da data: Datas de publicações no feed.


Indicamos que utilize sites gratuitos disponíveis na internet para tratar suas imagens na questão de qualidade de criação, tamanho da imagem e espaço utilizado (kb ou Mb) antes de subir elas na plataforma LMS Next.

Dessa forma, irá garantir uma qualidade maior e eficiência ao carregar a imagem, trazendo uma melhor experiência para o treinando, segue algumas sugestões abaixo:

https://www.adobe.com/br/express/feature/image/resize

https://tinypng.com/

https://www.canva.com/pt_br/

https://www.nuvemshop.com.br/ferramentas/redimensionar-imagem


Customização dos cards
Você também customizar os cards de progresso da sua plataforma LMS NEXT, acesse este artigo pra saber mais:

https://skill.tomticket.com/kb/dashboard/novo-insercao-de-imagens-nos-cards-de-progresso-e-estilizacao-de-texto


Customização da Plataforma (Tela de login)
Customize também a tela login da sua plataforma LMS NEXT:

https://skill.tomticket.com/kb/dashboard/novo-mudar-layout-da-pagina-de-login-botao

https://skill.tomticket.com/kb/requisitos-sistema-next/novo-plataforma-com-a-identidade-visual-da-sua-empresa


Capa de categoria

Customize também as capas de suas categorias:

https://skill.tomticket.com/kb/cursos/novo-como-inserir-uma-imagem-de-capa-na-categoria


Atualizado em 16/05/2025