Criando sua Primeira Completo Moodle Tema

Então, vamos rachar em…

Criar um novo tema

Encontrar um tema base para criar o seu Moodle tema é a primeira coisa que você precisa fazer.Existem, no entanto, várias maneiras de fazer isso; você pode fazer uma cópia do tema padrãoe renomeá-lo como você fez em parte deste artigo, ou você pode usar um tema pai que também é baseado no tema padrão.

o ponto importante aqui é que o tema padrão que vem com o Moodle é a pedra angular do processo de tema do Moodle. Todos os outros temas do Moodle devem ser baseados neste tema e normalmente descreveriam as diferenças do tema padrão. Embora esse método funcione e seja uma maneira simples de começar a usar o Moodle theming, ele causa problemas, pois novos recursos podem ser adicionados ao Moodle que podem fazer com que seu tema seja exibido ou funcione incorretamente. O tema padrão sempre será atualizado antes do lançamento de um novo lançamento do Moodle. Portanto, se você optar por fazer uma cópia do tema padrão e alterar seus estilos, seria melhor certificar-se de que você use um tema pai também. Desta forma, o tema pai será o seu tema base, juntamente com as alterações que você faz à sua cópia do tema padrão.

no entanto, existe outra maneira de criar seu primeiro tema, e isso é criar uma cópia de um tema que está muito próximo do tema padrão, como o standardwhite, e use isso como seu tema. O Moodle usará o tema padrão como tema base e aplicará quaisquer alterações feitas ao tema standardwhite na parte superior (pai). Tudo o que estamos fazendo é descrever as diferenças entre o padrão e o padrãotemas brancos. Isso é melhor porque os desenvolvedores do Moodle às vezes fazem alterações no tema padrão para estarem atualizados com os novos recursos do Moodle. Isso significa que em cada atualização do Moodle, seu tema padrão, a pasta será atualizada automaticamente, evitando assim quaisquer problemas de exibição desagradáveis causados por atualizações do Moodle.

a maneira pela qual você configura os temas do Moodle depende completamente de você. Se você vir um tema que é quase o que você quer e não há realmente muitas mudanças necessárias, então usar um tema pai faz sentido, já que a maioria dos estilos que você precisa já foram escritos. No entanto, se você deseja criar um tema completamente diferente de qualquer outro tema ou deseja realmente entrar no Moodle theming, usar uma cópia de uma das folhas padrão seria melhor.

então vamos continuar e ver quais são as diferenças ao usar configurações de tema diferentes e ver que efeito esses métodos diferentes têm no processo de tema.

• navegue até a pasta do tema em C: Arquivos do Programapache software FoundationApache 2.2 htdocstheme.
• Copie o tema padrão clicando com o botão direito do mouse na pasta do tema e escolhendo copiar.
• cole o tema copiado no diretório do tema (o mesmo diretório em que você está atualmente).
• renomeie a cópia da pasta padrão para blackandblue ou qualquer outro nome que você deseja escolher (lembre-se de não usar maiúsculas ou espaços).
• abra seu site Moodle e navegue até aparência de administração do Site / temas / seletor de tema / e escolha o tema blackandblue que você acabou de criar.

você deve ter notado que o tema mostrado na captura de tela anterior tem um cabeçalho que diz tema preto e azul. Isso ocorre porque adicionei isso ao nome completo do site na página de Configurações da primeira página.

tempo para ação-definindo um tema pai

1. abra seu navegador da web e navegue até seu site Moodle e faça login como administrador.
2. vá para o seletor de Administração | Aparência | Temas | Tema do Site e escolha seu tema blackandblue se ainda não estiver selecionado.
3. navegue até a raiz da sua pasta blackandblue, clique com o botão direito do mouse na configuração.arquivo php e escolha Abrir com / WordPad.

