Theme no moodle: como configurar

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 respostas para Theme no moodle: como configurar

  1. Edson Feliciano disse:

    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

  2. Marcelo Claro disse:

    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.

  3. Alex disse:

    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

  4. Marcelo Claro disse:

    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

  5. Eliane disse:

    Olá pessoal,
    Estou iniciando agora na utilização do Moodle e gostaria de alterar algumas características do layout e incluir um logo no cabeçalho, mas não estou encontrando onde fazer isso nos arquivos contidos dentro do diretório do tema.
    Poderiam me ajudar na identificação do local onde tenho que fazer essa modificação? E onde colocar a figura?

    Obrigada.

  6. Adriane Consolo disse:

    Olá Eliane,

    cada tema tem suas diferenças, mas também todos eles tem seus arquivos e procedimento semelhantes. Primeiramente aconselho você a baixar um tema que já possui logo para facilitar o processo de substituição, normalmente trocando uma imagem pela outra mantendo o mesmo nome, geralmente o logo fica em uma pasta chamada pix dentro do próprio tema, tendo um tema com imagem no topo o processo ficará bem simples, caso contrário você terá que ter um pouco de conhecimento em html e .css que é a linguagem básica de criação de layout do moodle.

    Mudamos de endereço, fique por dentro das novidads em http://moodlelivre.com.br

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: