Temas no moodle: como configurar
22 out 2008
O moodle vem com alguns padrões de temas já instalados, porém podemos customizar muito bem um ambiente com imagens, cores e logos. Muitos ambientes de aprendizagem foram tão bem customizados que muitas vezes nem percebemos que por traz de tudo aquilo há um Moodle.
Existem alguns sites e até mesmo o fórum do moodle disponibiliza temas para baixarmos, o formato é em zip, depois de descompactado é só jogar na pasta themes do ftp e pronto, temos mais uma opção de tema para customizarmos.
Um template de Moodle é composto basicamente pelos seguintes elementos:
* Um diretório, que é o nome do Tema;
* Dentro deste diretório, são encontrados os elementos que compõem o tema, propriamente dito:
* O diretório pix (ou images, vai depender de como desejar chamar as imagens do seu tema);
* Arquivos PHP:
o styles.php – Este arquivo contém informações sobre as variáveis de cookies dentre outras. TODOS os temas deve conter uma cópia deste arquivo dentro do diretório;
o docstyles.php – É o arquivo que contém alguns códigos PHP para chamar os estilos e cookies além de ter alguams regras de CSS que são mostradas como prioridade.
o config.php – É o arquivo que carrega as informações necessárias para que o Tema funcione adequadamente. A lista dos arquivos CSS, por exemplo, é descrita neste arquivo assim como
* Arquivos CSS – São estes arquivos que controlam todos os elementos da página, desde os links, cores de textos, posicionamentos, etc… O nome e a quantidade dos arquivos varia de acordo com o desenvolvedor. Pode-se usar um só arquivos para conter todas as informacões.
* No caso, vamos descrever um tema com vários arquivos CSS
o styles_color.css – Aqui pode ir as regras de CSS referentes a cores (de fontes, fundos, etc…) assim, fica fácil criar templates com o mesmo layout e mudar apenas as cores.
o styles_fonts.css – Nesse arquivo podem ir as regras de formatação de fontes, como tipos, tamanhos, variações, etc…
o styles_layout.css – Já neste, podem ir as regras relativas a formatação propriamente dita como colunas, tabelas, formulários, etc…
o styles_tabs.css – E por fim, aqui podem ir os estilos do menu de abas, por exemplo…
* E alguns arquivos HTML, para o cabeçalho e o rodapé. Nestes arquivos HTML é possÃvel customizar alguns elementos como incluir scripts, novos CSS, o favicon (aquele pequenino Ãcone que apare na barra do navegador), etc…
Temos que tomar cuidado com a versão do nosso moodle instalado e a versão do tema, eles tem que ser compatÃveis, senão não funciona.
Limitações
Nem tudo é permitido na hora de customizar o template do Moodle, apesar da flexibilidade. Alguns elementos na linguagem HTMLs ficam escondidos no código dificultando sua customização e aumentando o trabalho de manutenção. A elaboração de um novo template normalmente gira em torno de mudanças no css, nos arquivos de idioma e nas imagens.






6 comentários
2008 out 27
Prezados(a) senhores(a),
Estou tendo algumas dificuldades em configurar algumas imagens do tema que eu escolhir.
Gostaria de saber qual a linha de comando que muda a cor da borda do menu no arquivo stylos_color.
Como faço para alterar o logo que vem personalizado no tema.
Conto com a sua ajuda.
Edson Feliciano
2008 out 27
Boa tarde Edson, preciso saber qual o tema que vc está usando pois cada tema do moodle tem uma pagina de stillo diferente, so assim consigo te passar uma resposta mais precisa quanto a cor de borda, referente ao logo do tema na maioria dos casos basta alterar a imagem referente ao logo que está na pasta do tema moodle que vc baixou, renomeie seu arquivo com o mesmo nome do arquivo que vc deseja substituir no moodle, copie e cole seu logo na mesma pasta (com o mesmo nome e extensão), aparecerá um aviso “deseja susbstituir arquivo” click em sim.
espero ter conseguido responder sua pergunta, caso contrário seja um pouco mais especifico, teremos o prezer em ajudar.
2008 dez 12
Para saber como funciona o theme, o post está bem explicado, definindo toda a estrutura dos arquivos.
Uma dica para facilitar a edição dos temas de forma simples é instalar o plug-in FireBug no firefox e inspecionar a página do moodle.
Fica bem fácil de verificar onde está a linha css a ser alterada para a modificação que se quer.
espero ter ajudado.
Alex Mena
2008 dez 12
Otimo Alex de fato ajuda bastante, economiza um bocado de tempo este plugin acaba utilizando bastante a parte visual, obrigado pela dica.
um abraaaaço
2009 jan 21
Olá
Eu estou usando o tema chameleon. Quero colocar uma imagem no cabeçalho, daà eu abri o arquivo header.html pelo front page. Coloquei a imagem, mas ela não aparece. O arquivo da imagem está na pasta Chameleon\pix. O que está errado? É o local onde está o arquivo da imagem?
Obrigada
Andréa
2009 jan 21
Olá Andréa,
para ficar mais fácil, escolha temas que já possuam uma imagem no topo, geralmente é um logo, como por ex. o Formal White. Ai vc terá que apenas substituir o logo pela sua imagem nova, lembrando de deixar sua imagem nova com o mesmo da anterior e verificar em qual pasta ela está sendo enviada.
Esse tema que vc escolheu também dá para colocar imagens, mas terá que sofrer uma alteração no css, puxando a imagem que vc quer.
Ou então procure os temas mais agradáveis em nosso blog que possua uma imagem no topo. Acredito que assim te diminuirá esforços.
att,
Adriane