Os temas são um elemento importante da interface de usuário (UI) para garantir uma aparência consistente e refletir um local específico. Eles podem ser editados para incorporar fontes e imagens culturais.

Você também pode adicionar imagens e alterar as cores da interface de usuário em outros locais:

  • Os administradores podem personalizar a configuração temática predefinida para reforçar a identidade cultural de uma instituição.
  • Os administradores podem usar o Catálogo da paleta e tema para alterar as cores usadas no Blackboard Learn.
  • Os professores podem usar a ferramenta Estilo do curso para personalizar os cursos, incluindo a adição de imagens de banner que reforçam o local.

Essa seção inclui informações detalhadas sobre como fazer o download e editar um tema, além de sugestões de ferramentas que podem ser usadas na edição.

Três temas herdados foram desativados no Blackboard Learn SP10: Blackboard Classic, WebCT Classic 1 e WebCT Classic 2. Se você continuar usando um desses temas com sua configuração temática padrão em versões posteriores ao SP9, ele será convertido em um tema personalizado em seu sistema durante a atualização.


Editar temas

Temas baixados do Blackboard Learn podem ser editados para alterar a aparência do sistema. Cada tema tem uma Folha de estilo em cascata (CSS) associada que determina a exibição da interface de usuário. Características como tipos e tamanhos de fonte, imagens de fundo e outros elementos XHTML são descritos pelo CSS. Ao usar o navegador da Web Mozilla® Firefox® e um recurso adicional do Firefox chamado Firebug®, os usuários podem identificar facilmente elementos CSS individuais diretamente da interface de usuário.

Faça o download e instale a versão mais recente do Firefox e Firebug antes de tentar outros procedimentos.


Firefox e Firebug

O Firefox possui vários programas desenvolvidos por outras empresas. Um deles é chamado Firebug e é usado para editar, depurar e monitorar ambientes CSS, HTML e JavaScript em qualquer página da Web. Um vez que os elementos foram identificados, o editor CSS pode ser utilizado para pesquisar os elementos e fazer alterações no CSS do tema.

Instalar o Firefox

  1. Acesse http://www.mozilla.com.
  2. (Opcional) Selecione seu idioma, caso ele não seja inglês.
  3. Selecione o botão verde de download.
  4. Siga as instruções de instalação.
  5. Abra o Firefox na sua área de trabalho.

Instalar o Firebug

  1. Abra o Firefox.
  2. Abra o menu Ferramentas e selecione Add-ons.
  3. Selecione Obter Add-ons.
  4. Digite Firebug na caixa de pesquisa e selecione Pesquisar.
  5. Selecione o ícone do Firebug.
  6. Selecione Instalar. O Firefox irá solicitar que você reinicie o navegador após a conclusão da instalação.
  7. Selecione Sim.

Usar o Firebug

Use o Firebug para examinar o CSS existente e identificar todos os elementos que precisam ser alterados.

  1. Abra o Firefox.
  2. Selecione o ícone do Firebug do lado direito na barra de status inferior.
  3. Selecione Inspecionar.
  4. Use o mouse para indicar a área de página que deseja inspecionar.
  5. Selecione a área para manter no lugar.
  6. Passe o mouse pelos elementos XHTML no console do Firebug.
  7. Selecione o nó XHTML para expandir ou minimizar a descrição do elemento XHTML.
  8. Veja a ID ou classe CSS relevante para o elemento selecionado do lado direito no console do Firebug.
  9. Copie a classe ou o nome do ID.
  10. Cole o nome da ID ou classe em um editor CSS e pesquise o elemento.
  11. Faça as alterações necessárias.
  12. Salve o CSS quando concluir.

Baixar e editar o CSS de um tema

