Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Temas 2.0: Difference between revisions

From MoodleDocs
(43 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{Template:Themes}}{{Moodle 2.0}}Bem vindo ao novo mundo de temas do moodle 2.0 !!
{{Template:Themes}}{{Moodle 2.0}}Bem vindo ao novo mundo de temas do moodle 2.0 !!


O '''Moodle Temas''' permite que você mude o visual do seu site moodle. Você pode contribuir com temas já existentes ou criar seus próprios temas para compartilha com a comunidade moodle. Os temas podem também ser baseados em temas já existentes com algumas personalizações. Você pode fazer isso através do CSS, mudando a estrutura de marcação subjacente e também adicionando javascript para adicionar novos recursos.
O '''Moodle Temas''' permite que você mude o visual do seu site moodle. Você pode usar temas já existentes ou criar seus próprios temas para compartilha com a comunidade moodle. Os temas podem também ser baseados em temas já existentes com algumas personalizações. Você pode fazer isso através do CSS, mudando a estrutura base e também adicionando javascript para adicionar recursos mais avaçados.


A maioria dos temas Moodle são desenvolvidos adicionando algumas mudanças no novo tema baseando-se  em um tema que já existe.[A arquitetura do Tema Moodle é desenvolvido de tal forma que o tema base funcionará como uma queda-back que é usado quando nada foi definido no tema com base nele]. Isso torna mais fácil para quem deseja criar novos temas apenas fazendo algumas mudanças em temas já existentes.
A maioria dos temas Moodle são desenvolvidos adicionando algumas mudanças em um tema que já existe. A arquitetura dos Temas do Moodle é desenvolvida de tal forma que a mesma funcione como base quando nada for definido no tema editado. Isso torna mais fácil para quem deseja criar novos temas apenas fazendo algumas mudanças em temas já existentes.


Essa documentação explica como trabalhar com temas do Moodle e pretende ajudar você a criar ou modificar a maioria do temas do Moodle 2.0
Essa documentação explica como trabalhar com no Moodle e pretende ajudar você a criar ou modificar a maioria do temas do Moodle 2.0.


== O que há de novo na versão 2.0 ==
== O que há de novo na versão 2.0 ==
Line 14: Line 14:
* As classes CSS ficaram mais claras e consistentes, alem de IDs em todas paginas do Moodle
* As classes CSS ficaram mais claras e consistentes, alem de IDs em todas paginas do Moodle
* Introdução a arquivos de layout (templates), descrevendo o layout HTML para diferentes tipos de paginas do Moodle
* Introdução a arquivos de layout (templates), descrevendo o layout HTML para diferentes tipos de paginas do Moodle
* Introdução de processadores, que produzem as pequenas “partes” de uma página HTML. Temas avançados podem ter eles ativados manualmente se for decido
* Introdução a métodos padronizados para adição de Javascript aos templetes  
* Introdução a métodos padronizados para adição de Javascript aos templetes  
* Controle mais fácil dos ícones e imagens do Moodle
* Controle mais fácil dos ícones e imagens do Moodle
* O antigo tema "standaed" (padrão) foi dividio em dois temas:
* O antigo tema "standard" (padrão) foi dividio em dois temas:
**'''base''' - contem o layout absolutamente básico, e   
**'''base''' - contem o layout absolutamente básico, e   
**'''standard''' - Que adiciona CSS no tema base para torna-lo parecido com antigo tema padrão   
**'''standard''' - que adiciona CSS no tema base para torna-lo parecido com antigo tema padrão   
*Ajuste de desempenho: Em condições normais de produção, os arquivos CSS são combinados em um único arquivo otimizado, e ambos, arquivo CSS e javaScript são minimizados para assegurar que não haja desperdício  de conexão e trafico.
*Ajuste de desempenho: Em condições normais de produção, os arquivos CSS são combinados em um único arquivo otimizado, e ambos, arquivo CSS e javaScript são minimizados para assegurar que não haja desperdício  de conexão e trafico.


Line 25: Line 26:
Algumas coisas importantes para quem deseja construir bons temas:
Algumas coisas importantes para quem deseja construir bons temas:


# '''config.php''' - Esse arquivo é requisitado em muitos temas. Ele define as configurações  e define requisitos para funcionar o tema Moodle.  
# '''config.php''' - Esse arquivo é requisitado em muitos temas. Ele define as configurações  e define requisitos para funcionar o tema Moodle. Isso inclui o tema, arquivo, região, região padrão e opções
# '''Layouts e arquivo de layout''' - Em config.php existe uma definição para cada tipo de pagina (veja [[#theme_layouts_table|Appendix A: Theme layouts]] para ver uma lista de 12 tipos ). Cada tipo de pagina definido diz qual arquivo de layout será utilizado, que região do bloco essa tipo de pagina deve exibir e assim por diante. O arquivo de layout contem o HTML e o PHP minimo exigido para exibir a estrutura básica das paginas. (Se você conhece Moodle 1.9, Isso seria uma combinação de header.html e footer.html).
# '''Layouts e arquivo de layout''' - Em config.php existe uma definição para cada tipo de pagina (veja [[#theme_layouts_table|Appendix A: Theme layouts]] para ver uma lista de 12 tipos). Cada tipo de definição de página diz qual arquivo de layout será utilizado, qual regiões de bloco esse modelo de página deve exibir e assim por diante. O arquivo de layout contém o HTML e o PHP minimo exigido para exibir a estrutura básica das paginas. (Se você conhece Moodle 1.9, Isso seria uma combinação de header.html e footer.html)
# '''O tema base ''' - Não se destina a ser usado para produção de sites. Estabelece o esquema genérico mais simples possível e inclui apenas CSS essencial para o layout ou para o Moodle como um todo. È a base perfeita para se começar a desenha um tema, pois ha poucos cores, bordas, margens e alinhamentos para substituir. Voce pode simplesmente começar a adicionar o que você precisar
# '''O tema base ''' - Não se destina a ser usado para produção de sites. Estabelece o esquema genérico mais simples possível e inclui apenas CSS essencial para o layout ou para o Moodle como um todo. É a base perfeita para se começar a desenha um tema, pois há poucas cores, bordas, margens e alinhamentos para substituir. Você pode simplesmente começar a adicionar o que você precisar.


===Arquivos  e Pastas===
===Arquivos  e Pastas===
Os arquivos dos temas são localizados em uma pasta com caminho Moodle/Theme e possui varias subpastas. Cada subpastas da pasta Theme corresponde a um tema. Cada tema é definido da seguinte forma:
Os arquivos dos temas são localizados em uma pasta com caminho Moodle/Theme e possui subpastas. Cada tema é definido da seguinte forma:


{| class="nicetable"
{| class="nicetable"
Line 40: Line 41:
|  
|  
| /config.php
| /config.php
| Contem todas as configurações e definições para cada tema.  
| Contém todas as configurações e definições para cada tema.
|-
|-
|  
|  
| /lib.php  
| /lib.php  
| Contem classes especificas e funções que são usadas pelos temas.
| Contém classes especificas e funções que são usadas pelos temas.
|-
|-
|  
|  
| /renderers.php  
| /renderers.php  
| Contem alguns renderes personalizados para o tema.
| Contém qualquer processador personalizado para o tema.
|-
|-
|  
|  
| /settings.php  
| /settings.php  
| Contem configurações personalizadas do tema. Essas configurações locais são definidos para permitir que o usuário do tema possa modifica-lo facilmente. (por exemplo, uma cor de fundo ou uma imagem de cabeçalho)
| Contém configurações personalizadas do tema. Essas configurações locais são definidos pelo tema, permitindo que o usuário do tema possa modificá-lo facilmente. (por exemplo, uma cor de fundo ou uma imagem de cabeçalho)
|-
|-
| /javascript/  
| /javascript/  
|  
|  
| Todos os arquivos JavaScript para o tema especifico devem ser localizados aqui.
| Todos os arquivos JavaScript específicos para o tema devem ser localizados aqui.
|-
|-
| /lang/  
| /lang/  
|  
|  
| Quaisquer arquivos de linguagem especial que o tema exige devem ser localizados aqui.
| Quaisquer arquivos de linguagem especial que o tema exige devem ser localizados aqui.
|-
|-
| /layout/  
| /layout/  
|  
|  
| Contem os arquivos de layout do tema.
| Contém os arquivos de layout do tema.
|-
|-
| /pix/  
| /pix/  
|  
|  
| Contem todas as imagens que o tema usa tanto do CSS quanto dos arquivo de layout.
| Contém todas as imagens que o tema usa tanto do CSS quanto dos arquivo de layout.
|-
|-
|  /pix
|  /pix
Line 86: Line 87:
|CSS arquivos que o tema precisa
|CSS arquivos que o tema precisa
|}
|}
 
Há também diversos lugares que folhas de estilo podem ser incluídas (veja o a seção CSS de como e porquê  abaixo).
==Opções de temas==
==Opções de temas==
Todas as opções de temas são definidos dentro do arquivo config.php. As configurações que são mais usadas são: parents,sheets, layouts e javascripts.
Todas as opções de temas são definidos dentro do arquivo config.php. As configurações que são mais usadas são: parents,sheets, layouts e javascripts.
Dê uma olhada em  '''[[#theme_options_table|theme options table]]''' para completar essa lista de opções de temas que incluem alguns configurações menos usadas e mais avançadas.
Dê uma olhada em  '''[[#theme_options_table|theme options table]]''' para completar essa lista de opções de temas que incluem algumas configurações menos usadas e mais avançadas.




===Exemplo de uma configuração basica ===
===Exemplo de uma configuração basica ===
Vamos dar uma olhada em um arquivo com configuração básica:
Vamos dar uma olhada em um arquivo com configuração básica de tema e as diferentes partes que a estruturam:
<code php>
<code php>
$THEME->name = 'newtheme';
$THEME->name = 'newtheme';
Line 133: Line 134:


===Expandindo as configurações de um exemplo básico===
===Expandindo as configurações de um exemplo básico===
Primeiramente, antes de tudo, você vai notar que tudo é adicionado para $THEME. Esse é o objeto para configuração de tema, ele é criado para configuração padrão do Moodle e em seguida atualizado para qualquer configuração que você adicionar.
Primeiramente, antes de tudo, você vai notar que tudo é adicionado para $THEME. Esse é o objeto para configuração de tema. Ele é criado usando a configuração padrão do Moodle e em seguida atualizado para qualquer configuração que você adicionar.


