Este artigo também está disponível em:
Com os planos Corporate e Enterprise Owl, é possível editar o CSS do seu conteúdo de aprendizado.

Você pode querer mudar as fontes, cores, formas de botões e o fundo de seus testes e cursos criados com o Easy LMS. Uma maneira de fazer isso é ajustar as configurações na aba Styling, mas você pode querer fazer ainda mais mudanças do que aquelas diretamente disponíveis.

O acesso ao CSS permite que você mude a forma como o conteúdo online é apresentado, como cores, fontes, tamanhos de fontes, formas de botões, etc. Para ter acesso a este recurso, você precisa ter um plano Corporate ou Enterprise Owl.

Dependendo de suas habilidades CSS, há muitas mudanças que você pode fazer na interface dos seus testes. Nós tivemos clientes que mudaram a aparência da barra de tempo, adicionaram transições animadas e outras coisas ótimas através de CSS personalizados.

Testes, Avaliações e Cursos

Se você quiser personalizar o CSS para o seu Quiz, Assessment, ou Curso, envie-nos uma mensagem. Se a mudança for simples (como alterar o tamanho da fonte), nós podemos fazer isso imediatamente.

Se você precisar de mais mudanças, nós lhe enviaremos um arquivo 📂 para personalização para que você possa enviá-lo de volta para nós, e nós então aplicaremos as mudanças em sua conta. Por favor, envie sua solicitação através do chat.

As mudanças no CSS podem ser aplicadas, especificamente a um Quiz, Avaliação ou Curso , ou em toda a sua conta (se você quiser usar as mesmas configurações para cada peça de conteúdo que você criar). O CSS pode ser salvo como uma lista em um documento de bloco de notas e enviado para nós. Nós iremos então implementá-lo em sua conta.

Exames

Você pode editar o CSS do seu Exame diretamente da sua conta. Vá para o seu Exam > Create > Styling > Custom CSS:



Na aba File manager, você também pode carregar suas fontes e imagens para uso na folha de estilo CSS (confira este artigo para saber mais):



Apenas para dar um exemplo, este é o link para um Exame que foi estilizado com as configurações disponíveis no Painel de Controle:
https://www.onlineexambuilder.com/general-knowledge-exam-no-css/exam-319288

E este é o mesmo Exame, mas agora com o estilo CSS personalizado:
https://www.onlineexambuilder.com/general-knowledge-exam-css/exam-276765

Todas as mudanças feitas na aba Styling serão aplicadas ao seu Exame a partir de então, mesmo que seja um exame já existente ou se estiver embutido em um website.

Folha de consultas personalizadas CSS

Nossos queridos designers compartilharam alguns trechos de código que você pode usar para criar sua folha CSS. Confira-os abaixo.

1. Exame, Questionário e Avaliação

Mudando a família de fontes

Todas as fontes do Google estão agora disponíveis para Exams.
Se você quiser mudar o tipo de fonte da sua Avaliação e Quiz, por favor veja uma lista de Web Safe Fonts, ou veja Google Fonts. Não se esqueça de importar a fonte para o gerenciador de arquivos (em Exams > Styling), então copie - cole o caminho da fonte para a sua folha CSS.

Cabeçalhos

Isto inclui as perguntas.

h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong { font-family: Geórgia, serif;}

Corpo do texto

Isto inclui as respostas.

corpo { font-family: Arial, Helvetica, sans-serif;}

Botões

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

Tudo (a mesma fonte)

body, h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong,.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

Alterando o tamanho da fonte

Cabeçalhos

h1 { tamanho da fonte: 28px;}h2, caption, .heading_h2, .examquestion>strong { tamanho da fonte: 21px;}h3, .heading_h3 { tamanho da fonte: 16.8px;}h4 { tamanho da fonte: 15.4px;}h5 { tamanho da fonte: 14px;}h6 { tamanho da fonte: 11.2px;}

Corpo do texto

corpo { tamanho da fonte: 13px;}

Botões

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-size: 13px;}

Perguntas

#questioncontainer h1 { tamanho da fonte: 28px;}

Respostas

.answers label, .answers label span, .answerinput * { font-size: 13px;}

