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:
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;
(*)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
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:
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.
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!!!







Continuando 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.