; $THEME->name : A primeira configuração, é o nome do tema. Ele deve ser simplesmente o nome do tema que você quiser nomear. O mais recomendado é que você use o mesmo nome do diretório do tema.
; $THEME->name : A primeira configuração, é o nome do tema. Ele deve ser simplesmente o nome do tema que você quiser nomear. O mais recomendado é que você use o mesmo nome do diretório do tema.
Line 139: Line 140:
; $THEME->parents : Esse define os temas que o tema estendera. Nesse caso, você esta apenas ampliando o tema base. Então seu tema será uma extensão de outro tema base.  
; $THEME->parents : Esse define os temas que o tema estendera. Nesse caso, você esta apenas ampliando o tema base. Então seu tema será uma extensão de outro tema base.  


; $THEME->sheets : Um vetor contendo o nome das folhas de estilo CSS para incluir em seu tema. Note que é apenas o nome da folha de estilo e não deve conter o caminho do diretório ou a extensão do arquivo. No moodle assumimos que as folhas de estilo do tema são localizadas no diretorio styles do tema e tem .css como extensão.
; $THEME->sheets : Um vetor contendo os nomes das folhas de estilo CSS para incluir em esse tema. Note que é apenas o nome da folha de estilo e não contém o caminho do diretório ou a extensão do arquivo. No moodle assume que as folhas de estilo do tema serão localizadas no diretório de estilos do tema e tem .css como extensão.