Adicionando uma imagem de fundo

Para Exames, você pode fazer isso diretamente através do painel de controle em Styling > Theme > Dark photo background.

Entretanto, para Assessments e Quizzes você precisa das seguintes linhas de código:

html { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uve_uploaded]') centro não-repetição centro fixo; background-size: cover;}html body { background: none rgba(59,59,59,0.7);}

Para adicionar uma imagem de fundo, você precisa primeiro enviar esta imagem para nossos servidores. Você pode fazer isso adicionando-as ao Gerenciador de Arquivos em um de seus Exames. Após carregá-las lá, um caminho CSS será gerado na aba Styling > Custom CSS. Você pode então copiar-colar esta imagem/conteúdo em sua folha CSS.


2. Cursos

Mudando a família de fontes

Se você quiser mudar o tipo de fonte do seu Curso, por favor veja uma lista de Web Safe Fonts, ou veja Google Fonts. Não se esqueça de importar a fonte para o gerenciador de arquivos (em Exams > Styling) e então copie - cole o caminho da fonte para a sua folha CSS.

Cabeçalhos

h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong { font-family: "Droid Serif", serif;}

Corpo do texto

corpo { font-family: "Open Sans", sans-serif;}

Botões

botão, .button { font-family: "Open Sans", sans-serif;}

Tudo (a mesma fonte)

body, h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong, button, .button { font-family: "Open Sans", sans-serif;}

Alterando o tamanho da fonte

Cabeçalhos

Os tamanhos dos cabeçalhos são diferentes entre diferentes tamanhos de tela.

Tablet e Desktop

@media only screen and (largura mínima: 40,0625em) { h1 { tamanho da fonte: 2,55556rem; } h2 { tamanho da fonte: 2,11111rem; } h3 { tamanho da fonte: 1,66667rem; } h4 { tamanho da fonte: 1,11111rem; } h5 { tamanho da fonte: 1rem; } h6 { tamanho da fonte: 1rem; }}}

Móvel

h1 { font-size: 1.88889rem;}h2 { font-size: 1.55556rem;}h3 { font-size: 1.22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}

Todos os tamanhos de tela

h1 { font-size: 1.88889rem;}h2 { font-size: 1.55556rem;}h3 { font-size: 1.22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}@media only screen and (font-size: 1.22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}@media only screen and (min-width: 40.0625em) { h1 { tamanho da fonte: 2.55556rem; } h2 { tamanho da fonte: 2.11111rem; } h3 { tamanho da fonte: 1.66667rem; } h4 { tamanho da fonte: 1.11111rem; } h5 { tamanho da fonte: 1rem; } h6 { tamanho da fonte: 1rem; }}}

Texto do corpo

p, li, th, td, label, input, select, textarea, .qtype, .errorMessage, .assessboard p, .assessboard li, .contentcontainer .col12 .singleaxisscorecard p, .contentcontainer .col12 .singleaxisscorecard li {font-size: 1rem;}

Botões

botão, .button { tamanho da fonte: .88889rem;}

Perguntas

#questioncontainer h1 { tamanho da fonte: 28px;}

Respostas

.answers label>span, .answers label { font-size: .8rem;}

Adicionando um fundo

body { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uve_uploaded]') center no-repeat center fixed; background-size: cover;}

Para adicionar uma imagem de fundo, você primeiro precisa fazer o upload desta imagem para nossos servidores. Você pode fazer isso adicionando-as ao Gerenciador de Arquivos em um de seus Exames. Depois de carregá-las lá, um caminho CSS será gerado na aba Styling > Custom CSS. Você pode então copiar-colar esta imagem/conteúdo em sua folha CSS.

Para uma melhor legibilidade, você pode adicionar uma cor de sobreposição entre a imagem de fundo e o conteúdo. Mude o último número para a opacidade; 0,5 significa 50% de transparência).

Para uma sobreposição preta:

.off-canvas-wrap { background: rgba(0, 0, 0, 0, 0.5);}

Para uma sobreposição branca:

.off-canvas-wrap { background: rgba(255, 255, 255, 0.5);}

