Para um CMS como o Drupal, o tema é a identidade visual de um site. Como falamos em um tutorial anterior, o tema é um conjunto de propriedades, escritas em PHP, que definem como o seu site será exibido. Logo, as seções, regiões e blocos do site serão diretamente impactadas pela escolha do tema. Além das propriedades escritas em PHP (que é a linguagem de programação usada para o desenvolvimento do Drupal e outros CMS), existem os arquivos CSS que trazem as definições de layout, cores, fontes e estilos para a página em si. Ao selecionarmos a opção Temas, no menu administrativo do Drupal teremos uma tela semelhante a esta aqui abaixo:

A instalação do Drupal na sua conta da Hostnet já disponibiliza 25 temas diferentes, que deve satisfazer o gosto da maioria dos admnistradores. Uma das características mais interessantes do Drupal em relação aos temas é que o administrador pode permitir que cada usuário veja o site com o tema da sua escolha. O usuário pode escolher qual o tema que mais lhe agrade, e o site adapta-se para o seu gosto pessoal. Claro, isto gera impacto no servidor em termos de processamento: As páginas terão que ser reformatadas para atender ao desejo dos usuários. Se o administrador preferir, pode escolher um tema padrão, e não disponibilizar os outros. Fica ao critério de quem administra.

Selecionando um tema

Vamos então escolher um tema para o nosso site feito em Drupal. Os procedimentos são os seguintes:

  1. Na seção Tema, escolha qual o tema desejado.
  2. Clique na caixa Ativado, para selecioná-lo.
  3. Se você quiser que esse seja o tema-padrão, clique no botão Padrão, ao lado. A partir daí, este será o tema que todos os usuários, autenticados ou não, verão – a não ser que eles tenham escolhido outro tema.
  4. Para finalizar, clique no botão Salvar Configurações, no final da página.

Configurando um Tema

O objetivo de personalizá-lo é torná-lo mais identificado com a sua ideia para o site. O nível de personalização varia de acordo com cada tema empregado.

Opções globais

Você pode logo notar a opção Opções Globais. Essa opção diz respeito a todos os temas. Clicaremos nessa opção, e depois voltaremos a ver as configurações específicas para o tema em questão.

Abaixo temos a página com as opções globais:

Vamos ver cada seção com mais detalhes:

  1. Itens a exibir: Aqui, o administrador (ou seja, você) pode definir quais elementos visuais estarão disponíveis no site. Por exemplo, você pode desligar a existência de um menu secundário, por exemplo. As opções são:
    • Logo – logotipo que fica no alto da página.
    • Nome do site – Nome do site que é exposto na parte superior da página
    • Slogan do site – Um subtítulo para o site, expondo o seu conteúdo.
    • Missão do site – Texto apresentando o objetivo do site.
    • Fotos dos usuários nos posts – Opção para que as fotos dos usuários cadastrados apareçam nos posts feitos por eles.
    • Fotos dos usuários nos comentários – Opção para que as fotos dos usuários cadastrados apareçam nos comentários feitos por eles. Existem serviços, como o http://pt.gravatar.com/ Gravatar , onde usuários cadastram suas fotos e o sistema fornece a foto do seu avatar. Existe um módulo para o Drupal para habilitar esse serviço no seu site, e está disponível http://drupal.org/project/gravatar /
    • Caixa de busca – Uma caixa de texto que você pode usar para fazer busca no conteúdo do site.
    • Ícone do site – a imagem que aparece no canto esquerdo, ao lado da URL.
    • Menu primário – o menu principal do site.
    • Menu secundário – o menu secundário do site, que em alguns casos é desativado.
  2. Configurações do logo – nessa opção podemos mudar, caso queiramos, o logo do site, que aparece no canto superior esquerdo do site. Você pode manter o logo padrão do tema (marcando a opção Usar o logo padrão), passar a URL onde a imagem a ser usada como logo está (na opção Caminho para o logo), ou ainda usar a opção Enviar logo, e selecionar uma imagem que esteja localizada localmente, no seu disco rígido, por exemplo.
  3. Configurações do ícone – O ícone, ou favicon, é a imagem que aparece no canto esquerdo da URL, como uma referência visual. Você pode manter o ícone padrão do tema (marcando a opção Usar o ícone padrão), passar a URL onde a imagem a ser usada como ícone está (na opção Caminho para o ícone), ou ainda usar a opção Enviar ícone, e selecionar uma imagem que esteja localizada no seu disco rígido, por exemplo.

 

O tema padrão

Vamos então alterar a configuração de um tema. Começaremos pelo tema padrão Garland. Este tema é bem simples: Tons de azul, divisão da página em 3 colunas de largura variável e sem tabelas. Vamos configurá-lo:

Role a lista para baixo, e você verá a palavra Configurar ao lado do tema Garland. Clique nessa palavra.

No caso do tema Garland, temos abaixo uma imagem da tela que veremos, para a personalização: Note que a metade inferior da página (a partir da opção Itens a exibir) é semelhante ao que vimos ao falar das opções globais do tema. Vamos falar então da metade superior.

No tema Garland, podemos mudar as cores das seções da página, na seção Esquema de cores. A princípio, temos a opção Conjunto de cores. O objetivo dessa opção é já trazer um esquema pré-definido de cores, para facilitar o trabalho do administrador. Temos 15 esquemas já prontos, basta selecionar um deles para já ver a modificação na seção de pré-visualização, abaixo dessa seção:

No caso desse tema, temos cinco cores relacionadas a partes do tema, que podem ser modificadas. São elas:

  1. Cor-base: Cor de fundo da página. Na maioria dos temas, é branco.
  2. Cor dos links: Cor das ligações (links) que estarão na página.
  3. Topo do cabeçalho: Cor da parte de cima do cabeçalho da página.
  4. Parte de baixo do cabeçalho: Cor da parte de baixo do cabeçalho da página. Note que esse tema pode criar com isso um efeito degradê
  5. Cor do texto: Cor do texto que estará no seu site.

Recomendamos cuidado ao usar essas opções, sob pena de criar uma seleção de cores que cause mais náuseas do que sensações agradáveis aos usuários do seu site. Uma lida em teoria das cores pode ajudar. Mas caso você queira montar um esquema de cores por sua própria conta, selecione a opção personalizado na opção Esquema de cores. Perceba três detalhes:

  • As caixas de cor apresentam códigos dentro delas. Esses valores são os códigos HTML das cores. Os valores estão expressos em hexadecimal (base 16), e cada byte (são 3) identifica a intensidade de vermelho, verde e azul que a cor deve ter. Logo, #000000 é o preto (a ausência de todas as cores), o #ffffff representa a cor branca (a presença de todas as cores), o #ff00ff é o lilás, e por aí vai. Em alguns casos, é mais útil saber o código HTML da cor, para assim obter diretamente a cor desejada. Você pode encontrar uma tabela resumida de cores e seus respectivos códigos HTML http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm .
  • Os cadeados fechados que aparecem ao lado das caixas significam que a cor não pode ser modificada. Isso ocorre quando você seleciona um esquema de cores já pré-definido. Se você selecionar o esquema personalizado, os cadeados aparecem abertos, e você pode modificá-las.
  • Do lado direito há um círculo cromático, onde você pode selecionar, à mão livre, uma cor e um tom que mais lhe agrade.

Para modificar as cores, basta seguir os seguintes procedimentos:

  1. Selecione a cor que deseja modificar, clicando na sua caixa correspondente.
  2. Coloque o mouse sobre o círculo, selecionando a cor no círculo externo.
  3. Selecione o tom desejado a partir da cor selecionada, clicando no quadrado que está localizado dentro do círculo.

Pronto, cor selecionada. Se você preferir colocar a cor exata, basta clicar na caixa e entrar o código HTML da cor.

Um tema novo

Como dissemos anteriormente, a instalação do Drupal feita pelo Instalador Automático da Hostnet disponibiliza vários temas para pronto uso. Iremos ver como podemos trocar para um desses, e as configurações específicas desse tema. Vale lembrar que a configuração deve ser análoga para os outros temas, e que alguns desses temas não trazem mais do que as configurações padrão.

Vamos mudar para o tema 0 Point:

Este tema é otimizado para uso em comércio eletrônico junto com a solução http://www.ubercart.org/,que integra um site completo de comércio eletrônico ao seu site feito em Drupal. Mas o mesmo é otimizado para vários tipos de site. Vamos selecioná-lo como um tema ativado, marcando-o como ativado, clicando na caixa correspondente e clicando em Salvar Configurações. Dali, vamos configurá-lo, clicando na opção Configurar, ao lado do nome do tema, na lista. Vejamos a página de opções do tema:

Como você pode ver, esse tema em particular tem muitas opções de configuração, e que podem ser exploradas pelo administrador em detalhes.

Páginas Relacionadas