; $THEME->layouts : Nesse exemplo, dois layouts foram definidos para substituir o layouts do tema base. Para mais informações você deve ver sessão abaixo [[#Layouts|layouts]].
; $THEME->layouts : Nesse exemplo, dois layouts foram definidos para substituir o layouts do tema base. Para mais informações você deve ver sessão abaixo [[#Layouts|layouts]].


; $THEME->javascripts_footer :A configuração final é incluir um arquivo JavaScript. Bem como as folhas de estilo, você só precisa fornecer o nome dos arquivos. Moodle assumira que eles estarão no diretório JavaScript do seu tema e serão um arquivo .js .
; $THEME->javascripts_footer :A configuração final é incluir um arquivo JavaScript. Assim como as folhas de estilo, você só precisa fornecer o nome dos arquivos. Moodle assumirá que eles estarão no diretório JavaScript do seu tema e serão um arquivo .js .


'''''Note''''': Quando você começar a escrever seus temas, Certifique-se de dar uma olhada nos arquivos de configuração de outros temas que já vem no Moodle. Você vai ter uma boa imagem de como tudo funciona e vai perceber o que esta acontecendo dentro do tema moodle, conhecendo o que é inclusão ou exclusão dentro do tema.
'''''Note''''': Quando você começar a escrever seus temas, Certifique-se de dar uma olhada nos arquivos de configuração de outros temas que já vem no Moodle. Você vai ter uma boa idéia de como tudo funciona e vai perceber o que esta acontecendo dentro do tema moodle, conhecendo o que é inclusão ou exclusão dentro do tema.


==CSS==
==CSS==
===Localização dos arquivos CSS===
===Localização dos arquivos CSS===
Primeiramente vamos da uma olhada onde o CSS pode ser incluído dentro do Moodle:  
Primeiramente vamos da uma olhada onde o CSS pode ser incluído dentro do Moodle:  
; \theme\themename\style\*.css :Essa é a localização padrão das folhas de estilo que são usadas por um tema e a localização que deve ser usada para o desenvolvimento do seu tema.
; \theme\themename\style\*.css :Essa é a localização padrão das folhas de estilo que são usadas por um tema e o local que deve ser usado para o desenvolvimento do seu tema.


Novos desenvolvedores de temas devem notar que a ordem em que os arquivos CSS devem ser encontrados e incluídos cria uma hierarquia. Essa ordem assegura que as regras, dentro das folhas de estilo dos temas, tenha prioridade sobre regras idênticas em outros arquivos que podem ter sido introduzidas antes. Isso pode nasce outra extensão. [This can both extend another files definitions (see parent array in the config file) and also ensures that the current theme's CSS rules/definitions have the last say.]
Novos desenvolvedores de temas devem notar que a ordem em que os arquivos CSS são encontrados e incluídos cria uma hierarquia. Essa ordem assegura que as regras, dentro das folhas de estilo dos temas, tenham prioridade sobre regras idênticas em outros arquivos que podem ter sido introduzidas antes. Isso pode também se extender a outras definições de arquivo (veja vetor principal no arquivo de configuração) e também garante que as regras/definições do tema CSS tenha a última palavra.


outra localização que pode ser usada (embora muito raramente) para incluir CSS em uma pagina. Um desenvolvedor PHP pode especificar manualmente onde se encontra a folha de estilo no Moodle, como um database. Normalmente, se código esta fazendo,[it is because there is a non-theme config or plugin setting that contains information requires special CSS information]. Como desenvolvedor de temas, você deve ta ciente disso, mas não tem que se preocupar como esses locais de arquivos CSS . Aqui estão alguns exemplos::
outras localizações que podem ser usadas (embora muito raramente) para incluir CSS em uma página. Um desenvolvedor de um arquivo PHP pode especificar manualmente onde se encontra a folha de estilo no Moodle, como um banco de dados. Normalmente, se código esta fazendo isso, é porque existe uma configuração de um não tema ou de um plugin que precisa de uma informação especial de CSS. Como desenvolvedor de temas, você deve estar ciente da localização de arquivos CSS, mas não tem que se preocupar com isso. Aqui estão alguns exemplos:


; {pluginpath}\styles.css e.g. \block\blockname\styles.css or \mod\modname\styles.css : Cada plugin pode ter seu próprio arquivo styles.css . Este arquivo deve conter apenas as normas CSS necessárias para o módulo e não deve acrescentar qualquer outra coisa alem daqueles que são verdadeiramente requisitados.
; {pluginpath}\styles.css e.g. \block\blockname\styles.css or \mod\modname\styles.css : Cada plugin pode ter seu próprio arquivo styles.css . Este arquivo deve conter apenas as normas CSS necessárias para o módulo e não deve acrescentar qualquer alteração para a aparência do plugin como cores, tamanho das fontes, ou margens. Nada além daqueles que são verdadeiramente requisitados.
; {pluginpath}\styles_themename.css : Este só deve ser usado por desenvolvedores de plugins. Permite escrever CSS, que é projetado para um tema específico sem ter que fazer alterações a esse tema.
Estilos de tema específicos para um plugin devem ser localizados dentro do diretório de estilo do tema.


===Moodle's core CSS organisation===
; {pluginpath}\styles_themename.css : Este só deve ser usado por desenvolvedores de plugins. Permite escrever CSS, que é projetado para um tema específico sem ter que fazer alterações a esse tema. Você irá notar que esse nunca é usado dentro do Moodle e é destinado para ser usado apenas como código de contribuição.
O próxima passo é olhar para a organização e regras do CSS dentro de um tema. Embora, como um desenvolvedor de temas, é responsabilidade sua criar e organizar seu CSS.Por favor, note que os temas padrões que ja vem no moodle não tem uma organização muito clara do CSS


Primeiro vamos ver o arquivo  pagelayout.css. Ele contem o CSS necessario para criar o visual do seu layout. Ele não contem regras que afetam o conteúdo gerado pelo mooodle.
===Organização do Núcleo CSS do Moodle===
O próximo passo é olhar para a organização e regras do CSS dentro de um tema. Embora, como um desenvolvedor de temas, é responsabilidade sua criar e organizar seu CSS. Por favor, note que os temas padrões que já vem no Moodle tem uma organização muito clara do CSS.


Proximo arquivo é o core.css. Se você abrir codigo vai notar que ele contem regras de uso geral(geralmente simples) que não se aplicam a uma seção especifica do Moodle e sim ao Moodle como um todo.
Primeiro tem-se arquivo pagelayout.css. Ele contém o CSS necessário para criar o visual do seu layout. Ele não contém regras que afetam o conteúdo gerado pelo Moodle.
 
Próximo arquivo é o core.css. Se você abrir o núcleo vai notar que ele contém regras de uso geral (geralmente simples) que não se aplicam a uma seção especifica do Moodle e sim ao Moodle como um todo.


Também pode haver regras que se relacionam com seções específicas. No entanto, isso é feito apenas quando há apenas algumas regras para essa seção. Esses pequenos grupos de regras são agrupados e separados por comentários de identificação para cada seção.
Também pode haver regras que se relacionam com seções específicas. No entanto, isso é feito apenas quando há apenas algumas regras para essa seção. Esses pequenos grupos de regras são agrupados e separados por comentários de identificação para cada seção.
Line 170: Line 173:
Finalmente, existem todos os outros arquivos CSS, você vai notar que há um arquivo para cada seção do Moodle, que tem uma coleção significativa de regras.
Finalmente, existem todos os outros arquivos CSS, você vai notar que há um arquivo para cada seção do Moodle, que tem uma coleção significativa de regras.


:Para aqueles que estão familiarizados com tema Moodle 1.9, esta organização terá uma grande mudança. Em 1.9, o CSS foi organizado pela sua natureza (por exemplo: cores, layout, outros.
:Para aqueles que estão familiarizados com tema Moodle 1.9, esta organização terá uma grande mudança. Em 1.9, o CSS foi organizado pela sua natureza (por exemplo: cores, layout, outros.)
 


===Como escrever regras do CSS eficazes dentro do Moodle===
===Como escrever regras do CSS eficazes dentro do Moodle===
Em Moodle 2.0, escrever boas regras de CSS é muito importante.
Em Moodle 2.0, escrever boas regras de CSS é muito importante.


Devido a requisitos de desempenho e limitações do browser, todos os arquivos CSS são combinados em um único arquivo CSS que é incluído sempre. Isto significa que as regras precisam ser escritas de tal forma que minimize as chances de uma colisão, levando a aplicação de estilos indesejados. [Whilst writing good CSS is something most designers strive for we have implemented several new body classes and prompt developers to use appropriate classnames.]
Devido a requisitos de desempenho e limitações do navegador, todos os arquivos CSS são combinados em um único arquivo CSS que é incluído sempre. Isto significa que as regras precisam ser escritas de tal forma que minimize as chances de uma colisão, levando a aplicação de estilos indesejados. Por outro lado, escrever um bom CSS é algo que muitos desenvolvedores aspiram para que nós implementemos em diversas classes da estrutura e acaba estimulando desenvolvedores a usar o nome apropriado das classes.
 


====<body> CSS id e classes ====
====<body> CSS id e classes ====


A partir do Moodle 2.0 a tag ID que é aplicado ao body será sempre uma representação de seu endereço. Por exemplo, se você está olhando para uma mensagem do fórum e o endereço é "mod / forum / / view.php ', então a tag ID do body sera " # page-mod-forum-view ".
A partir do Moodle 2.0 a tag ID (etiqueta de identificação) que é aplicado à estrutura será sempre uma representação de seu endereço. Por exemplo, se você está olhando para uma mensagem do fórum e o endereço é "mod / forum / / view.php ', então a tag ID da estrutura será " # page-mod-forum-view ".


[As well as the body's ID attribute the URI is also exploded to form several CSS classes that get added to the body tag, so in the above example '/mod/forum/view' you would end up with the following classes being added to the body tag '.path-mod', '.path-mod-forum'. Note that '.path-mod-forum-view' is not added as a class, this is intentionally left out to lessen confusion and duplication as rules can relate directly to the page by using the ID and do not require the final class.]
Como a identificação da estrutura atribuida ao URI também é explodida para formar diversar classes CSS que são adicionadas para a estrutura, então o exemplo '/mod/forum/view' deveria acabar com a seguinte classe adicionada para a estrutura '.path-mod', '.path-mod-forum'. Observe que '.path-mod-forum-view' não é adicionado como uma classe, sendo intencionalmente deixado de for a para evitar confusão e duplicação, visto que as regras podem ligar diretamente para a página usando o ID e não precisa da classe final.


O ID e as classes do corpo descritos acima irão forma o basico para muitas das regras CSS que você terá que escrever para o seu tema, no entanto, existe muitas outras classes muito util que podem ser adicionadas as tags do body.Algumas das classes mais interessantes estão listados abaixo.
O ID e as classes do corpo descrito acima irão forma o básico para muitas das regras CSS que você terá que escrever para o seu tema, no entanto, existe muitas outras classes muito úteis que podem ser adicionadas as tags do corpo. Algumas das classes mais interessantes estão listadas abaixo.


* Se o JavaScript está habilitado então, 'jsenabled1' será adicionado como uma classe para a tag body permitindo-lhe estilo baseado em JavaScript.
* Se o JavaScript é habilitado, então 'jsenabled1' será adicionado como uma classe para a tag do corpo, permitindo-lhe estilo baseado em JavaScript ser ativado ou não
* Ou 'dir-rtl "ou" dir-ltr' será adicionado ao body como uma classe, dependendo da direção do pacote de idioma: rtl = direita para a esquerda, ltr = esquerda para a direita. Isto permite determinar o seu alinhamento de texto com base na língua, se necessário.
* Ou 'dir-rtl "ou" dir-ltr' será adicionado ao corpo como uma classe, dependendo da direção do pacote de idioma: rtl = direita para a esquerda, ltr = esquerda para a direita. Isto permite determinar o seu alinhamento de texto com base na língua, se necessário.
* A classe será adicionado para representar o pacote de idioma em uso atualmente, por padrão en_utf8 é usada pelo Moodle e resultará na adição da na classe 'lang-en_utf8 " à tag body.
* A classe será adicionada para representar o pacote de idioma em uso atualmente, por padrão en_utf8 é usada pelo Moodle e resultará na adição da na classe 'lang-en_utf8 " à tag do corpo
* O wwwroot para Moodle também será convertido em uma classe e adicionado à tag body o que lhe permitindo criar um estilo para seu tema baseado na URL através do qual ele foi atingido. por exemplo, http://sam.moodle.local/moodle/ se tornará ". sam-moodle-local-moodle '
* O wwwroot para Moodle também será convertido em uma classe e adicionado à tag do corpo, o que lhe permite criar um estilo para seu tema baseado na URL através do qual ele foi atingido. Por exemplo,http://sam.moodle.local/moodle/ se tornará ". sam-moodle-local-moodle '
* Se o usuario corrente não esta logado então '.notloggedin' 'será adicionado à tag body.
* Se o usuario corrente não esta logado então '.notloggedin' 'será adicionado à tag do corpo.


O que que tudo isso parece na prática? Bem, usando o exemplo acima / mod / forum / view.php você teria pelo menos a tag body seguintes:
O que tudo isso parece na prática? Bem, usando o exemplo acima / mod / forum / view.php, você teria pelo menos a seguinte etiqueta de corpo:
<code html4strict><body id=”page-mod-forum-view” class=”path-mod path-mod-forum” /></code>
<code html4strict><body id=”page-mod-forum-view” class=”path-mod path-mod-forum” /></code>


====Escrevendo suas regras====
====Escrevendo suas regras====


Seguindo as melhores praticas de CSS e compreendendo a ordem em cascata para desenvolvimento de CSS para temas é possivel reduzir colisões e linhas do CSS que é escrito. Classes CSS foram colocados em locais onde acredita-se que qualquer um possa querer aplicar seus proprios estilos CSS.
Seguindo as melhores praticas de CSS e compreendendo a ordem em cascata de CSS , o desenvolvedor do tema poderá reduzir colisões e linhas do CSS que é escrito. Classes CSS foram colocadas em locais onde se acredita que qualquer um possa querer aplicar seus próprios estilos CSS.


Ao começar a escrever regras certifique-se que você tem um bom entendimento de onde você quer que essas regras sejam aplicadas, é uma boa idéia para tirar o máximo partido das classes do body acima mencionadas. Se você quiser escrever uma regra para uma pagina especifica deve-se usar o ID para a tag body:  
Ao começar a escrever regras certifique-se que você tem um bom entendimento de onde você quer que essas regras sejam aplicadas, é uma boa idéia para tirar o máximo partido das classes do body acima mencionadas. Se você quiser escrever uma regra para uma página específica deve-se usar o ID para a tag do corpo:


<code css>#page-mod-forum-view .forumpost {border:1px solid orange;)</code>
<code css>#page-mod-forum-view .forumpost {border:1px solid orange;)</code>


Se você quiser escrever uma regra que seja aplicada para todo o forum.:
Se você quiser escrever uma regra que seja aplicada para todo o forum:


<code css>.path-mod-forum .forumpost {border:1px solid orange;}</code>
<code css>.path-mod-forum .forumpost {border:1px solid orange;}</code>


A outra coisa muito importante levar em consideração é a estrutura que antecederam a tag que você quer para estilo. Browsers apply conflicting styles with priority on the more specific selectors. It can be very beneficial to keep this in mind and write full selectors that rely on the structure of the tags leading to the tag you wish to style.
Outra coisa muito importante para levar em consideração é a estrutura que antecederam a tag que você quer editar. O navegador adota entre os estilos conflitantes aquele que possui seletores mais específicos. Pode ser muito benéfico manter isso em mente e escrever seletores completos que dependem da estrutura das etiquetas direcionando para o caminho que você espera alterar.


By making use of body id's and classes and writing selectors to take into account the leading structure you can greatly minimise the chance of a collision both with Moodle now and in the future.
Ao fazer o uso de classes, identificação de etiquetas e escrevendo seletores para funcionar na estrutura principal se consegue minimizar as chances de uma colisão do Moodle agora e no futuro.


==Layouts==
==Layouts==
Layouts are defined in '''config.php'''.
Layouts são definidos em config.php.


All themes are required to define the layouts they wish to be responsible for as well as create; however, many layout files are required by those layouts. If the theme is overriding another theme then it is a case of deciding which layouts this new theme should override. If the theme is a completely fresh start then you will need to define a layout for each of the different possibilities.  
Todos os temas são requeridos para definir os layouts que eles querem se responsabilizar ou criar; contudo, muitos arquivos de layout são requeridos por aqueles layouts. Se um tema está substituindo outro tema, então este é um caso de decidir qual dos layouts, o mais novo será substituído. Se o tema é completamente novo, então você precisará definir um layout para casa uma das diferentes possibilidades.


It is also important to note that a new theme that will base itself on another theme (overriding it) does not need to define any layouts or use any layout files if there are no changes that it wishes to make to the layouts of the existing theme. The standard theme in Moodle is a good example of this as it extends the base theme simply adding CSS to achieve its look and feel.
É também importante notar que um novo tema que se baseará em se mesmo em outro tema (substituindo ele) não precisa definir qualquer layout ou usar qualquer arquivo de layout se não há mudanças que se quer fazer no layout do tema existente. O tema padrão no Moodle é um bom exemplo disso, pois ele estende o tema base adicionando CSS para conseguir o visual.


So layouts... as mentioned earlier layouts are defined in config.php within $THEME->layouts. The following is an example of one such layout definition:
Então layouts... como mencionado antes, são definidos em config.php em $THEME->layouts. O seguinte é um exemplo de tal definição:
<code php>
<code php>
$THEME->layouts = array(
$THEME->layouts = array(
Line 229: Line 234:
)
)
</code>
</code>
The first thing Moodle looks at is the name of the layout, in this case it is `standard` (the array key in PHP), it then looks at the settings for the layout, this is the theme, file, regions, and default region. There are also a couple of other options that can be set by a layout.
A primeira coisa que o Moodle olha é o nome do layout, neste caso é o ‘padrão’ (o vetor chave em PHP), depois procura pelas configurações de layout, que é o tema, arquivo, regiões, e região padrão. Há também algumas outras opções que podem ser configuradas por um layout.


; theme : is the theme the layout file exists in. That's right you can make use of layouts from other installed themes. ''Optional''
;Tema - theme : é o tema em que o arquivo de layout existe. Isso mesmo, você pode fazer uso dos layouts a partir de outros temas instalados. '''Opcional'''
; file : is the name of the layout file this layout wants to use. ''Required''
;Arquivo - file : é o nome do arquivo do layout que o layout quer usar. '''Requerido'''
; regions : is the different block regions (places you can put blocks) within the theme. ''Required''
;Regiões - regions : são os diferentes bloco de regiões (lugares onde você pode colocar blocos) no tema. '''Requerido'''
; defaultregion : is the default location when adding new blocks. '''Required if regions is non-empty, otherwise optional'''
;Regiõespadrões – defaultregion : é a localização padrão quando adicionados novos blocos. '''Requerido se região não é vazia, se não, opcional'''
; options : an array of layout specific options described in detail below. '''Optional'''
;Opções – options : um vetor das opções específicas do layout mencionado em detalhes abaixo. '''Opcional'''


The '''theme''' is optional. Normally the the layout file is looked for in the current theme, or, if it is not there, in the parent theme. However, you can use a layout file from any other theme by giving the theme name here.


You can define whatever regions you like. You just need to pick an name for each one. Most themes just use one or both of '''side_pre''' and '''side_post''', which is like 'left side' and 'right side', except in right to left languages, when they are reversed. If you say in config.php that your the layout provides regions called 'fred' and 'barney', then you must call $OUTPUT->blocks_for_region('fred') and $OUTPUT->blocks_for_region('barney') somewhere in the layout file.
O '''tema''' é opcional. Normalmente o arquivo de layout é preso ao tema atual, ou, se não está lá, no tema principal. Contudo, você pode usar um arquivo de layout de qualquer outro tema adicionando o nome.  


The final setting '''options''' is a special case that only needs to be set if you want to make use of it. This setting allows the theme designer to specify special options that they would like to create that can be later accessed within the layout file. This allows the theme to make design decisions during the definition and react upon those decisions in what ever layout file is being used.
Você pode definir quais regiões você prefere. Você só precisa escolher o nome de cada qual. A maioria dos temas só usam um ou ambos de '''side_pre''' e '''side_post''',  que seria como ‘lado esquerdo’ e ‘lado direito’, exceto na linguagem direita para esquerda, quando são trocados. Se você disser em config.php que seus layouts regiões chamadas ‘fred’ e ‘barney’, então você deve chamar $OUTPUT->blocks_for_region('fred') and $OUTPUT->blocks_for_region('barney') em algum lugar no arquivo de layout.


One such place this has been used is infact within the base theme. If you take a look first at theme/base/config.php you will notice that several layouts specify options '''nonavbar''' and '''nofooter''' which can both be set to either true or false. Then if we take a look at theme/base/layout/general.php you will spot lines like the following:
A configuração final de opções é um caso especial que só precisa ser ligada se você quiser usar disto. Essas configurações permitem que o desenvolvedor do tema especifique opções especiais que eles gostaria de criar e podem ser acessadas dentro do arquivo do layout. Isso permite que o tema tome decisões de design durante a definição e seja capaz de reagir de acordo com essas decisões em qualquer arquivo de layout que esteja sendo usado.
 
Um desses lugares que isso vem sido usado é no tema base. Se você observar em theme/base/config.php, perceberá que há diversas opções específicas '''nonavbar''' e '''nofooter''' que podem ambas ser marcadas como verdadeiro ou falso. Então se você olhar em  theme/base/layout/general.php você identificará linhas como as seguintes:
<code php>
<code php>
<?php
<?php
Line 257: Line 263:
<?php } ?>
<?php } ?>
</code>
</code>
What you are seeing here is the use of those settings from the layout within the layout file. In this case it is being used to toggle the display of the navigation bar and page footer.
O que você está vendo aqui é o uso de algumas dessas configurações do layout existentes dentro do arquivo de layout. Neste caso, está sendo usado para barra de rolagem e rodapé da página.


==Layout files==
==Arquivo Layout==
A layout file is a file that contains the core HTML structure for a layout including the header, footer, content and block regions. For those of you who are familiar with themes in Moodle 1.9 this is simply header.html and footer.html combined. Of course it is not all HTML, there are bits of HTML and content that Moodle needs to put into the page, within each layout file this will be done by a couple of simple PHP calls to get bits and pieces including content.
O arquivo layout é o arquivo que contem a estrutura do codigo HTML para o layout incluindo o header , conteúdo e regiões de bloco.
Para aqueles de vocês que estão familiarizados com os temas em Moodle 1.9 isto é simplesmente a combinação dos arquivos header.html e footer.html. Claro que não é tudo HTML, há pedaços de codigo e conteúdos que o Moodle precisa colocar na paginas, dentro de cada arquivo de layout isso sera feito por uma simples chamada PHP para obter pedaços e incluir conteúdo.  


Before learning more it is good to understand the two primary objects that will be used in your layout files: $OUTPUT and $PAGE.
Antes de aprender mais, é bom conhecer os dois objetos primários que serão usados ​​em seus arquivos de layout: $OUTPUT e $PAGE.


'''$OUTPUT''' is an instance of the <code>core_renderer</code> class which is defined in lib/outputrenderers.php. Each method is clearly documented there, along with which is appropriate for use within the layout files.
'''$OUTPUT''' é uma instância da classe <code>core_renderer</code> que é definido em lib / outputrenderers.php. Cada método é claramente documentados lá, junto com o que é apropriado para uso dentro dos arquivos de layout.


'''$PAGE''' is an instance of the <code>moodle_page</code> class defined in lib/pagelib.php. Most of the things you will want to use are the properties that are all documented at the top of the file. If you are not familiar with PHP properties, you access them like $PAGE->activityname, just like fields of an ordinary PHP object. (However, behind the scenes the value you get is produced by calling a function. Also, you cannot change these values, they are '''read-only'''. However, you don't need to understand all that if you are just using these properties in your theme.)
'''$PAGE''' é uma instância da classe <code>moodle_page</code> definido no lib / pagelib.php. A maioria das coisas que você vai querer usar são as propriedades que estão documentadas no topo do arquivo. Se você não estiver familiarizado com propriedades do PHP, você deve acessá-los como $ PAGE-> activityname, assim como campos de um objeto PHP comum. (No entanto, em segundo plano, o valor que você recebe é produzido pela chamada de uma função. Além disso, você não pode alterar esses valores, eles são somente de leitura. No entanto, você não precisa entender tudo isso se você está apenas usando essas propriedades no seu tema).


The following is a very simple layout file to illustrate the different bits that make it up:
O seguinte arquivo de layout é uma simples ilustração dos pedaços que o compõem:
<code php>
<code php>
<?php echo $OUTPUT->doctype() ?>
<?php echo $OUTPUT->doctype() ?>
Line 312: Line 319:
</code>
</code>


We assume you know enough HTML to understand the basic structure above, but let's explain the PHP code since that is less obvious.
Nós assumimos que você sabe o suficiente de HTML para compreender a estrutura básica acima, mas vamos explicar o código PHP uma vez que é menos óbvio.
 
<code php>
<code php>
<?php echo $OUTPUT->doctype() ?>
<?php echo $OUTPUT->doctype() ?>
Line 321: Line 329:
<html <?php echo $OUTPUT->htmlattributes() ?>>
<html <?php echo $OUTPUT->htmlattributes() ?>>
</code>
</code>
Here we have started writing the opening html tag and have asked Moodle to give us the HTML attributes that should be applied to it. This again is determined by several settings within the actual HTML install.
Aqui nós começamos a escrever a tag de abertura html e pedimos ao Moodle para nos dar os atributos HTML que deve ser aplicada a ele. Isso novamente é determinada por várias configurações dentro do HTML gerado da instalação do Moodle.


<code php>
<code php>
<?php echo $PAGE->title ?>
<?php echo $PAGE->title ?>
</code>
</code>
This gets us the title for the page.
Isso dá o titulo para a pagina.


<code php>
<code php>
<?php echo $OUTPUT->standard_head_html() ?>
<?php echo $OUTPUT->standard_head_html() ?>
</code>
</code>
This very important call gets us the standard head HTML that needs to be within the HEAD tag of the page. This is where CSS and JavaScript requirements for the top of the page will be output as well as any special script or style tags.
Essa chamada é muito importante pois nos leva ao cabeçalho html padrão que precisamos para esta dentro da tag HEAD da pagina. É onde o CSS e o JavaScript são requisitados no topo do arquivo, bem como qualquer script especial ou tags de estilo.


<code php>
<code php>
<body id="<?php p($PAGE->bodyid); ?>" class="<?php p($PAGE->bodyclasses); ?>">
<body id="<?php p($PAGE->bodyid); ?>" class="<?php p($PAGE->bodyclasses); ?>">
</code>
</code>
Much like the html tag above we have started writing the body tag and have asked for Moodle to get us the desired ID and classes that should be applied to it.
Muito parecido com o tag html acima nós começamos a escrever a tag body and have asked for Moodle to get us the desired ID and classes that should be applied to it.


<code php>
<code php>
Line 342: Line 350:
<div class="headermenu"><?php echo $OUTPUT->login_info(); echo $PAGE->headingmenu; ?></div>
<div class="headermenu"><?php echo $OUTPUT->login_info(); echo $PAGE->headingmenu; ?></div>
</code>
</code>
Here we are creating the header for the page. In this case we want the heading for the page, we want to display the login information which will be the current users username or a link to log in if they are not logged in, and we want the heading menu if there is one.
Aqui estamos criando o cabeçalho da página,Neste caso, queremos o título da página, queremos mostrar as informações de login, que será o nome de usuário username corrente ou um link para efetuar login, se não estiver logado, e queremos o título do menu se existir um.
 


<code php>
<code php>
<?php echo $OUTPUT->blocks_for_region('side-pre') ?>
<?php echo $OUTPUT->blocks_for_region('side-pre') ?>
</code>
</code>
Here we get the HTML to display the blocks that have been added to the page. In this case we have asked for all blocks that have been added to the area labelled ''side-pre''.
Aqui temos o HTML para mostrar os blocos que foram adicionados à página. Neste caso, pedimos para todos os blocos que foram adicionados à área denominada ''side-pre''.


<code php>
<code php>
<?php echo core_renderer::MAIN_CONTENT_TOKEN ?>
<?php echo core_renderer::MAIN_CONTENT_TOKEN ?>
</code>
</code>
This is one of the most important calls within the file, it determines where the actual content for the page gets inserted.
Esse é um dos mais importantes chamadas dentro do arquivo, ele determina onde o conteúdo real da pagina sera inserido.


<code php>
<code php>
<?php echo $OUTPUT->blocks_for_region('side-post') ?>
<?php echo $OUTPUT->blocks_for_region('side-post') ?>
</code>
</code>
Here we get the HTML to display the blocks that have been added to the page. In this case we have asked for all blocks that have been added to the area labelled ''side-post''.
Aqui temos o HTML para mostrar os blocos que foram adicionados à página. Neste caso, pedimos para todos os blocos que foram adicionados à área denominada ''side-post''.


<code php>
<code php>
Line 366: Line 375:
?>
?>
</code>
</code>
This final bit of code gets the content for the footer of the page. It gets the login information which is the same as in the header, a home link, and the standard footer HTML which like the standard head HTML contains all of the script and style tags required by the page and requested to go in the footer.
Esse pedaço final de codigo obtém o conteúdo para o rodapé da página. Ele recebe as informações de login, que é o mesmo que no cabeçalho,[ and the standard footer HTML which like the standard head HTML contains all of the script and style tags required by the page and requested to go in the footer.]


'''''Note''''': Within Moodle 2.0 most of the JavaScript for the page will be included in the footer. This greatly helps reduce the loading time of the page.
'''''Nota''''': Dentro Moodle 2.0 a maioria dos JavaScript para a página serão incluídos no rodapé. Isso ajuda muito a reduzir o tempo de carregamento da página.


When writing layout files think about the different layouts and how the HTML that each makes use of will differ. You will most likely find you do not need a different layout file for each layout, most likely you will be able to reuse the layout files you create across several layouts. You can of course make use of layout options as well to further reduce the number of layout files you need to produce.
Quando você for escrever arquivos de layout deve lembrar que existe diferentes layouts e que o HTML faz o uso de cada um desses diferentes layout. É muito provavel que você nao precisará de um arquivo diferente para cada tema, caso você seja capaz de reutilizar os arquivos que você criou para os varios temas.Você pode naturalmente fazer uso de opções de layout também para reduzir ainda mais o número de arquivos de layout que você precisa para produzir um tema.
É claro que, como mencionado acima, se você estiver personalizando um tema já existente, então talvez você não precise de criar qualquer layouts ou todos arquivos de layout.


Of course as mentioned above if you are customising an existing theme then you may not need to create any layouts or layout files at all.
==Arquivo de idiomas==


==Language File==
Você precisa criar um arquivo de idioma para seu tema com algumas strings padrões nele. No minimo criar um arquivo chamado lang/en.theme_themename.php na sua pasta Tema. Por exemplo, o tema 'standard' tem um arquivo de idioma chamado lang / en / theme_standard.php.


You need to create a language file for your theme with a few standard strings in it. At a minimum create a file called lang/en.theme_themename.php in your theme folder. For example, the 'standard' theme has a language file called lang/en/theme_standard.php.
Você '''deve''' definir as seguintes linhas em seu arquivo(exemplo do tema padrão):
 
You '''must''' define the following lines in your file (example is from standard theme, adapt as required):


<code php>
<code php>
Line 388: Line 396:
</code>
</code>


Without the above you will get notices for the missing strings.
==Fazendo uso de imagens==
Logo no inicio, quando listamos as novas características do sistema de temas, uma das características mencionadas foi a capacidade de substituir qualquer uma das imagens padrões do tema e imagens dentro do Moodle. Neste ponto, vamos olhar para ambos, como fazer uso das suas próprias imagens dentro do seu tema e em seguida vamos ver como substituir as imagens sendo usadas pelo Moodle. Então, vamos ver primeiro um pouco sobre as imagens dentro do Moodle,


==Making use of images==
# Imagens que desejam ser usadas dentro do seu tema '''precisam''' ser colocadas dentro do diretório do seu tema pix.
Right at the start when listing the features of the new themes system one of the features mentioned was the ability to override any of the standard images within Moodle from within your theme. At this point we will look at both how to make use of your own images within your theme, and secondly how to override the images being used by Moodle.
# Você pode usar sub-diretórios dentro do diretório pix de seu tema.
So first up a bit about images within Moodle,
# As imagens usadas pelo codigo do Moodle estão localizados dentro do diretório pix do Moodle.
# Módulos, blocos e outros plugins também devem armazenar suas imagens dentro de um diretório pix.


# Images you want to use within your theme '''need''' to be located within your theme's pix directory.
Assim, vamos fazer uso de suas próprias imagens primeiro. Vamos suponha que você tenha adicionado dois arquivos de imagem para o diretório pix de seu tema.
# You can use sub directories within the pix directory of your theme.
# Images used by Moodle's core are located within the pix directory of Moodle.
# Modules, blocks and other plugins should also store there images within a pix directory.
 
So making use of your own images first up. Lets assume you have added two image files to the pix directory of your theme.


* /theme/yourthemename/pix/imageone.jpg
* /theme/yourthemename/pix/imageone.jpg
* /theme/yourthemename/pix/subdir/imagetwo.png
* /theme/yourthemename/pix/subdir/imagetwo.png


Notice that one image is a JPEG image, and the second is a PNG. Also the second image is in a subdirectory.
Note que a primeira imagem é JPEG e a segunda é uma PNG. Veja também que a segunda imagem esta em um subdiretório.
O trecho de código a seguir ilustra como fazer uso de suas imagens dentro de HTML, se você quisesse usá-los dentro de um arquivo de layout.


The following code snippet illustrates how to make use of your images within HTML, such as if you wanted to use them within a layout file.
<code php>
<code php>
<img src="<?php echo $OUTPUT->pix_url('imageone', 'theme');?>" alt="" />  
<img src="<?php echo $OUTPUT->pix_url('imageone', 'theme');?>" alt="" />  
Line 412: Line 418:
</code>
</code>


'''DO NOT''' include the image file extension. Moodle will work it out automatically and it will not work if you do include it.
'''Não''' incluir a extensão do arquivo de imagem. O Moodle trabalhará com isso automaticamente e não funcionará se você incluir a extensão.  


In this case rather than writing out the URL to the image we use a method of Moodle's output library. Its not too important how that functions works but it is important that we use it as it is what allows images within Moodle to be over-rideable.
Neste caso, ao invés de escrever a URL para a imagem usamos um método da biblioteca Moodle de saída.[Its not too important how that functions works but it is important that we use it as it is what allows images within Moodle to be over-rideable.]


The following is how you would use the images from within CSS as background images.
O seguinte trecho de código mostra como você usaria as imagens de dentro do CSS como imagens de fundo.
<code css>
<code css>
.divone {background-image:url([[pix:theme|imageone]]);}
.divone {background-image:url([[pix:theme|imageone]]);}
.divtwo {background-image:url([[pix:theme|subdir/imagetwo]]);}
.divtwo {background-image:url([[pix:theme|subdir/imagetwo]]);}
</code>
</code>
If this case we have to use some special notations that Moodle looks for. Whenever Moodle hands out a CSS file it first searches for all ''[[something]]'' tags and replaces them with what is required.


The final thing to notice with both of the cases above is that at no point do we include the images file extension.  
Neste caso temos que usar algumas notações especiais que o Moodle procura. Quando Moodle tem em mãos um ficheiro CSS,  ele procura primeiro por todas as tags e substitui-as com o que for necessário.
The reason for this leads us into the next topic, how to override images.
 
A última coisa a notar em ambos os casos acima, é que em nenhum momento podemos incluir a extensão do arquivo de imagens. A razão para isto nos leva ao próximo tópico, como substituir as imagens.
 
A partir de um tema, você pode facilmente substituir qualquer imagem padrão no Moodle simplesmente adicionando a imagem de reposição para o diretório do tema pix na mesma estrutura de diretório do Moodle. Assim, por exemplo se quiséssemos substituir os seguintes duas imagens:


From within a theme you can VERY easily override any standard image within Moodle by simply adding the replacement image to the theme's pix directory in the same sub directory structure as it is in Moodle.
So for instance we wanted to override the following two images:
# /pix/moodlelogo.gif
# /pix/moodlelogo.gif
# /pix/i/user.gif
# /pix/i/user.gif
We would simply need to add our replacement images to the theme in the following locations
Nós simplesmente precisamos adicionar imagens de reposição ao tema nos seguintes locais:
# /theme/themename/pix_core/moodlelogo.gif
# /theme/themename/pix_core/moodlelogo.gif
# /theme/themename/pix_core/i/user.gif
# /theme/themename/pix_core/i/user.gif
''Note that we have created a '''pix_core''' directory in our theme. For module images we need a '''pix_mod''' directory. See [[Themes_2.0_How_to_use_images_within_your_theme|using images within your theme]] for the full story.
Note que criamos um diretório pix_core em nosso tema. Para as imagens do módulo precisamos de um diretório pix_mod. Ver [[Themes_2.0_How_to_use_images_within_your_theme|using images within your theme]] para o tutorial completa..


Now the other very cool thing to mention is that Moodle looks for not just replacements of the same image type (jpg, gif, etc...) but also replacements in any image format. This is why above when working with our images we never specified the images file extension.
Agora, outra coisa muito legal de mencionar é que o Moodle procura não apenas substituições do mesmo tipo de  imagem (jpg, gif, etc ..), mas também substituições em qualquer formato de imagem. É por isso que acima quando trabalhamos com nossas imagens nunca especificamos a extensão do arquivo de imagens. Isto significa que isso também deve funcionar
This means that the following would also work:
# /theme/themename/pix_core/moodlelogo.png
# /theme/themename/pix_core/moodlelogo.png
# /theme/themename/pix_core/i/user.bmp
# /theme/themename/pix_core/i/user.bmp


For a more detailed description of how this all works see the page on [[Themes_2.0_How_to_use_images_within_your_theme|using images within your theme]]
Para uma descrição mais detalhada de como tudo isso funciona, veja a página sobre [[Themes_2.0_How_to_use_images_within_your_theme|using images within your theme]]


==Unobvious Things==
==Coisas não óbvias==
===Getting Your Theme to Appear Correctly in Theme Selector===
===Getting Your Theme to Appear Correctly in Theme Selector===
If you follow the examples on this page to the letter, when you go to the Theme Selector page you may be discouraged to find that your theme does not appear like the other themes do. In fact, instead of your theme's name, you will see something along the lines of <nowiki>[[pluginname]]</nowiki>.  
If you follow the examples on this page to the letter, when you go to the Theme Selector page you may be discouraged to find that your theme does not appear like the other themes do. In fact, instead of your theme's name, you will see something along the lines of <nowiki>[[pluginname]]</nowiki>.  
Line 583: Line 588:
* [[Styling and customising the dock]] - How to style and customise the dock.
* [[Styling and customising the dock]] - How to style and customise the dock.
* [[Theme changes in 2.0]]
* [[Theme changes in 2.0]]
* [[Using jQuery with Moodle 2.0]]
* [[jQuery]]
* [[Themes 2.0 how to clone a Moodle 2.0 theme]]  
* [[Themes 2.0 how to clone a Moodle 2.0 theme]]  
* [http://www.youtube.com/watch?v=OvaU54uh-qA New themes in Moodle 2.0 video]
* [http://www.youtube.com/watch?v=OvaU54uh-qA New themes in Moodle 2.0 video]

Revision as of 07:50, 29 May 2013

Moodle 2.0

Bem vindo ao novo mundo de temas do moodle 2.0 !!

O Moodle Temas permite que você mude o visual do seu site moodle. Você pode usar temas já existentes ou criar seus próprios temas para compartilha com a comunidade moodle. Os temas podem também ser baseados em temas já existentes com algumas personalizações. Você pode fazer isso através do CSS, mudando a estrutura base e também adicionando javascript para adicionar recursos mais avaçados.

A maioria dos temas Moodle são desenvolvidos adicionando algumas mudanças em um tema que já existe. A arquitetura dos Temas do Moodle é desenvolvida de tal forma que a mesma funcione como base quando nada for definido no tema editado. Isso torna mais fácil para quem deseja criar novos temas apenas fazendo algumas mudanças em temas já existentes.

Essa documentação explica como trabalhar com no Moodle e pretende ajudar você a criar ou modificar a maioria do temas do Moodle 2.0.

O que há de novo na versão 2.0

O sistema de temas foi completamente redesenhado no Moodle 2.0. Problemas conhecidos foram endereçados e novas características foram adicionadas para atender solicitações da comunidade Moodle. Infelizmente não foi possível manter a compatibilidade com verões anteriores, então todos os temas de Moodle 1.x devem ser recriados para o Moodle 2.0.

Maiores mudanças incluem:

  • As classes CSS ficaram mais claras e consistentes, alem de IDs em todas paginas do Moodle
  • Introdução a arquivos de layout (templates), descrevendo o layout HTML para diferentes tipos de paginas do Moodle
  • Introdução de processadores, que produzem as pequenas “partes” de uma página HTML. Temas avançados podem ter eles ativados manualmente se for decido
  • Introdução a métodos padronizados para adição de Javascript aos templetes
  • Controle mais fácil dos ícones e imagens do Moodle
  • O antigo tema "standard" (padrão) foi dividio em dois temas:
    • base - contem o layout absolutamente básico, e
    • standard - que adiciona CSS no tema base para torna-lo parecido com antigo tema padrão
  • Ajuste de desempenho: Em condições normais de produção, os arquivos CSS são combinados em um único arquivo otimizado, e ambos, arquivo CSS e javaScript são minimizados para assegurar que não haja desperdício de conexão e trafico.

A estrutura de um tema

Algumas coisas importantes para quem deseja construir bons temas:

  1. config.php - Esse arquivo é requisitado em muitos temas. Ele define as configurações e define requisitos para funcionar o tema Moodle. Isso inclui o tema, arquivo, região, região padrão e opções
  2. Layouts e arquivo de layout - Em config.php existe uma definição para cada tipo de pagina (veja Appendix A: Theme layouts para ver uma lista de 12 tipos). Cada tipo de definição de página diz qual arquivo de layout será utilizado, qual regiões de bloco esse modelo de página deve exibir e assim por diante. O arquivo de layout contém o HTML e o PHP minimo exigido para exibir a estrutura básica das paginas. (Se você conhece Moodle 1.9, Isso seria uma combinação de header.html e footer.html)
  3. O tema base - Não se destina a ser usado para produção de sites. Estabelece o esquema genérico mais simples possível e inclui apenas CSS essencial para o layout ou para o Moodle como um todo. É a base perfeita para se começar a desenha um tema, pois há poucas cores, bordas, margens e alinhamentos para substituir. Você pode simplesmente começar a adicionar o que você precisar.

Arquivos e Pastas

Os arquivos dos temas são localizados em uma pasta com caminho Moodle/Theme e possui subpastas. Cada tema é definido da seguinte forma:

Diretório Arquivo Descrição
/config.php Contém todas as configurações e definições para cada tema.
/lib.php Contém classes especificas e funções que são usadas pelos temas.
/renderers.php Contém qualquer processador personalizado para o tema.
/settings.php Contém configurações personalizadas do tema. Essas configurações locais são definidos pelo tema, permitindo que o usuário do tema possa modificá-lo facilmente. (por exemplo, uma cor de fundo ou uma imagem de cabeçalho)
/javascript/ Todos os arquivos JavaScript específicos para o tema devem ser localizados aqui.
/lang/ Quaisquer arquivos de linguagem especial que o tema exige devem ser localizados aqui.
/layout/ Contém os arquivos de layout do tema.
/pix/ Contém todas as imagens que o tema usa tanto do CSS quanto dos arquivo de layout.
/pix /favicon.ico O favicon para exibir o tema.
/pix /screenshot.jpg Um screenshot do tema pode ser visualizado na tela de seleção dos temas.
/style Localização padrão para os arquivos CSS.
/*.css CSS arquivos que o tema precisa

Há também diversos lugares que folhas de estilo podem ser incluídas (veja o a seção CSS de como e porquê abaixo).

Opções de temas

Todas as opções de temas são definidos dentro do arquivo config.php. As configurações que são mais usadas são: parents,sheets, layouts e javascripts. Dê uma olhada em theme options table para completar essa lista de opções de temas que incluem algumas configurações menos usadas e mais avançadas.


Exemplo de uma configuração basica

Vamos dar uma olhada em um arquivo com configuração básica de tema e as diferentes partes que a estruturam: $THEME->name = 'newtheme';

$THEME->parents = array(

   'base'

);

$THEME->sheets = array(

   'admin',
   'blocks',
   'calendar',
   'course',
   'grade',
   'message',
   'question',
   'user'

);

$THEME->layouts = array(

   'base' => array(
       'theme' => 'newtheme',
       'file' => 'general.php',
       'regions' => array(),
   ),
   'standard' => array(
       'theme' => 'newtheme',
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   )
   //.......

);

$THEME->javascripts_footer = array(

   'navigation'

);

Expandindo as configurações de um exemplo básico

Primeiramente, antes de tudo, você vai notar que tudo é adicionado para $THEME. Esse é o objeto para configuração de tema. Ele é criado usando a configuração padrão do Moodle e em seguida atualizado para qualquer configuração que você adicionar.

$THEME->name
A primeira configuração, é o nome do tema. Ele deve ser simplesmente o nome do tema que você quiser nomear. O mais recomendado é que você use o mesmo nome do diretório do tema.
$THEME->parents
Esse define os temas que o tema estendera. Nesse caso, você esta apenas ampliando o tema base. Então seu tema será uma extensão de outro tema base.
$THEME->sheets
Um vetor contendo os nomes das folhas de estilo CSS para incluir em esse tema. Note que é apenas o nome da folha de estilo e não contém o caminho do diretório ou a extensão do arquivo. No moodle assume que as folhas de estilo do tema serão localizadas no diretório de estilos do tema e tem .css como extensão.
$THEME->layouts
Nesse exemplo, dois layouts foram definidos para substituir o layouts do tema base. Para mais informações você deve ver sessão abaixo layouts.
$THEME->javascripts_footer
A configuração final é incluir um arquivo JavaScript. Assim como as folhas de estilo, você só precisa fornecer o nome dos arquivos. Moodle assumirá que eles estarão no diretório JavaScript do seu tema e serão um arquivo .js .

Note: Quando você começar a escrever seus temas, Certifique-se de dar uma olhada nos arquivos de configuração de outros temas que já vem no Moodle. Você vai ter uma boa idéia de como tudo funciona e vai perceber o que esta acontecendo dentro do tema moodle, conhecendo o que é inclusão ou exclusão dentro do tema.

CSS

Localização dos arquivos CSS

Primeiramente vamos da uma olhada onde o CSS pode ser incluído dentro do Moodle:

\theme\themename\style\*.css
Essa é a localização padrão das folhas de estilo que são usadas por um tema e o local que deve ser usado para o desenvolvimento do seu tema.

Novos desenvolvedores de temas devem notar que a ordem em que os arquivos CSS são encontrados e incluídos cria uma hierarquia. Essa ordem assegura que as regras, dentro das folhas de estilo dos temas, tenham prioridade sobre regras idênticas em outros arquivos que podem ter sido introduzidas antes. Isso pode também se extender a outras definições de arquivo (veja vetor principal no arquivo de configuração) e também garante que as regras/definições do tema CSS tenha a última palavra.

Há outras localizações que podem ser usadas (embora muito raramente) para incluir CSS em uma página. Um desenvolvedor de um arquivo PHP pode especificar manualmente onde se encontra a folha de estilo no Moodle, como um banco de dados. Normalmente, se código esta fazendo isso, é porque existe uma configuração de um não tema ou de um plugin que precisa de uma informação especial de CSS. Como desenvolvedor de temas, você deve estar ciente da localização de arquivos CSS, mas não tem que se preocupar com isso. Aqui estão alguns exemplos:

{pluginpath}\styles.css e.g. \block\blockname\styles.css or \mod\modname\styles.css
Cada plugin pode ter seu próprio arquivo styles.css . Este arquivo deve conter apenas as normas CSS necessárias para o módulo e não deve acrescentar qualquer alteração para a aparência do plugin como cores, tamanho das fontes, ou margens. Nada além daqueles que são verdadeiramente requisitados.

Estilos de tema específicos para um plugin devem ser localizados dentro do diretório de estilo do tema.

{pluginpath}\styles_themename.css
Este só deve ser usado por desenvolvedores de plugins. Permite escrever CSS, que é projetado para um tema específico sem ter que fazer alterações a esse tema. Você irá notar que esse nunca é usado dentro do Moodle e é destinado para ser usado apenas como código de contribuição.

Organização do Núcleo CSS do Moodle

O próximo passo é olhar para a organização e regras do CSS dentro de um tema. Embora, como um desenvolvedor de temas, é responsabilidade sua criar e organizar seu CSS. Por favor, note que os temas padrões que já vem no Moodle tem uma organização muito clara do CSS.

Primeiro tem-se arquivo pagelayout.css. Ele contém o CSS necessário para criar o visual do seu layout. Ele não contém regras que afetam o conteúdo gerado pelo Moodle.

Próximo arquivo é o core.css. Se você abrir o núcleo vai notar que ele contém regras de uso geral (geralmente simples) que não se aplicam a uma seção especifica do Moodle e sim ao Moodle como um todo.

Também pode haver regras que se relacionam com seções específicas. No entanto, isso é feito apenas quando há apenas algumas regras para essa seção. Esses pequenos grupos de regras são agrupados e separados por comentários de identificação para cada seção.

Finalmente, existem todos os outros arquivos CSS, você vai notar que há um arquivo para cada seção do Moodle, que tem uma coleção significativa de regras.

Para aqueles que estão familiarizados com tema Moodle 1.9, esta organização terá uma grande mudança. Em 1.9, o CSS foi organizado pela sua natureza (por exemplo: cores, layout, outros.)


Como escrever regras do CSS eficazes dentro do Moodle

Em Moodle 2.0, escrever boas regras de CSS é muito importante.

Devido a requisitos de desempenho e limitações do navegador, todos os arquivos CSS são combinados em um único arquivo CSS que é incluído sempre. Isto significa que as regras precisam ser escritas de tal forma que minimize as chances de uma colisão, levando a aplicação de estilos indesejados. Por outro lado, escrever um bom CSS é algo que muitos desenvolvedores aspiram para que nós implementemos em diversas classes da estrutura e acaba estimulando desenvolvedores a usar o nome apropriado das classes.


<body> CSS id e classes

A partir do Moodle 2.0 a tag ID (etiqueta de identificação) que é aplicado à estrutura será sempre uma representação de seu endereço. Por exemplo, se você está olhando para uma mensagem do fórum e o endereço é "mod / forum / / view.php ', então a tag ID da estrutura será " # page-mod-forum-view ".

Como a identificação da estrutura atribuida ao URI também é explodida para formar diversar classes CSS que são adicionadas para a estrutura, então o exemplo '/mod/forum/view' deveria acabar com a seguinte classe adicionada para a estrutura '.path-mod', '.path-mod-forum'. Observe que '.path-mod-forum-view' não é adicionado como uma classe, sendo intencionalmente deixado de for a para evitar confusão e duplicação, visto que as regras podem ligar diretamente para a página usando o ID e não precisa da classe final.

O ID e as classes do corpo descrito acima irão forma o básico para muitas das regras CSS que você terá que escrever para o seu tema, no entanto, existe muitas outras classes muito úteis que podem ser adicionadas as tags do corpo. Algumas das classes mais interessantes estão listadas abaixo.
  • Se o JavaScript é habilitado, então 'jsenabled1' será adicionado como uma classe para a tag do corpo, permitindo-lhe estilo baseado em JavaScript ser ativado ou não
  • Ou 'dir-rtl "ou" dir-ltr' será adicionado ao corpo como uma classe, dependendo da direção do pacote de idioma: rtl = direita para a esquerda, ltr = esquerda para a direita. Isto permite determinar o seu alinhamento de texto com base na língua, se necessário.
  • A classe será adicionada para representar o pacote de idioma em uso atualmente, por padrão en_utf8 é usada pelo Moodle e resultará na adição da na classe 'lang-en_utf8 " à tag do corpo
  • O wwwroot para Moodle também será convertido em uma classe e adicionado à tag do corpo, o que lhe permite criar um estilo para seu tema baseado na URL através do qual ele foi atingido. Por exemplo,http://sam.moodle.local/moodle/ se tornará ". sam-moodle-local-moodle '
  • Se o usuario corrente não esta logado então '.notloggedin' 'será adicionado à tag do corpo.

O que tudo isso parece na prática? Bem, usando o exemplo acima / mod / forum / view.php, você teria pelo menos a seguinte etiqueta de corpo: <body id=”page-mod-forum-view” class=”path-mod path-mod-forum” />

Escrevendo suas regras

Seguindo as melhores praticas de CSS e compreendendo a ordem em cascata de CSS , o desenvolvedor do tema poderá reduzir colisões e linhas do CSS que é escrito. Classes CSS foram colocadas em locais onde se acredita que qualquer um possa querer aplicar seus próprios estilos CSS.

Ao começar a escrever regras certifique-se que você tem um bom entendimento de onde você quer que essas regras sejam aplicadas, é uma boa idéia para tirar o máximo partido das classes do body acima mencionadas. Se você quiser escrever uma regra para uma página específica deve-se usar o ID para a tag do corpo:

#page-mod-forum-view .forumpost {border:1px solid orange;)

Se você quiser escrever uma regra que seja aplicada para todo o forum:

.path-mod-forum .forumpost {border:1px solid orange;}

Outra coisa muito importante para levar em consideração é a estrutura que antecederam a tag que você quer editar. O navegador adota entre os estilos conflitantes aquele que possui seletores mais específicos. Pode ser muito benéfico manter isso em mente e escrever seletores completos que dependem da estrutura das etiquetas direcionando para o caminho que você espera alterar.

Ao fazer o uso de classes, identificação de etiquetas e escrevendo seletores para funcionar na estrutura principal se consegue minimizar as chances de uma colisão do Moodle agora e no futuro.

Layouts

Layouts são definidos em config.php.

Todos os temas são requeridos para definir os layouts que eles querem se responsabilizar ou criar; contudo, muitos arquivos de layout são requeridos por aqueles layouts. Se um tema está substituindo outro tema, então este é um caso de decidir qual dos layouts, o mais novo será substituído. Se o tema é completamente novo, então você precisará definir um layout para casa uma das diferentes possibilidades.

É também importante notar que um novo tema que se baseará em se mesmo em outro tema (substituindo ele) não precisa definir qualquer layout ou usar qualquer arquivo de layout se não há mudanças que se quer fazer no layout do tema existente. O tema padrão no Moodle é um bom exemplo disso, pois ele estende o tema base adicionando CSS para conseguir o visual.

Então layouts... como mencionado antes, são definidos em config.php em $THEME->layouts. O seguinte é um exemplo de tal definição: $THEME->layouts = array(

   // Standard layout with blocks, this is recommended for most pages with general information
   'standard' => array(
       'theme' => 'base',
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post'
   )

) A primeira coisa que o Moodle olha é o nome do layout, neste caso é o ‘padrão’ (o vetor chave em PHP), depois procura pelas configurações de layout, que é o tema, arquivo, regiões, e região padrão. Há também algumas outras opções que podem ser configuradas por um layout.

Tema - theme
é o tema em que o arquivo de layout existe. Isso mesmo, você pode fazer uso dos layouts a partir de outros temas instalados. Opcional
Arquivo - file
é o nome do arquivo do layout que o layout quer usar. Requerido
Regiões - regions
são os diferentes bloco de regiões (lugares onde você pode colocar blocos) no tema. Requerido
Regiõespadrões – defaultregion
é a localização padrão quando adicionados novos blocos. Requerido se região não é vazia, se não, opcional
Opções – options
um vetor das opções específicas do layout mencionado em detalhes abaixo. Opcional


O tema é opcional. Normalmente o arquivo de layout é preso ao tema atual, ou, se não está lá, no tema principal. Contudo, você pode usar um arquivo de layout de qualquer outro tema adicionando o nome.

Você pode definir quais regiões você prefere. Você só precisa escolher o nome de cada qual. A maioria dos temas só usam um ou ambos de side_pre e side_post, que seria como ‘lado esquerdo’ e ‘lado direito’, exceto na linguagem direita para esquerda, quando são trocados. Se você disser em config.php que seus layouts regiões chamadas ‘fred’ e ‘barney’, então você deve chamar $OUTPUT->blocks_for_region('fred') and $OUTPUT->blocks_for_region('barney') em algum lugar no arquivo de layout.

A configuração final de opções é um caso especial que só precisa ser ligada se você quiser usar disto. Essas configurações permitem que o desenvolvedor do tema especifique opções especiais que eles gostaria de criar e podem ser acessadas dentro do arquivo do layout. Isso permite que o tema tome decisões de design durante a definição e seja capaz de reagir de acordo com essas decisões em qualquer arquivo de layout que esteja sendo usado.

Um desses lugares que isso vem sido usado é no tema base. Se você observar em theme/base/config.php, perceberá que há diversas opções específicas nonavbar e nofooter que podem ambas ser marcadas como verdadeiro ou falso. Então se você olhar em theme/base/layout/general.php você identificará linhas como as seguintes: <?php $hasnavbar = (empty($PAGE->layout_options['nonavbar']) && $PAGE->has_navbar()); $hasfooter = (empty($PAGE->layout_options['nofooter'])); ?> ............ <?php if ($hasnavbar) { ?>

<?php } ?> O que você está vendo aqui é o uso de algumas dessas configurações do layout existentes dentro do arquivo de layout. Neste caso, está sendo usado para barra de rolagem e rodapé da página.

Arquivo Layout

O arquivo layout é o arquivo que contem a estrutura do codigo HTML para o layout incluindo o header , conteúdo e regiões de bloco. Para aqueles de vocês que estão familiarizados com os temas em Moodle 1.9 isto é simplesmente a combinação dos arquivos header.html e footer.html. Claro que não é tudo HTML, há pedaços de codigo e conteúdos que o Moodle precisa colocar na paginas, dentro de cada arquivo de layout isso sera feito por uma simples chamada PHP para obter pedaços e incluir conteúdo.

Antes de aprender mais, é bom conhecer os dois objetos primários que serão usados ​​em seus arquivos de layout: $OUTPUT e $PAGE.

$OUTPUT é uma instância da classe core_renderer que é definido em lib / outputrenderers.php. Cada método é claramente documentados lá, junto com o que é apropriado para uso dentro dos arquivos de layout.

$PAGE é uma instância da classe moodle_page definido no lib / pagelib.php. A maioria das coisas que você vai querer usar são as propriedades que estão documentadas no topo do arquivo. Se você não estiver familiarizado com propriedades do PHP, você deve acessá-los como $ PAGE-> activityname, assim como campos de um objeto PHP comum. (No entanto, em segundo plano, o valor que você recebe é produzido pela chamada de uma função. Além disso, você não pode alterar esses valores, eles são somente de leitura. No entanto, você não precisa entender tudo isso se você está apenas usando essas propriedades no seu tema).

O seguinte arquivo de layout é uma simples ilustração dos pedaços que o compõem: <?php echo $OUTPUT->doctype() ?> <html <?php echo $OUTPUT->htmlattributes() ?>> <head>

   <title><?php echo $PAGE->title ?></title>
   <?php echo $OUTPUT->standard_head_html() ?>

</head> <body id="<?php p($PAGE->bodyid) ?>" class="<?php p($PAGE->bodyclasses) ?>"> <?php echo $OUTPUT->standard_top_of_body_html() ?>

<?php echo $PAGE->heading ?>

<?php echo $OUTPUT->login_info(); echo $PAGE->headingmenu; ?>
           <?php echo $OUTPUT->blocks_for_region('side-pre') ?>
           <?php echo core_renderer::MAIN_CONTENT_TOKEN ?>
           <?php echo $OUTPUT->blocks_for_region('side-post') ?>
           <?php
           echo $OUTPUT->login_info();
           echo $OUTPUT->home_link();
           echo $OUTPUT->standard_footer_html();
           ?>

<?php echo $OUTPUT->standard_end_of_body_html() ?> </body> </html>

Nós assumimos que você sabe o suficiente de HTML para compreender a estrutura básica acima, mas vamos explicar o código PHP uma vez que é menos óbvio.

<?php echo $OUTPUT->doctype() ?> This occurs at the VERY top of the page, it must be the first bit of output and is responsible for adding the (X)HTML document type definition to the page. This of course is determined by the settings of the site and is one of the things that the theme designer has no control over.

<html <?php echo $OUTPUT->htmlattributes() ?>> Aqui nós começamos a escrever a tag de abertura html e pedimos ao Moodle para nos dar os atributos HTML que deve ser aplicada a ele. Isso novamente é determinada por várias configurações dentro do HTML gerado da instalação do Moodle.

<?php echo $PAGE->title ?> Isso dá o titulo para a pagina.

<?php echo $OUTPUT->standard_head_html() ?> Essa chamada é muito importante pois nos leva ao cabeçalho html padrão que precisamos para esta dentro da tag HEAD da pagina. É onde o CSS e o JavaScript são requisitados no topo do arquivo, bem como qualquer script especial ou tags de estilo.

<body id="<?php p($PAGE->bodyid); ?>" class="<?php p($PAGE->bodyclasses); ?>"> Muito parecido com o tag html acima nós começamos a escrever a tag body and have asked for Moodle to get us the desired ID and classes that should be applied to it.

<?php echo $PAGE->heading; ?>

<?php echo $OUTPUT->login_info(); echo $PAGE->headingmenu; ?>

Aqui estamos criando o cabeçalho da página,Neste caso, queremos o título da página, queremos mostrar as informações de login, que será o nome de usuário username corrente ou um link para efetuar login, se não estiver logado, e queremos o título do menu se existir um.


<?php echo $OUTPUT->blocks_for_region('side-pre') ?> Aqui temos o HTML para mostrar os blocos que foram adicionados à página. Neste caso, pedimos para todos os blocos que foram adicionados à área denominada side-pre.

<?php echo core_renderer::MAIN_CONTENT_TOKEN ?> Esse é um dos mais importantes chamadas dentro do arquivo, ele determina onde o conteúdo real da pagina sera inserido.

<?php echo $OUTPUT->blocks_for_region('side-post') ?> Aqui temos o HTML para mostrar os blocos que foram adicionados à página. Neste caso, pedimos para todos os blocos que foram adicionados à área denominada side-post.

<?php echo $OUTPUT->login_info(); echo $OUTPUT->home_link(); echo $OUTPUT->standard_footer_html(); ?> Esse pedaço final de codigo obtém o conteúdo para o rodapé da página. Ele recebe as informações de login, que é o mesmo que no cabeçalho,[ and the standard footer HTML which like the standard head HTML contains all of the script and style tags required by the page and requested to go in the footer.]

Nota: Dentro Moodle 2.0 a maioria dos JavaScript para a página serão incluídos no rodapé. Isso ajuda muito a reduzir o tempo de carregamento da página.

Quando você for escrever arquivos de layout deve lembrar que existe diferentes layouts e que o HTML faz o uso de cada um desses diferentes layout. É muito provavel que você nao precisará de um arquivo diferente para cada tema, caso você seja capaz de reutilizar os arquivos que você criou para os varios temas.Você pode naturalmente fazer uso de opções de layout também para reduzir ainda mais o número de arquivos de layout que você precisa para produzir um tema. É claro que, como mencionado acima, se você estiver personalizando um tema já existente, então talvez você não precise de criar qualquer layouts ou todos arquivos de layout.

Arquivo de idiomas

Você precisa criar um arquivo de idioma para seu tema com algumas strings padrões nele. No minimo criar um arquivo chamado lang/en.theme_themename.php na sua pasta Tema. Por exemplo, o tema 'standard' tem um arquivo de idioma chamado lang / en / theme_standard.php.

Você deve definir as seguintes linhas em seu arquivo(exemplo do tema padrão):

$string['pluginname'] = 'Standard'; $string['region-side-post'] = 'Right'; $string['region-side-pre'] = 'Left'; $string['choosereadme'] = 'This theme is a very basic white theme, with a minimum amount of

CSS added to the base theme to make it actually usable.';

Fazendo uso de imagens

Logo no inicio, quando listamos as novas características do sistema de temas, uma das características mencionadas foi a capacidade de substituir qualquer uma das imagens padrões do tema e imagens dentro do Moodle. Neste ponto, vamos olhar para ambos, como fazer uso das suas próprias imagens dentro do seu tema e em seguida vamos ver como substituir as imagens sendo usadas pelo Moodle. Então, vamos ver primeiro um pouco sobre as imagens dentro do Moodle,

  1. Imagens que desejam ser usadas dentro do seu tema precisam ser colocadas dentro do diretório do seu tema pix.
  2. Você pode usar sub-diretórios dentro do diretório pix de seu tema.
  3. As imagens usadas pelo codigo do Moodle estão localizados dentro do diretório pix do Moodle.
  4. Módulos, blocos e outros plugins também devem armazenar suas imagens dentro de um diretório pix.

Assim, vamos fazer uso de suas próprias imagens primeiro. Vamos suponha que você tenha adicionado dois arquivos de imagem para o diretório pix de seu tema.

  • /theme/yourthemename/pix/imageone.jpg
  • /theme/yourthemename/pix/subdir/imagetwo.png

Note que a primeira imagem é JPEG e a segunda é uma PNG. Veja também que a segunda imagem esta em um subdiretório.

O trecho de código a seguir ilustra como fazer uso de suas imagens dentro de HTML, se você quisesse usá-los dentro de um arquivo de layout.

<img src="<?php echo $OUTPUT->pix_url('imageone', 'theme');?>" alt="" /> <img src="<?php echo $OUTPUT->pix_url('subdir/imagetwo', 'theme');?>" alt="" />

Não incluir a extensão do arquivo de imagem. O Moodle trabalhará com isso automaticamente e não funcionará se você incluir a extensão.

Neste caso, ao invés de escrever a URL para a imagem usamos um método da biblioteca Moodle de saída.[Its not too important how that functions works but it is important that we use it as it is what allows images within Moodle to be over-rideable.]

O seguinte trecho de código mostra como você usaria as imagens de dentro do CSS como imagens de fundo. .divone {background-image:url(imageone);} .divtwo {background-image:url(subdir/imagetwo);}

Neste caso temos que usar algumas notações especiais que o Moodle procura. Quando Moodle tem em mãos um ficheiro CSS, ele procura primeiro por todas as tags e substitui-as com o que for necessário.

A última coisa a notar em ambos os casos acima, é que em nenhum momento podemos incluir a extensão do arquivo de imagens. A razão para isto nos leva ao próximo tópico, como substituir as imagens.

A partir de um tema, você pode facilmente substituir qualquer imagem padrão no Moodle simplesmente adicionando a imagem de reposição para o diretório do tema pix na mesma estrutura de diretório do Moodle. Assim, por exemplo se quiséssemos substituir os seguintes duas imagens:

  1. /pix/moodlelogo.gif
  2. /pix/i/user.gif

Nós simplesmente precisamos adicionar imagens de reposição ao tema nos seguintes locais:

  1. /theme/themename/pix_core/moodlelogo.gif
  2. /theme/themename/pix_core/i/user.gif

Note que criamos um diretório pix_core em nosso tema. Para as imagens do módulo precisamos de um diretório pix_mod. Ver using images within your theme para o tutorial completa..

Agora, outra coisa muito legal de mencionar é que o Moodle procura não apenas substituições do mesmo tipo de imagem (jpg, gif, etc ..), mas também substituições em qualquer formato de imagem. É por isso que acima quando trabalhamos com nossas imagens nunca especificamos a extensão do arquivo de imagens. Isto significa que isso também deve funcionar

  1. /theme/themename/pix_core/moodlelogo.png
  2. /theme/themename/pix_core/i/user.bmp

Para uma descrição mais detalhada de como tudo isso funciona, veja a página sobre using images within your theme

Coisas não óbvias

Getting Your Theme to Appear Correctly in Theme Selector

If you follow the examples on this page to the letter, when you go to the Theme Selector page you may be discouraged to find that your theme does not appear like the other themes do. In fact, instead of your theme's name, you will see something along the lines of [[pluginname]].

To correct this, you must add the /lang/en/theme_THEMENAME.php file, where THEMENAME is the name of the theme folder. Inside that file, add the string "$string['pluginname'] = 'THEMENAME'; ". Make THEMENAME the name of your theme, however you want it displayed in the Theme selector.

The screenshot for the theme should be about 500x400 px.

Required theme divs

Some parts of Moodle may rely on particular divs, for example the div with id 'page-header'.

Consequently all themes must include at least the divs (with the same ids) that are present in the 'base' theme.

Missing out these elements may result in unexpected behaviour within specific modules or other plugins.

Appendix A

Theme options as of April 28th, 2010

Setting Effect
$THEME->csspostprocess Allows the user to provide the name of a function that all CSS should be passed to before being delivered.
$THEME->editor_sheets An array of stylesheets to include within the body of the editor.
$THEME->enable_dock If set to true the side dock is enabled for blocks
$THEME->hidefromselector Used to hide a theme from the theme selector (unless theme designer mode is on). Accepts true or false.
$THEME->filter_mediaplugin_colors Used to control the colours used in the small media player for the filters
$THEME->javascripts An array containing the names of JavaScript files located in /javascript/ to include in the theme. (gets included in the head)
$THEME->javascripts_footer As above but will be included in the page footer.
$THEME->larrow Overrides the left arrow image used throughout Moodle
$THEME->layouts An array setting the layouts for the theme
$THEME->name Name of the theme. Most likely the name of the directory in which this file resides.
$THEME->parents An array of themes to inherit from
$THEME->parents_exclude_javascripts An array of JavaScript files NOT to inherit from the themes parents
$THEME->parents_exclude_sheets An array of stylesheets not to inherit from the themes parents
$THEME->plugins_exclude_sheets An array of plugin sheets to ignore and not include.
$THEME->rarrow Overrides the right arrow image used throughout Moodle
$THEME->renderfactory Sets a custom render factory to use with the theme, used when working with custom renderers.
$THEME->resource_mp3player_colors Controls the colours for the MP3 player
$THEME->sheets An array of stylesheets to include for this theme. Should be located in the theme's style directory.

The different layouts as of August 17th, 2010

Layout Purpose
base Most backwards compatible layout without the blocks - this is the layout used by default.
standard Standard layout with blocks, this is recommended for most pages with general information.
course Main course page.
coursecategory Use for browsing through course categories.
incourse Default layout while browsing a course, typical for modules.
frontpage The site home page.
admin Administration pages and scripts.
mydashboard My dashboard page.
mypublic My public page.
login The login page.
popup Pages that appear in pop-up windows - no navigation, no blocks, no header.
frametop Used for legacy frame layouts only. No blocks and minimal footer.
embedded Embeded pages, like iframe/object embedded in moodleform - it needs as much space as possible
maintenance Used during upgrade and install. This must not have any blocks, and it is good idea if it does not have links to other places - for example there should not be a home link in the footer.
print Used when the page is being displayed specifically for printing.

See also