Como personalizar os estilos (CSS) do meu curso
Existem duas formas de personalizar os estilos do curso:
Diretamente nos Conteúdos HTML, utilizando a tag
<style>
.Utilizando uma folha de estilos personalizada.
Diretamente nos conteúdos HTML
Podem ser adicionados estilos personalizados em conteúdos HTML a disponibilizar na plataforma.
Os estilos devem ser utilizados seguindo uma correta notação HTML:
<style>
.estilo_personalizado {
color: red;
}
</style>
Estes estilos podem depois ser aplicados nos conteúdos:
<div class="estilo_personalizado">
NOTA: Este conteúdo vai aparecer a vermelho
</div>
Estes estilos são definidos ao nível do bloco de conteúdo. Um estilo definido num bloco de conteúdo HTML não é passível de ser utilizado noutro bloco.
Utilizando uma folha de estilos personalizada
Para obter estilos a utilizar em qualquer bloco de conteúdo, deve ser criada uma folha de estilos global e importar a mesma para o curso.
Para disponibilizar uma folha de estilos deve:
Criar a folha de estilos num editor (por exemplo, Sublime text, VSCode, Notepad++, etc.)
Guardar a folha de estilos com a extensão correta, ex:
estilos.css
Carregar a folha de estilos para os ficheiros do curso em Conteúdos > Ficheiros e Uploads
Copiar o link para a Web
Navegar até ao menu Configurações > Configurações Avançadas
Pesquisar por
css
para encontrar o campo CSS personalizado para todo o curso
Adicionar o link que copiou de forma correcta, como no seguinte exemplo (importante garantir que a hiperligação está entre aspas)
[
"link_para_a_folha_de_estilos.css"
]
Definições avançadas de estilos
Caso deseje utilizar uma fonte diferente da utilizada na plataforma NAU, pode utilizar a API do Google Fonts para o fazer.
Pode carregar diretamente na folha de estilos a fonte que pretende utilizar:
/* A colocar em estilos.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');
E posteriormente, criar as suas classes com recurso à fonte que carregou.
.titulos {
font-family: "Roboto", sans-serif;
}
Garanta fallbacks para as suas fontes, utilizando sempre no final da lista algo como sans-serif
para que os estilos não apareçam quebrados no seu curso.