Este artigo também está disponível em:
Este artigo foi traduzido usando tradução automática. Ele pode conter alguns erros ou traduções estranhas. Ainda assim, achamos que é útil para você ler este artigo de ajuda em seu idioma nativo. Informe-nos se este artigo foi útil ou se você tem algum outro comentário, na parte inferior do artigo.

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 dos botões e o fundo dos seus testes e cursos criado com o Easy LMS. Uma maneira de fazer isso é ajustando as configurações no Estilização 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 Corporativo ou plano 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.
Quizzes, Avaliações, e Cursos

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

As mudanças no CSS podem ser aplicadas, especificamente a um Quiz, Avaliação, ou Cursoou 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.
Provas

Você pode editar o CSS do seu Prova diretamente da sua conta. Vá para sua conta Prova > Criar > Estilismo > CSS Personalizado:



Sobre o Gerenciador de arquivos você também pode carregar suas fontes e imagens para uso na folha de estilo CSS (confira este artigo para saber mais):



Apenas para lhe dar um exemplo, este é o link para um Prova que foi estilizado com as configurações disponíveis no Painel:
https://www.onlineexambuilder.com/ocean-sailor-exam/exam-70792



E este é o mesmo Prova, mas agora com um estilo CSS personalizado
https://www.onlineexambuilder.com/ocean-sailor-exam-css/exam-93757



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

Folha de dados do CSS personalizado

Nossos queridos designers compartilharam alguns trechos de código que você pode usar para criar sua folha CSS. Confira-os abaixo.
1. Prova , Quiz, e Avaliação
Mudando a família de fontes

Todas as fontes do Google estão agora disponíveis para Provas.
Se você quiser mudar o tipo de fonte do seu Avaliação e Quiz, por favor veja uma lista de Web Safe Fonts, ou veja Fontes do Google. Não se esqueça de importar a fonte para o Gerenciador de arquivos (em Provas > Estilismo) e então copie - cole o caminho da fonte na 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.

body { 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)

corpo, h1, h2, h3, h4, h5, h6, caption, [ classe=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;}``````
Mudando o tamanho da fonte

Cabeçalhos

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

Corpo do texto

body { font-size: 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;}`````` questioncontainer h1 { tamanho da fonte: 28px;}`````

Respostas

````` Rótulo .answers, .answers label span, .answerinput * { tamanho da fonte: 13px;}```````` Rótulo .answers, .answers span, .answerinput { tamanho da fonte: 13px;}``````
Adicionando uma imagem de fundo

Para Provasvocê pode fazer isso diretamente através do painel de controle em Styling > Tema > Fundo escuro da foto.

Entretanto, para Avaliações 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]') no-repeat center center fixed; background-size: cover;}html body { background: none rgba(59,59,59,0.7);}````````````` 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 nossos servidores Provas. Depois de carregá-los lá, um caminho CSS será gerado no Estilismo > CSS personalizado aba. 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 Fontes do Google. Não se esqueça de importar a fonte para o Gerenciador de arquivos (em Provas > Estilismo) e então copie - cole o caminho da fonte na 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

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

Botões

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

Tudo (a mesma fonte)

corpo, h1, h2, h3, h4, h5, h6, caption, [ class=heading_h], .examquestion>strong, button, .button { font-family: "Open Sans", sans-serif;}````
Mudando 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 (min-width: 40,0625em) { h1 { font-size: 2,55556rem; } h2 { font-size: 2,11111rem; } h3 { font-size: 1,66667rem; } h4 { font-size: 1,11111rem; } h5 { font-size: 1rem; } h6 { font-size: 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 (min-width: 40,0625em) { h1 { font-size: 2,55556rem; } h2 { font-size: 2,11111rem; } h3 { font-size: 1,66667rem; } h4 { font-size: 1,11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}

Corpo do texto

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

button, .button { font-size: .88889rem;}

Perguntas

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

Respostas

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

Não é possível usar o CSS para adicionar uma imagem de fundo para Cursos. Você precisará adicionar a imagem de fundo diretamente do Estilização aba. Para mais informações, por favor, consulte a aba Opções de Estilismo para Cursos artigo.
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: Resizer de Imagem Online.

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 Prova > Estilismo > Gerenciador de arquivos e copie - cole o caminho do CSS na parte inferior da subguia Custom CSS para usá-lo 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: Calculadora de Relação de Aspecto Fácil. 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; largura: 165px; altura: 54px; }}@ tela somente para mídia e (largura máxima: 40em) { .tab-bar::after { width: 138px; altura: 45px; tamanho do fundo: 138px 45px; }}```````` background-repeat: sem repetição; background-position: superior direito; tamanho do fundo: 156px 51px; tamanho do fundo: 156px
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: right 10px center; 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 do limite, escreva coisas como direito: 10px e bottom: 10px.

.main-section .ui-page::after { content: "'; exibição: bloco; largura: 102px; altura: 35px; imagem de fundo: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uve_uploaded]'); tamanho do fundo: 102px 35px; fundo-repetição: no-repeat; fundo-posição: centro; posição: absoluta; direita: 0; fundo: 0; índice-z: 99;}
Este artigo foi útil?
Cancelar
Obrigado!