Quando os elementos CSS forem identificados, você poderá usar o CSS usando um editor de texto.

  1. Selecione Configurações temáticas e temas no Painel do administrador.
  2. Selecione Catálogo da paleta e tema.
  3. No tema apropriado, abra o menu e selecione Download.
  4. Salve o pacote ZIP.
  5. Abra o pacote ZIP e extraia o conteúdo em um local seguro.
  6. Abra o arquivo theme.css usando um editor de texto.
  7. Faça as alterações apropriadas e salve os arquivos CSS.
  8. Compacte novamente o conteúdo e salve-o em um local do computador.
  9. Volte para o Painel do administrador e selecione Configurações temáticas e temas.
  10. Selecione Catálogo da paleta e tema.
  11. Selecione Criar tema.
  12. Dê um nome e um nome de referência ao tema. Opcionalmente, adicione uma descrição.
  13. Selecione Pesquisar Meu Computador para localizar o novo pacote ZIP.
  14. Selecione Enviar.

Exemplo de CSS

Veja a seguir um exemplo do tema Schoolhouse incluído no Blackboard Learn. As definições dos estilos de cabeçalho são exibidas neste exemplo, junto com a configuração de família de fontes.

* {font-family: Cursive, Georgia, Times, serif;}

/* a:focus { Removes focus outline in Firefox (Mozilla) outline:none;

} */

img { /* Centers images vertically and sets borders to 0 */

vertical-align:middle;

border:0px;

}

.hideme {

display:none!important;

}

h1 { /*Equals 19px*/

font-size:148%;

}

h2 {

font-size:123.1%;

}

h3 {

font-size:108%;

}

h1,h2,h3 {

margin:1em 0;

}

h1,h2,h3,h4,h5,h6,strong {

font-weight:bold;

}


Temas do sistema e temas do curso

Os temas do curso são apresentados no Service Pack 8 para permitir que os professores alterem a aparência de três cursos. Os temas do curso são separados dos temas do sistema. Para ativar os temas do curso para que os instrutores os utilizem em seu curso, acesse Painel do administrador > Configurações do curso > Temas e ícones do curso e marque a caixa Ativar temas do curso.

Saiba mais sobre como os instrutores usam os temas do curso

Um novo tema do sistema deve ter uma imagem PNG em miniatura nomeada após o nome de referência do tema do sistema. Se o arquivo estiver ausente, um símbolo de imagem ausente será exibido como padrão na lista de temas do curso. A maneira mais fácil de criar essa imagem no novo tema do sistema é renomear a imagem as_2012.png fornecida no tema as_2012 para o novo nome de referência do tema do sistema. Como a função da imagem é indicar que o tema do curso padrão está sendo usado e não mostrar a aparência do tema, renomear o arquivo evita que o símbolo de imagem ausente seja exibido na interface de usuário.


Temas do sistema personalizados e instalação de novos componentes básicos

Se você tem um tema de sistema personalizado, talvez queira que suas personalizações se estendam para novas páginas em um componente básico instalado por meio de atualizações de software. Nem todos os componentes básicos instalados dessa forma tem suas próprias folhas de estilo específicas da ferramentas, mas alguns têm.

Na instalação de um componente básico que contém suas próprias folhas de estilo em um sistema que tenha pelo menos um tema personalizado, você receberá um recepção informacional durante a instalação. Essa recepção recomenda a verificação do recurso junto ao tema personalizado, assim como você faz quando atualiza o Learn. Você receberá essa mensagem quando seu sistema tiver um tema personalizado já instalado, mesmo se o tema não estiver em uso atualmente.

Informações sobre se o componente básico contém folhas de estilo específicas da ferramenta estão disponíveis para qualquer componente básico no Painel do administrador. Na seção Componente básicos, selecione Componente básicos e selecione Ferramentas instaladas. Abra o menu de qualquer componente básico listado e selecioneVer Componentes. Se o Building Block tiver folhas de estilo específicas de ferramentas em qualquer um dos temas originais do Learn, os identificadores do tema serão listados nessa página.

Se você gerenciar os temas personalizados com o armazenamento de cópias dos pacotes off-line, atualize seu pacote de temas personalizado off-line fazendo download dele na interface de usuário do Painel administrativo depois de atualizar para o SP14 para obter uma cópia com a nova estrutura do novo pacote apresentado no pacote de serviços. Não haverá alterações nas folhas de estilo, assim como alterações no fluxo de trabalho de personalização. No entanto, depois de atualizar para o SP 14, os pacotes offline em sua principal estrutura de pacotes não poderão mais ser atualizadas - uma mensagem de erro será exibida nesse caso.