Cómo incluir varios estilos en tu Blog usando PHP
Para los usuarios de Movable Type, por favor lean cómo poner Etiquetas PHP en Movable Type y así poder ofrecer varios estilos en sus blogs.
Podía haber hecho un script en javascript pero lo que sucede es que hay varios usuarios que no lo tienen habilitado. Con las cookies no hay problema, ya que la implantaremos también con PHP.
PHP es un lenguaje que está disponible en muchos, muchos servidores. Es rápido, gratuito, y es de libre distribución (open source), y se maneja todo del lado del servidor, y por tanto, no tendremos problemas con los usuarios que hayan deshabilitado el javascript y/o las cookies. Si no estás seguro de que tu host tiene PHP instalado, solo pregúntales.
Primer Paso: Los estilos
El primer paso es crear un nuevo archivo en tu servidor el cual llamaremos switcher.php y le pegaremos el siguiente código:
<?php
setcookie (’sitestyle’, $set, time()+31536000, ‘/’,
‘tudominio.com‘, ‘0?);
header("Location: $HTTP_REFERER");
?>
Cuando se pone en uso, este archivo escribe una cookie para el usuario detallando cual estilo se usará. La cookie está escrita para que se borre en un año, y luego el script enviará al usuario a la página de referencia. Todo esto sucede por detrás, el usuario nunca verá el archivo switcher.php funcionando. Para ellos, lo verán todo muy simple, como cuando una página se refresca. No te olvides de poner tu propio “tudominio.com” en el script, o la cookie no será válida.
Decirle a switcher.php cual estilo utilizar, es otra tarea sumamente fácil. Lo podemos hacer usando un enlace convencional en el texto, o incluso en flash. Lo que se necesita es escribir un enlace a switcher.php y definir el estilo que quieras.
<a href="./switcher.php?set=red"> click aquí para cambiar a un estilo en ROJO!</a>
Segundo Paso: Detectando los estilos
Es muy bueno que le permitamos a nuestros visitantes que elijan de algunos estilos CSS y que nosotros mismos escribamos las cookies por ellos, pero sin un script de detección de cookies, todo este proceso no nos servirá. Así que para cada página de tu web donde quieras que los estilos sean definidos, pega el siguiente código entre las etiquetas <head> y </head>:
<link rel="stylesheet” type="text/css” media="screen” title="User Defined Style” href=”< ?php echo (!$sitestyle)?’defaultstyle’:$sitestyle ?>.css” />
Notarás que esto es un elemento <link> normal, el mismo que se usa para incluir cualquier archivo CSS standard, pero hay una diferencia importante; donde normalmente escribimos el nombre de la hoja de estilo, hemos usado:
<?php echo (!$sitestyle)?’defaultstyle’:$sitestyle ?>
Este pequeño script detecta cual estilo está en la cookie del usuario e imprime el resultado. Si el usuario no tiene habilitado las cookies, o no se ha decidido por algún estilo aún, el script le pondrá “defaultstyle.css” el cual es el estilo por defecto. Cambia el nombre de tu archivo CSS que tienes por defecto a “defaultstyle.css“.
Ahí tienen. Hemos hecho un script para cambiar estilos en tan solo 5 líneas apenas.
Para los usuarios del Gecko Browser (Netscape 6+, Mozilla 1+) deben hacer referencia a las hojas de estilo alternativas entre las etiquetas <head> y </head>:
<link rel="alternate stylesheet” type="text/css” media="screen” title="Fire Engine Red” href="./redstyle.css” /> <link rel="alternate stylesheet” type="text/css” media="screen” title="Grape” href="./purple.css” /> <link rel="alternate stylesheet” type="text/css” media="screen” title="Scary” href="./blackout.css” />
Aunque no es necesario, poner una lista alterna de hojas de estilo de esta manera le permite a los “Gecko Browsers” cambiar de estilos dentro de la interfaz del navegador. Todo lo que tienen que hacer es ir a View>Use Stylesheet y elegir cual de ellos quieren usar.
Eso es todo. Ya no tienes excusas para darle a tus usuarios la opción de ver tu blog como ellos quieran. Por supuesto, tu eres el que elijes los diseños.
En el caso de arriba, “rojo” es el nombre de la hoja de estilo que quieres usar. No hace falta colocar la extensión .css aquí; esto lo haremos luego. El enlace llama a switcher.php y le dice que utilice “red”, dejando que el script haga el resto. Como una alternativa al enlace de texto, puedes usar elementos de formas para seleccionar los diferentes estilos. Prueba esta forma:
<form action="switcher.php method="post"> <select name="set"> <option value="default” selected>Por Defecto</option> <option value="red">Rojo Loco</option> <option value="experiment">Experimental</option> </select> <input type="submit” value="Change Style"> </form>
|
Artículos Relacionados Primeros pasos con CSS (hojas de estilo) ¿Porqué Usar CSS? CSS (Cascading Styles sheets) también conocido como hojas de estilo, es una... Videotutoriales de Hojas de Estilo (CSS) Nivel avanzado Curso avanzado en video tutoriales sobre el uso de Hojas de Estilo (CSS).... Videotutoriales de Hojas de Estilo (CSS) básico Nivel Básico Recopilación de video tutoriales sobre la introducción al uso de Hojas de Estilo... Capas visibles e invisibles con CSS Una capa es un contenedor en la página Web que contiene elementos de página... |
(Sin valoración)
Loading ...Autor y licencia
Autor: Francisco Pereiro
URL: http://frankpereiro.bitacoras.com/
RSS