Autor: Reginaldo Lima

Se você sempre desejou ter um link em sua página onde fosse possível mudar o estilo da mesma somente com um clique, então está lendo o post certo. Iremos aprender, utilizando a linguagem PHP, como é possível criar um link que permite o usuário escolher entre duas folhas de estilos. Sendo possível alterar totalmente o layout de uma página através do CSS, você poderá criar duas versões de um único site e ainda permitirá que o internauta escolha qual deseja visualizar. Isso tornará seu site um pouco mais interativo com o usuário.

A estrutura para tornar isso possível é simples, para tanto, é necessário noções de PHP e conhecimento de CSS. Para iniciarmos você terá que ter uma página pronta (óbvio, né?! rsrs), que eu chamarei de “minhapagina.php”, e duas folhas de estilos, no meu caso “folha01.css” e “folha02.css”.

A primeira alteração que vamos fazer no documento PHP será “linkar” uma das folhas de estilos a ele. Normalmente o link se dá pelo seguinte comando:

<link href="folha1.css" rel="stylesheet" type="text/css" />

Porém, para o trabalho que iremos realizar iremos utilizar:

<link href="<?php echo $padrao;?>" rel="stylesheet" type="text/css"  />

Agora iremos inserir todo o comando PHP. Será criada uma variável chamada “padrão” que irá receber a folha de estilo. Iremos atribuir a essa variável umas das folhas de estilos, a que irá ser carregada com a página. O seu estilo padrão. Em seguida, através da estrutura IF iremos realizar toda a mágica para que a alteração seja possível. Veja abaixo a estrutura comentada:

1
2
3
4
5
6

<?php $padrao="folha01.css"; //variável recebe o estilo padrão que será carregado 
	//isset verifica se a varíavel "estilo" foi criada e então...
	if( isset ($_GET['estilo'])) {
	   	$padrao = $_GET['estilo']; //... a variável "padrão" recebe o estilo escolhido 
	}
?>

Através da estrutura acima será feita toda a verificação para a mudança de estilo. Para finalizarmos, vamos criar os links para as folhas de estilo. Como você deve ter percebido no código PHP utilizamos o método GET, portando o link deve ser para a mesma página HTML (no meu caso minhapagina.html) utilizando o raciocínio do método GET:

1
2
3
4
5
6
7

<!-- 
estrutura de link para cada folha de estilo,
onde a variável "estilo" é igual ao nome
do arquivo a ser carregado
-->
<a href="minhapagina.php?estilo=folha01.css">Estilo 01</a>
<a href="minhapagina.php?estilo=folha02.css">Estilo 02</a>

Estando a variável “estilo” com o nome da folha a ser carregada, essa passa o nome do arquivo para a variável “padrão” que será responsável em informar, através daquela primeira linha de código que vimos, qual folha de estilo será carregada.

Então é isso, espero que tenha ajudado a quem possa interessar.

Até a próxima!

Reginaldo Lima
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.