04th Mar 2008
Cambiar de una hoja de estilos a otra dinámicamente
Alguna vez me pregunté como podría cambiarle el aspecto a mi página de forma rápida y fácil como si de skins se tratarán. Bien pues una posible solución es usar unas simples líneas de código PHP.
Ahora, aquí pongo una estructura de mis directorios de mi página a la que le voy a cambiar el aspecto.
- examplecss
- css
- style.css
- 001
-
- bg.gif
- logo.gif
- style.css
- images
- Bruhl-design.gif
- otre.jpg
- index.php
Podemos darnos cuenta que tenemos una carpeta especial para nuestras hojas de estilos llamada css, y dentro de esta tenemos el archivo style.css que será nuestro estilo predeterminado ya que si no asignamos nada, lo tomara por default. Existe dentro de css un directorio llamado 001 que en su interior tiene todo lo necesario para proporcionar una segunda hoja de estilos distinta a la predeterminada, y si existiesen mas, podemos crear un segundo directorio llamado 002 por ejemplo.
Una vez definida bien nuestra estructura, miremos parte del archivo index.php.
HTML:
El código anterior es lo perteneciente a nuestro head, donde también tenemos definido una tag link que nos permitirá incluir nuestra hoja de estilos para cambiar el aspecto de nuestra pagina. Vamos a cambiar el código anterior por el siguiente.
HTML:
-
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>exampleCSS :: Programacion Web</title>
-
<meta content="es_MX" http-equiv="Content-Language" />
-
<?
-
$cssfile = $_REQUEST['cssfile'];
-
if(empty($cssfile))
-
print '<link media="all" href="css/style.css" type="text/css" rel="stylesheet" />';
-
else
-
print '<link media="all" href="'.$cssfile.'" type="text/css" rel="stylesheet" />';
-
?>
-
</head>
Ahora podemos observar que ya incluimos código PHP para determinar que hoja de estilos queremos usar para nuestra página.
Para ver los resultados, hagamos pruebas.
Prueba 1: Sin definirle una hoja de estilos tomara la predeterminada (css/style.css)
http://codeplastic.webcindario.com/examplecss/index.php
Prueba 2: Definimos una hoja distinta a la predeterminada
Aquí podemos observar que al terminar la ruta de index.php? definimos un dato a enviar llamado cssfile que contendrá la ruta de la hoja de estilos alternativa a la predeterminada y el cambio es drástico en nuestra pagina.
Alguna vez me pregunté como podría cambiarle el aspecto a mi página de forma rápida y fácil como si de skins se tratarán. Bien pues una posible solución es usar unas simples líneas de código PHP.
Ahora, aquí pongo una estructura de mis directorios de mi página a la que le voy a cambiar el aspecto.
- examplecss
- css
- style.css
- 001
-
- bg.gif
- logo.gif
- style.css
- images
- Bruhl-design.gif
- otre.jpg
- index.php
- css
Podemos darnos cuenta que tenemos una carpeta especial para nuestras hojas de estilos llamada css, y dentro de esta tenemos el archivo style.css que será nuestro estilo predeterminado ya que si no asignamos nada, lo tomara por default. Existe dentro de css un directorio llamado 001 que en su interior tiene todo lo necesario para proporcionar una segunda hoja de estilos distinta a la predeterminada, y si existiesen mas, podemos crear un segundo directorio llamado 002 por ejemplo.
Una vez definida bien nuestra estructura, miremos parte del archivo index.php.
El código anterior es lo perteneciente a nuestro head, donde también tenemos definido una tag link que nos permitirá incluir nuestra hoja de estilos para cambiar el aspecto de nuestra pagina. Vamos a cambiar el código anterior por el siguiente.
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>exampleCSS :: Programacion Web</title>
-
<meta content="es_MX" http-equiv="Content-Language" />
-
<?
-
$cssfile = $_REQUEST['cssfile'];
-
if(empty($cssfile))
-
print '<link media="all" href="css/style.css" type="text/css" rel="stylesheet" />';
-
else
-
print '<link media="all" href="'.$cssfile.'" type="text/css" rel="stylesheet" />';
-
?>
-
</head>
Ahora podemos observar que ya incluimos código PHP para determinar que hoja de estilos queremos usar para nuestra página.
Para ver los resultados, hagamos pruebas.
Prueba 1: Sin definirle una hoja de estilos tomara la predeterminada (css/style.css)
http://codeplastic.webcindario.com/examplecss/index.php
Prueba 2: Definimos una hoja distinta a la predeterminada
Aquí podemos observar que al terminar la ruta de index.php? definimos un dato a enviar llamado cssfile que contendrá la ruta de la hoja de estilos alternativa a la predeterminada y el cambio es drástico en nuestra pagina.
Posted in CSS, codigos, web | No Comments »