Adicionando um logotipo

Redimensionar a imagem

Para usar um logotipo em um Curso, você provavelmente precisará redimensioná-lo. Portanto, por favor, use esta ferramenta para redimensionar o logotipo antes de carregá-lo na Amazon: Online Image Resizer.

Carregue a imagem. Você pode cortá-la se precisar, mas se isso não for necessário, vá diretamente para o Passo 4. Coloque o número "108" na última caixa, e mantenha a caixa de seleção marcada, assim:



Agora baixe o logotipo. PNG é a sua melhor aposta.

Carregue o logotipo

Para usar o logotipo, você precisa fazer o upload desta imagem para nossos servidores. Por favor, adicione-as a um exame > Styling > File manager e copie - cole o caminho CSS na parte inferior da subguia Custom CSS para utilizá-la em seu Curso.

Calculando a largura correta

No CSS, você terá que especificar a altura e a largura do logotipo que você está adicionando. Você tem que respeitar a relação de aspecto do logotipo, então você precisa de uma calculadora para fazer isso: Easy Aspect Ratio Calculator. Aqui está como você a usa:

Encontre primeiro as dimensões atuais da sua imagem. Vá até o logotipo que você acabou de carregar no seu Explorer, clique com o botão direito do mouse sobre ele e clique em Propriedades. Selecione a aba Details (Detalhes). Você verá suas dimensões listadas na parte superior:
Vá para a calculadora online. Digite a largura e a altura da imagem (aquela nas propriedades), selecione Nova altura, e digite a nova altura (veja abaixo após o tamanho de fundo, o segundo valor é a altura que você deseja).
A calculadora dirá algo como: "Veja! A nova largura", e o seu número está lá! Faça arredondar este número para o número mais próximo (não existe tal coisa como meio pixel).

Logotipo no lado esquerdo (ao lado do botão de menu)

Por favor note que a imagem abaixo foi estilizada diretamente do botão de menu, e a cor de fundo sólida foi adicionada ao logotipo com estofamento dentro. Se você precisar que isto seja diferente, você precisa mexer com o background-size e o background-position (veja o exemplo abaixo).

.tab-bar::after { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uve_uploaded]'); background-repeat: no-repeat; background-position: right top; background-size: 156px 51px; content: ''; display: bloco; posição: relativo; float: esquerda; largura: 156px; altura: 51px;}@ tela somente para mídia e (largura mínima: 64.063em) { .tab-bar::after { background-size: 165px 54px; width: 165px; height: 54px; }}@media only screen and (max-width: 40em) { .tab-bar::after { width: 138px; height: 45px; background-size: 138px 45px; }}}

Logotipo no lado direito

Por favor, note que a imagem abaixo foi desenhada para ter um leve estofamento de lado e de cima. Se você não quiser isso, você pode definir a altura da imagem para 54px para desktop e 45px para celular e definir a posição background-position para top right em seu lugar (veja o exemplo acima). A imagem pegará a altura total da barra superior e se colará às bordas da janela.

.tab-bar { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uve_uploaded]'); background-position: top 10px right 10px; background-repeat: no-repeat; background-size: 117px 40px;}@media only screen and (max-width: 40em) { .tab-bar { background-position: direita 10px centro; background-size: 102px 35px; }}}

Logotipo no canto inferior esquerdo ou direito

Ajuste a largura, altura e tamanho de fundo de acordo com as dimensões da sua imagem.

No exemplo abaixo, o logotipo está alinhado à direita. Para alinhá-lo à esquerda, mude direita: 0 para esquerda: 0.

Se você precisa que o logotipo esteja um pouco longe da borda, escreva coisas como direito: 10px e bottom: 10px.

.main-section .ui-página::depois { conteúdo: "'; exibição: bloco; largura: 102px; altura: 35px; imagem-fundo: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[rol_relativo_do_arquivo_quivo_você_tem_carregado]'); tamanho-fundo: 102px 35px; fundo-repetição: sem-repetição; fundo-posição: centro; posição: absoluta; direita: 0; fundo: 0; índice-z: 99;}
Este artigo foi útil?
Cancelar
Obrigado!