Como implementar decorações automáticas?

caladryl.jpg

A pedido de minha esposa, alterei a decoração do site para homenagear o Outubro Rosa.

Alterei apenas alguns detalhes como a cor de fundo, a cor de seleção de texto e a cor dos links. A ideia é marcar a data sem impactar demais no layout do site.

Aproveitei para criar uma rotina para ativar as decorações de forma automática todo dia 1º de outubro. Esse artigo documenta essas mudanças.

Cor de fundo

A cor de fundo foi facilmente alterada via CSS:

body {
	background-color: rgba(254, 87, 161, 0.25)!important;
}

Cor de seleção de texto

A cor de seleção de texto (inspirada na homenagem do Mentirinhas) foi obtida com as seguintes regras CSS (válidas nas versões mais recentes dos navegadores):

::selection {
	background: #FE57A1;
	color: #FFFFFF;
}
 
::-moz-selection {
	background: #FE57A1;
	color: #FFFFFF;
}

O seletor ::selection funciona no Chrome, Internet Explorer, Safari e Opera, enquanto o Firefox responde ao seletor ::-moz-selection. Foi interessante descobrir que, para a formatação da cor de seleção funcionar no Firefox, precisa ficar em uma regra própria…

Cor dos links

Já a cor dos links precisou ser alterada em quatro pontos diferentes:

  • no botão da página de boas-vindas;
  • na contagem de comentários (ao lado do título dos artigos); e
  • no menu principal (a barra horizontal logo abaixo do cabeçalho).

O botão da página de boas-vindas teve sua cor alterada com apenas uma linha:

article .entry-summary a:hover {
	background-color: #FE57A1!important;
}

A cor do balão contendo a contagem de comentários também foi alterada facilmente:

.entry-header .comments-link a:hover {
	background-color: #FE57A1!important;
}

Cor do menu e o uso de gradientes

Por outro lado, o menu principal precisou de um conjunto de regas um pouco mais complexo. Para começar, como o menu tem dois níveis, foram necessários dois seletores simultâneos. Além disso, para reproduzir o efeito degradê usado no tema, foi necessário usar o recurso de gradiente (infelizmente ainda não padronizado) dos navegadores:

#access li:hover > a,
#access ul ul :hover > a {
	background: #FE57A1;                                                /* Navegadores antigos */
	background: -moz-linear-gradient(top, #FE57A1 0%, #DE3781 100%);    /* Firefox */
	background: -webkit-linear-gradient(top, #FE57A1 0%, #DE3781 100%); /* Chrome, Safari */
	background: -o-linear-gradient(top, #FE57A1 0%, #DE3781 100%);      /* Opera */
	background: -ms-linear-gradient(top, #FE57A1 0%, #DE3781 100%);     /* IE */
	background: linear-gradient(to bottom, #FE57A1 0%, #DE3781 100%);   /* CSS3 */
}

Tem um bom artigo sobre gradientes no About.com. Não é um assunto complexo, mas é um assunto cheio de detalhes chatos. Vale a pena experimentar o Ultimate CSS Gradient Generator, para facilitar o trabalho (e evitar erros).

Automatizando as mudanças

Para tornar as coisas mais interessantes, resolvi automatizar as mudanças, para que permaneçam em vigor apenas durante o mês de outubro. Para tanto, precisei fazer algumas alterações no arquivo de funções do tema (functions.php).

Comecei criando uma função para verificar se uma determinada data está compreendida em um intervalo de datas:

function is_in_daterange( $start, $end, $date ) {
	$start = strtotime( is_null( $start ) ? date( 'Ymd', current_time( 'timestamp' ) ) : $start );
	$end   = strtotime( is_null( $end )   ? date( 'Ymd', current_time( 'timestamp' ) ) : $end );
	$date  = strtotime( is_null( $date )  ? date( 'Ymd', current_time( 'timestamp' ) ) : $date );
	return ( $date >= $start && $date <= $end );
}

A função espera datas informadas no formato aaaammdd e, se alguma for omitida, será substituída pela data atual.

Em seguida, criei uma função responsável por aplicar as devidas alterações caso a data atual esteja em um período especial e a associei ao gancho wp_footer:

add_action( 'wp_footer', 'specialdates_formatting', 100);
 
function specialdates_formatting() {
	if ( is_in_daterange( '20121001', '20121031' ) ) { // Outubro Rosa
		echo '<style type="text/css">';
		echo '<!--- conjunto de regras CSS adequadas ao periodo --->';
		echo '</style>';
	}
}

Pronto! Agora basta acrescentar testes para outros períodos e a decoração do site mudará automaticamente.

Atualização: Acrescentado o trecho sobre alteração das cores do menu e o uso de gradientes.

Deixe um comentário: