gototopgototop
 

Curso de Joomla em várias modalidades só aqui no Joomla Brasília

  • aumentar tamanho texto 
  • diminuir tamanho texto 
  • layout default 
  • layout default daltonismo 
  • layout default contraste
Home Tutoriais de Joomla Acessibilidade e Joomla! Acessibilidade e Joomla! alterando a imagem de fundo do template

Acessibilidade e Joomla! alterando a imagem de fundo do template

Escrito pelo  Júlio Coutinho
Qualifique este item
(0 votos)

acessibilidadeContinuando a série acessibilidade e joomla iremos alterar as imagens do topo do nosso template. O ja_purity, template base de nosso template acessivel, usa um script em PHP que possibilita a troca de imagens do topo de nosso website de forma randômica, ou seja: aleatória.
Vamos alterar o funcionamento do mesmo e as imagens que usaremos no topo de nosso template.


1) primeiro vamos mudar a chamada padrão da imagem para cada folha de estilos

No arquivo index.php na altura da linha 119 temos a chamada da div responsável pela exibiçao das imagens randômicas, a ja-header. No nosso caso não queremos imagens randômicas já que iremos utilizar o ocaso ou seja a imagem irá mudar de acordo com o posicionamento do sol. Retire tudo que está após o (class="clearfix") deixando a div como mostra a imagem abaixo:

alterando a imagem de fundo do template
Agora vamos abrir o arquivo template.css, identificar o seletor da div ja-header e incluir a chamada a imagem de fundo que desejamos. (*) background: url('/../images/header/header3.jpg') no-repeat top right;
alterando a chamada a imagem de fundo
(*)Todas as imagens estão em templates/acessivel/images/header

2) Quando o internauta clicar na troca de estilos, nosso template deverá apresentar a folha escolhida com sua respectiva imagem trabalhada. Então, vamos inserir nas folhas de estilos contraste.css e daltonismo.css, a devida chamada as imagens de fundo

contraste.css

contraste.css


daltonismo.css
daltonismo.css

(*)Desta forma temos uma imagem para cada folha de estilos.

3) Nosso template precisa de 03 (três) folhas de estilos para cada fase do dia, fim implementação do ocaso. Manhã, tarde e noite e nós temos 01 (uma) folha de estilos para cada usuário: template.css que é a folha padrão do usuário sem necessidade especial, contraste.css que é a folha padrão do usuário com deficiência visual grave e daltonismo.css que é a folha padrão do usuário daltônico.

O que precisamos fazer? criar a template_manha.css, pois não iremos utilzar o ocaso nas folhas relativas, apenas na principal do template. Vamos a luta? Quem disse que era moleza?

4) Para criar o template_manha e template_noturno.css é moleza sim fique tranquilo(a), basta salvar o template.css como template_manha.css e template_noturno.css. Ao final teremos as folhas de estilos abaixo:

folhas de estilos
5) Agora, basta trabalhar uma imagem para cada topo de cada folha de estilos de acordo com o horário sacou? Vou usar o fireworks mas você pode usar o editor online cujo passo a passo disponibilizei aqui. Escolha uma imagem desde que tenha haver com a ocasião, ou seja: amanhecer e anoitecer.

resultado final

Lembre-se que o ocaso têm o objetivo de embelezar o projeto e despertar a curiosidade do internauta para a mudança da imagem do website de acordo com o horário do dia. Várias formas podem ser utilizadas, podemos por exemplo "fazer chover" no website de acordo com a metereologia, mas, isto é assunto para outro artigo.

No próximo artigo iremos testar o ocaso.

Sucesso!!!

Última modificação em Qui, 03 de Junho de 2010 19:04 divulgue o artigo no orkut
Júlio Coutinho

Júlio Coutinho

Pós-graduando em Engenharia de Sistemas

Líder do Joomla! Brasília - JUG Planalto Central

User Registered Linux nr 52242

@cout45

+55.61.91619219

Website: www.juliocoutinho.com.br
Login to post comments

Curso de Joomla! 2.5. Reserve sua vaga

Reserve sua vaga para o curso de gestão de conteúdos online, com CMS Joomla! 2.5 e K2. 11 a 14 de junho 2012.






sim não (*)Se desejar, você pode usar seu notebook!
Dúvidas? (61)91619219

Registre um domínio .com.br

 

nic.br

(*) Registre seu domínio sem intermediários!

Como publicar meu site Joomla?

Uma vez que o website foi completamente testado, no ambiente de teste, você vai precisar implantá-lo em um ou mais servidores de produção. A transição do servidor de teste (esteja ele local ou não)é uma tarefa que exige uma atenção especial e basicamente é composta de ações a serem tomadas em ordem cronológica para que de tudo certo. Leia +

projetando websitesnão me faça pensarsites persuasivoscss e xhtml
google marketingguia do operadorprofessional joomlajoomla avançado


Joomla! Brasilia é um domínio, sem afiliação ou ligação com o projeto Joomla! O nome e marca Joomla! pertencem a Open Source Matters!