desenvolver um tema para moodle 2.7 - 9º moodle moot brasil
DESCRIPTION
Esta apresentação aborda o desenvolvimento de um tema para o LMS Moodle a partir do tema Clean utilizando o tema Bootstrapbase como tema pai/base. Apresentado no 9º Moodle Moot Brasil, na Universidade Federal de Santa Catarina em Florianópolis/SC no dia 10 de outubro de 2014.TRANSCRIPT
![Page 1: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/1.jpg)
Michael Meneses
Desenvolver um temapara Moodle 2.7
![Page 2: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/2.jpg)
Michael Meneses
Sobre mim
Desenvolvedor Moodle
Graduando em Análise e Desenvolvimento de Sistemas
Colaborador
Brasília/DF
10 meses
![Page 3: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/3.jpg)
Ambiente Moodle
![Page 4: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/4.jpg)
Tema Clean (bootstrapbase)
Ambiente Moodle
Com blocos laterais
![Page 5: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/5.jpg)
Página de Login
Ambiente Moodle
Sem blocos laterais
![Page 6: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/6.jpg)
Ambiente MoodlePágina Inicial
Novo bloco à esquerda
![Page 7: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/7.jpg)
Nada de novo?
![Page 8: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/8.jpg)
Barra Superior (header)
Ambiente Moodle
![Page 9: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/9.jpg)
Barra Superior – Nome Breve
Ambiente Moodle
![Page 10: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/10.jpg)
Barra Superior – Item de Menu
Ambiente Moodle
![Page 11: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/11.jpg)
Barra Superior – Informações de login
Ambiente Moodle
![Page 12: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/12.jpg)
Conteúdo
Ambiente Moodle
![Page 13: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/13.jpg)
Conteúdo – Região “main” e “side-pre”
Ambiente Moodle
![Page 14: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/14.jpg)
Conteúdo – Região “main”
Ambiente Moodle
![Page 15: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/15.jpg)
Conteúdo – Região “side-pre”
Ambiente Moodle
![Page 16: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/16.jpg)
Conteúdo – Região “side-post”
Ambiente Moodle
![Page 17: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/17.jpg)
Rodapé (footer)
Ambiente Moodle
![Page 18: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/18.jpg)
<body>
![Page 19: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/19.jpg)
<body>
index.php = page-site-index
“page” é o prefixo
“site-index” é formado a partir da URI (index.php)
![Page 20: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/20.jpg)
<body>
user/profile.php?id=2 = page-user-profile
![Page 21: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/21.jpg)
Note a informação do formato de curso utilizado, “semanal”
<body>
course/view.php?id=2 = page-course-view-weeks
![Page 22: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/22.jpg)
<body>
mod/forum/view.php?id=1 = page-mod-fórum-view
![Page 23: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/23.jpg)
<body>
E as classes CSS?
![Page 24: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/24.jpg)
<body>
Formato de curso
![Page 25: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/25.jpg)
<body>
“Navegação” do recurso
![Page 26: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/26.jpg)
<body>
Direção do texto a partir do idioma
![Page 27: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/27.jpg)
<body>
Idioma
![Page 28: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/28.jpg)
<body>
URL
![Page 29: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/29.jpg)
<body>
Layout da Página
“pagelayout” é muito importante para quem desenvolve tema
![Page 30: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/30.jpg)
<body>
Curso
![Page 31: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/31.jpg)
<body>
Contexto
![Page 32: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/32.jpg)
<body>
Recurso no Curso - “coursemodule”
![Page 33: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/33.jpg)
<body>
Categoria
![Page 34: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/34.jpg)
<body>
Modo Edição?
![Page 35: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/35.jpg)
<body>
Se há a região “side-pre”
![Page 36: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/36.jpg)
<body>
E se a região “side-pre” é usada
![Page 37: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/37.jpg)
<body>
Se há a região “side-post”
![Page 38: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/38.jpg)
<body>
E se a região “side-post” é usada, ou vazia
![Page 39: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/39.jpg)
<body>
Javascript habilitado
![Page 40: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/40.jpg)
Muitas informações através da tag <body>, não?
<body>
![Page 41: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/41.jpg)
Bootstrap
![Page 42: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/42.jpg)
Bootstrap
Mas o que é Boostrap?
![Page 43: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/43.jpg)
Bootstrap
Framework Bootstrap - www.getbootstrap.com
![Page 44: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/44.jpg)
Sistema de GridBootstrap
![Page 45: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/45.jpg)
ComponentesBootstrap
Navbar
![Page 46: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/46.jpg)
ComponentesBootstrap
Alert
![Page 47: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/47.jpg)
ComponentesBootstrap
Buttons
![Page 48: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/48.jpg)
ComponentesBootstrap
Modal
![Page 49: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/49.jpg)
ComponentesBootstrap
Carousel
![Page 50: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/50.jpg)
Bootstrap
=
Design Responsivo
Bootstrap
![Page 51: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/51.jpg)
Tema CleanTablet ou Smartphone
Bootstrap
![Page 52: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/52.jpg)
Design Responsivo
=
Adaptação
Bootstrap
![Page 53: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/53.jpg)
Moodle & Bootstrap
![Page 54: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/54.jpg)
Moodle & Bootstrap
Instalação do Moodle 2.6
![Page 55: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/55.jpg)
Moodle & Bootstrap
Instalação do Moodle 2.7
![Page 56: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/56.jpg)
Moodle & Bootstrap
Tema Standard (base)
![Page 57: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/57.jpg)
Moodle & Bootstrap
Tema Clean (bootstrapbase)
![Page 58: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/58.jpg)
Moodle + Bootstrap
=
Tema Clean
=
Design agradável/amigável/simples
Moodle & Bootstrap
![Page 59: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/59.jpg)
Base & Bootstrapbase
![Page 60: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/60.jpg)
Base & Bootstrapbase
O que são “base” e “bootstrapbase”?
![Page 61: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/61.jpg)
base
• Baseado na biblioteca YUI
(Yahoo! User Interface)
• Tema Standard por padrão
• Design pouco agradável/amigável
• HTML e CSS básicos
• Navegadores antigos
Base & Bootstrapbase
![Page 62: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/62.jpg)
bootstrapbase
• Baseado no Framework Bootstrap
• Tema Clean por padrão
• Design agradável/amigável
• HTML5 e CSS3
• Alguns navegadores antigos,
desejável mais recentes
Base & Bootstrapbase
![Page 63: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/63.jpg)
Moodle usa a versão 2.3.2, a mais recente é 3.2
Bootstrap 2.3.2
Base & Bootstrapbase
Bootstrap 3.2
![Page 64: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/64.jpg)
Diretório “theme”
![Page 65: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/65.jpg)
Diretório “theme”
Versão 2.6Vários temas
![Page 66: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/66.jpg)
Versão 2.6Tema “base”
Diretório “theme”
![Page 67: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/67.jpg)
Versão 2.6Tema “bootstrapbase”
Diretório “theme”
![Page 68: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/68.jpg)
Versão 2.7Poucos temas
Diretório “theme”
![Page 69: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/69.jpg)
Versão 2.7Tema “base”
Diretório “theme”
![Page 70: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/70.jpg)
Versão 2.7Tema “bootstrapbase”
Diretório “theme”
![Page 71: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/71.jpg)
Tema Clean
![Page 72: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/72.jpg)
Tema Clean
Diretório “theme/clean”
![Page 73: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/73.jpg)
lang/en/theme_clean.php
Strings de tradução
Tema Clean
![Page 74: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/74.jpg)
layout
Arquivos que são chamados conforme
o tipo de página
Tema Clean
![Page 75: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/75.jpg)
pix
Imagens para uso do tema
Tema Clean
![Page 76: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/76.jpg)
style
Arquivos CSS para uso do tema
Tema Clean
![Page 77: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/77.jpg)
config.php
Arquivo de configuração do tema
Tema Clean
![Page 78: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/78.jpg)
lib.php
Arquivo com métodos/funções
para uso do tema
Tema Clean
![Page 79: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/79.jpg)
settings.php
Arquivo com itens para
personalização do tema
Tema Clean
![Page 80: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/80.jpg)
version.php
Arquivo de versão
e dependências do tema
Tema Clean
![Page 81: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/81.jpg)
Configurações para otimizar o desenvolvimento de temas
![Page 82: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/82.jpg)
Administração do site > Desenvolvimento > Debugging
Mensagens de Debug
![Page 83: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/83.jpg)
Administração do site > Desenvolvimento > Debugging
Mostrar informações da página
![Page 84: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/84.jpg)
Administração do site > Aparência > Temas
Modo designer de tema
![Page 85: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/85.jpg)
Administração do site > Idioma > Configurações de idiomas
Colocar todas as strings de idioma em cache
![Page 86: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/86.jpg)
Tema Flat
![Page 87: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/87.jpg)
Tema Flat
![Page 88: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/88.jpg)
Clonar o tema “clean” Renomear para “flat”
Tema Flat
![Page 89: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/89.jpg)
Renomear o arquivo “theme_clean.php”
para “theme_flat.php”
Tema Flat
![Page 90: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/90.jpg)
Alterar a string “pluginname” no arquivo “theme_flat.php”
Tema Flat
![Page 91: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/91.jpg)
Alterar a string “choosereadme” no arquivo “theme_flat.php”
Tema Flat
![Page 92: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/92.jpg)
Tema Flat
Alterar o $THEME->name no arquivo “config.php”
![Page 93: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/93.jpg)
Alterar o $plugin->component no arquivo “config.php”
Tema Flat
![Page 94: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/94.jpg)
Alterar “clean” por “flat” no arquivo “lib.php”
Tema Flat
![Page 95: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/95.jpg)
Alterar “clean” por “flat” no arquivo “settings.php”
Tema Flat
![Page 96: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/96.jpg)
Alterar “clean” por “flat” nos
arquivos da pasta “layout”
Tema Flat
![Page 97: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/97.jpg)
Instalação do tema Flat
Tema Flat
![Page 98: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/98.jpg)
Tema Flat
Instalação do tema Flat
![Page 99: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/99.jpg)
Tema Flat
Instalação do tema Flat
![Page 100: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/100.jpg)
Selecionar tema Flat
Administração do site > Aparência > Temas > Seletor de tema
Tema Flat
![Page 101: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/101.jpg)
Selecionar tema Flat
Tema Flat
![Page 102: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/102.jpg)
Página Inicial do tema instalado
Tema Flat
![Page 103: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/103.jpg)
Layout
![Page 104: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/104.jpg)
Excluir a pasta
“layout”
Sem a pasta “layout”
Tema Flat
![Page 105: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/105.jpg)
Tema continua o mesmo
Tema Flat
![Page 106: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/106.jpg)
Por que mesmo sem a pasta “layout” o tema funciona?
Tema Flat
![Page 107: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/107.jpg)
No “config.php” está definido que “bootstrapbase” é o tema pai.
Tema Flat
![Page 108: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/108.jpg)
Se o tema não há a pasta “layout”
ela procura os arquivos no tema pai.
E o tema pai do tema Flat é o tema
“bootstrapbase”.
Tema Flat
![Page 109: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/109.jpg)
E por que esses arquivos?
Tema Flat
![Page 110: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/110.jpg)
Tema Flat
type: frontpage
![Page 111: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/111.jpg)
Tema Flat
type: course
![Page 112: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/112.jpg)
Tema Flat
type: incourse
![Page 113: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/113.jpg)
“theme/bootstrapbase/config.php” $THEME->layouts
Tema Flat
![Page 114: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/114.jpg)
Tema Flat
“theme/bootstrapbase/config.php” $THEME->layouts
![Page 115: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/115.jpg)
Tema Flat
“theme/bootstrapbase/config.php” $THEME->layouts
![Page 116: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/116.jpg)
Quais são os layout disponíveis?
Tema Flat
![Page 117: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/117.jpg)
Layouts 1/2
LAYOUT FINALIDADE
base Sem blocos.
standard Com blocos.
course Página principal do curso.
coursecategory Usado para navegar nas categorias de curso.
incourse Usado pelos módulos/recursos no curso.
frontpage Página inicial.
admin Páginas de administração.
Tema Flat
![Page 118: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/118.jpg)
LAYOUT FINALIDADE
mydashboard “Visão geral dos Cursos” - “/my”.
mypublic Página de informações dos usuários.
login Página de login.
popup Novas janelas. Sem navegação e blocos.
embedded Usado por iframe/object. Máximo espaço.
maintenance Usado para instalações e atualizações.
report Usado para relatórios.
Tema Flat
Layouts 2/2
![Page 119: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/119.jpg)
Como controlar estes layouts?
Tema Flat
![Page 120: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/120.jpg)
Para facilitar o desenvolvimento
copie a pasta “layout” do tema
“bootstrapbase” para o tema “flat”.
Tema Flat
![Page 121: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/121.jpg)
No arquivo “config.php” do tema “flat” alteramos
o arquivo que o tipo “frontpage” utilizará.
Tema Flat
![Page 122: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/122.jpg)
Para a configuração
funcionar basta
duplicar o arquivo
“columns3.php” e
renomear para
“frontpage.php”
Tema Flat
![Page 123: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/123.jpg)
Agora a Página Inicial usa o arquivo
“frontpage.php” para exibir o conteúdo
a ser apresentado na tela.
Tema Flat
Assim é possível adicionar o
Bootstrap Carousel somente na
Página Inicial do Moodle.
![Page 124: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/124.jpg)
Aplicando um novo design 1/2
![Page 125: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/125.jpg)
Crie uma pasta “includes”.
Nesta pasta crie dois
arquivos, “header.php” e
“footer.php”.
Estes arquivos serão incluídos
nos arquivos de layout no
lugar do cabeçalho e rodapé
padrões.
Tema Flat
![Page 126: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/126.jpg)
A partir do arquivo
“columns1.php” recortar desde o
“echo $OUTPUT->doctype;” até
o primeiro “</header>” para o
arquivo “includes/header.php”.
Tema Flat
![Page 127: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/127.jpg)
Tema Flat
“columns1.php” 1/2
![Page 128: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/128.jpg)
Tema Flat
“columns1.php” 2/2
![Page 129: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/129.jpg)
Recortar o trecho abaixo para o arquivo “includes/header.php”.
Tema Flat
![Page 130: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/130.jpg)
No arquivo “columns1.php” substituir o código recortado para o
“includes/header.php” pelo código abaixo.
Assim o código é reutilizado no cabeçalho
para as demais páginas.
Tema Flat
![Page 131: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/131.jpg)
A partir do arquivo “columns1.php” copiar a tag “<footer>” e o
código PHP logo abaixo para o arquivo “includes/footer.php”.
Tema Flat
![Page 132: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/132.jpg)
No arquivo “columns1.php” substituir o código copiado para o
“includes/footer.php” pelo código abaixo.
Note que a “</div>” que havia depois do “<footer>” está
antes do código PHP.
Tema Flat
![Page 133: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/133.jpg)
Substituir o trechos de código copiado para o arquivo
“includes/header.php” pelo trecho abaixo nos arquivos
“columns2.php”, “columns3.php”, “frontpage.php”,
“popup.php” e “secure.php”.
Tema Flat
![Page 134: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/134.jpg)
Substituir o trechos de código copiado para o arquivo
“includes/footer.php” pelo trecho abaixo nos arquivos
“columns2.php”, “columns3.php”, “frontpage.php” e “popup.php”.
Tema Flat
![Page 135: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/135.jpg)
Trabalhe a estrutura HTML e saídas do Moodle
do cabeçalho no arquivo “includes/header.php”.
Trabalhe a estrutura HTML e saídas do Moodle
do rodapé no arquivo “includes/footer.php”.
Essas estruturas HTML que irão impactar no design do tema.
Tema Flat
![Page 136: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/136.jpg)
Fonts
![Page 137: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/137.jpg)
Tema Flat
Fonts
![Page 138: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/138.jpg)
Tema Flat
Fonts
![Page 139: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/139.jpg)
Tema Flat
Fonts
Para a biblioteca de ícones FontAwesome funcionar
é necessário adicionar um arquivo CSS.
![Page 140: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/140.jpg)
CSS - style
![Page 141: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/141.jpg)
Tema Flat
CSS - style
![Page 142: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/142.jpg)
Tema Flat
CSS - style
config.php
![Page 143: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/143.jpg)
Javascript
![Page 144: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/144.jpg)
Tema Flat
Javascript
![Page 145: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/145.jpg)
Tema Flat
Javascript
config.php
![Page 146: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/146.jpg)
Tema Flat
Javascript
lib.php
![Page 147: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/147.jpg)
Settings
![Page 148: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/148.jpg)
Tema Flat
Tema personalizável pela interface de usuário, ou seja,
Administração do site > Aparência > Temas > Flat.
É um ponto complexo por usar alto nível de programação.
Não será abordado nessa oportunidade.
Settings
![Page 149: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/149.jpg)
Overriding a renderer
![Page 150: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/150.jpg)
Tema Flat
Basicamente consiste em alterar, através de sobrescrita de
métodos no tema, a saída “HTML” do Moodle.
Os recursos do Moodle tratam suas saídas nos arquivos
“renderer.php” em cada recurso.
O Moodle tratam suas saídas no arquivo
“lib/outputrenderers.php”.
Como usamos “bootstrapbase” deve ser sobrescrito a
classe “theme_bootstrapbase_core_renderer”.
Overriding a renderer
![Page 151: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/151.jpg)
Tema Flat
1. Criar o arquivo “renderers.php”.
2. Declarar no “config.php” que o tema está apto
a realizar Override.
Overriding a renderer
![Page 152: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/152.jpg)
Tema Flat
Overriding a renderer
“config.php”
$THEME->rendererfactory =
'theme_overridden_renderer_factory';
![Page 153: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/153.jpg)
Tema Flat
Overriding a renderer
“renderers.php”
![Page 154: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/154.jpg)
O que mudou noMoodle 2.7?
![Page 155: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/155.jpg)
O que mudou no Moodle 2.7?
Menos temas
![Page 156: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/156.jpg)
O que mudou no Moodle 2.7?
Tema Clean como padrão
![Page 157: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/157.jpg)
O que mudou no Moodle 2.7?
Compiling LESS
![Page 158: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/158.jpg)
Aplicando um novo design 1/2
![Page 159: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/159.jpg)
Tema Flat
“includes/header.php” 1/2
![Page 160: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/160.jpg)
Tema Flat
“includes/header.php” 2/2
![Page 161: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/161.jpg)
Tema Flat“includes/footer.php” 1/3
![Page 162: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/162.jpg)
Tema Flat“includes/footer.php” 2/3
![Page 163: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/163.jpg)
Tema Flat“includes/footer.php” 3/3
![Page 164: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/164.jpg)
Tema Flat
Falta o código CSS para formatar
nossa estrutura HTML
![Page 165: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/165.jpg)
Tema Flat
“custom.css”
Substitua o código CSS original do tema Clean
pelo código produzido para o tema Flat
![Page 166: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/166.jpg)
Tema Flat
E o Bootstrap Carousel?
![Page 167: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/167.jpg)
Tema Flat “frontpage.php”
![Page 168: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/168.jpg)
Otimização paraDispositivos Móveis
![Page 169: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/169.jpg)
Otimização para Dispositivos Móveis
Faça seu tema com Bootstrapbase!
![Page 170: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/170.jpg)
Otimização para Dispositivos Móveis
Use Media Queries para definir CSS
para diferentes resoluções
![Page 171: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/171.jpg)
Otimização para Dispositivos Móveis
Use a unidade “em”
ao invés de “px”
![Page 172: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/172.jpg)
Resultado
![Page 173: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/173.jpg)
Disponível em breve
Tema Flat
![Page 174: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/174.jpg)
Considerações Finais
![Page 175: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/175.jpg)
https://docs.moodle.org/dev/Themes
Referências
Outros temas Moodle
![Page 176: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/176.jpg)
![Page 177: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil](https://reader031.vdocuments.net/reader031/viewer/2022013108/55727b91d8b42a661e8b45c9/html5/thumbnails/177.jpg)