4. você precisa fazer quatro alterações neste arquivo para que você possa usar este tema e um tema pai, garantindo que você ainda use o tema padrão padrão como sua base. Aqui estão as alterações:

   $TEMA->folhas = array('user_styles');
   $TEMA->standardsheets = true;
   $TEMA->pai = 'outono';
   $TEMA->parentsheets = array('estilos');

   Vamos olhar cada uma dessas declarações, em turno.

   $THEME- > sheets = array ('user_styles');

   isso contém os nomes de todos os arquivos de folha de estilo que você deseja incluir neste Para o seu tema blackandblue, ou seja, user_styles.

   $THEME->standardsheets = true; 

   este parâmetro é usado para incluir as folhas de estilo do tema padrão. Se estiver definido como True, ele usará todas as folhas de estilo no tema padrão. Alternativamente, ele pode ser definido como uma matriz para carregar folhas de estilo individuais em qualquer ordem necessária. Definimos isso como verdadeiro, então usaremos todas as folhas de estilo do tema padrão.

    $THEME - > parent = 'autumn';

   esta variável pode ser definida para usar um tema como o tema pai, que é incluído antes do tema atual. Isso tornará mais fácil fazer alterações em outro tema sem ter que alterar os arquivos reais.

    $THEME- > parentsheets = array ('styles');

   esta variável pode ser usada para escolher todas as folhas de estilo do tema pai ou arquivos individuais. Foi definido para incluir os estilos.arquivo css do tema pai, ou seja, outono. Como há apenas uma folha de estilo no tema Outono, você pode definir essa variável como True. De qualquer forma, você terá o mesmo resultado.

5. Salve themeblackandblueconfig.php, e atualize sua janela do navegador da web. Você deve ver algo semelhante à imagem a seguir. Observe que seus blocos podem ser diferentes dos abaixo, mas você pode ignorar isso.

o que acabou de acontecer?

Ok, então agora você tem uma cópia do tema padrão que usa o tema de outono (por Patrick Malley) como seu pai. Você deve ter notado que o cabeçalho não está correto e que o cabeçalho do tema de outono Adequado não está sendo exibido. Bem, isso ocorre porque você está essencialmente usando a cópia do tema padrão e que o cabeçalho deste tema é o que você vê acima. São apenas os arquivos CSS incluídos nesta hierarquia, portanto, quaisquer alterações de HTML não serão vistas até que você edite o cabeçalho do seu tema padrão.arquivo html.

tenha um herói go-escolha outro tema pai

volte e dê uma olhada em alguns dos temas em Moodle.org e baixe um que você gosta. Adicione este tema como um tema pai à configuração do seu tema blackandblue.arquivo php, mas desta vez escolha quais folhas de estilo você deseja usar a partir desse tema. O tema de volta às Aulas é bom para este exercício, pois suas folhas de estilo são claramente rotuladas. Então você

copiando os arquivos de cabeçalho e rodapé

para mostrar que você está usando os arquivos CSS do tema de outono e os arquivos HTML do tema padrão, você pode simplesmente ir e copiar o cabeçalho.html e rodapé.arquivos html do tema de Outono de Patrick Malley e cole-os na pasta do seu tema blackandblue. Não se preocupe em Sobrescrever seus arquivos de cabeçalho e rodapé, pois você sempre pode copiá-los novamente da pasta de tema padrão ac tual.

tempo para ação-copiando o cabeçalho.html e rodapé.arquivos html

1. navegue até a pasta do tema de outono e destaque o cabeçalho.html e rodapé.arquivos html mantendo pressionada a tecla Ctrl e clicando nos dois. Clique com o botão direito do mouse nos arquivos selecionados e escolha Copiar.
2. navegue até a pasta do seu tema blackandblue e clique com o botão direito e escolha Colar.
3. volte para a janela do seu navegador e pressione o botão F5 para atualizar a página. Agora você verá o tema completo do outono.

o que acabou de acontecer?

você copiou o cabeçalho do tema de outono.html e rodapé.arquivos html em seu tema blackandblue, para que você possa ver o tema de outono Completo funcionando. Você provavelmente não vai realmente usar o cabeçalho.html e rodapé.arquivos html que você acabou de copiar, pois este foi apenas um exemplo de como o processo de tema do Moodle funciona.

então agora você tem uma cópia não modificada do tema padrão chamado blackandblue, que está usando o tema de outono como seu tema pai. Tudo o que você precisa fazer agora para fazer alterações neste tema é editar seu arquivo CSS na pasta blackandblue theme.

theme folder housework

no entanto, há algumas coisas que você precisa fazer primeiro, pois você tem uma cópia exata do tema padrão além do cabeçalho.html e rodapé.arquivos html. Esta pasta copiada tem arquivos que você não precisa, pois o único arquivo que você definiu para o seu tema a ser usado foi o user_styles.arquivo css na configuração.arquivo php anterior. Esta foi a primeira mudança que você fez:

$THEME- >sheets = array ('user_styles');

o user_style.o arquivo css não existe na pasta do seu tema blackandblue, então você precisará criá-lo. Você também precisará excluir quaisquer outros arquivos CSS que estejam presentes, pois seu novo tema blackandblue usará apenas uma folha de estilo, ou seja, os user_styles.arquivo css que você criará nas seções a seguir.

tempo de ação-criando nossa folha de estilo

1. clique com o botão direito em qualquer lugar da sua pasta blackandblue e escolha Novo documento de texto|.
2. renomeie este documento de texto para user_styles.css clicando com o botão direito novamente e escolhendo renomear.

hora da ação-excluindo arquivos CSS que não precisamos

1. exclua os seguintes arquivos CSS selecionando-os e clicando com o botão direito do mouse nos arquivos selecionados e escolhendo excluir.
   • styles_color.css
   • styles_ie6.css
   • styles_ie6.css
   • styles_ie7.css
   • styles_layout.css
   • styles_moz.css

   {antecedentes: #000000;}

   

o que aconteceu?

nas duas últimas tarefas, você criou um arquivo CSS vazio chamado user_style.css na pasta do seu tema blackandblue. Em seguida, você excluiu todos os arquivos CSS na pasta do seu tema blackandblue, pois não precisará mais deles. Lembre-se, essas são apenas cópias dos arquivos CSS na pasta tema padrão e você definiu seu tema para usar o tema padrão como base na configuração do tema blackandblue.arquivo php.

Vamos fazer algumas alterações

Agora que você configurou o tema da maneira que você quer, que seja, você está usando seu próprio blackandblue tema usando o tema padrão como base e o Outono tema como o pai. Siga em frente e faça algumas alterações em seu user_style.arquivo css para que você possa ver o efeito que isso tem no seu tema e verificar se toda a sua configuração.as configurações do arquivo php estão corretas. Lembre-se de que todos os estilos atuais estão sendo herdados do tema do outono.

tempo de ação-verificando nossa configuração

1. abra seu site Moodle com o tema atual (que deve ser blackandblue, mas se parece com o tema de outono).
2. navegue até a pasta do seu tema blackandblue, clique com o botão direito do mouse no user_style.arquivo css e escolha Abrir. Este arquivo deve estar completamente em branco.

3. Digite a seguinte linha de CSS para o elemento body e salve o arquivo fi:

    body {
    background: #000000;
   }

   

4. agora atualize a janela do seu navegador. Você verá que o fundo agora está Preto.

   

nota: ao usar o Firebug para identificar estilos que estão sendo usados, pode nem sempre ser óbvio onde eles estão ou qual estilo está controlando esse elemento da página. Um exemplo disso é o código body {background: #000000;} que acabamos de colar em nosso user_style.arquivo css. Se tivéssemos usado o Firebug para identificar esse estilo, não o teríamos encontrado. Em vez disso, acabei de dar uma olhada no arquivo CSS do tema Outono. O que estou tentando dizer aqui é que sempre haverá um elemento de cutucar e tentar e errar.

o que aconteceu?

tudo parece bem lá, não é? Você adicionou uma declaração de estilo ao seu user_style vazio.arquivo css para alterar a cor de fundo e ter verificado as alterações no seu navegador. Agora você sabe como os temas pai funcionam e sabe que você só precisa copiar os estilos do Firebug para o seu user_style.arquivo css e edite as declarações de estilo que precisam ser alteradas.