Crazymen.net

Usar codigo PHP dentro de hojas de estilos CSS

Para poder insertar codigo PHP dentro de una hoja de estilos CSS para asi hacerlo mas dinamico, conozco dos maneras.

La primera es configurando el servidor apache donde alojamos nuestra pagina web, para ello tenemos que configurar el archivo httpd.conf (/etc/apache/httpd.conf) y buscar la linea donde pone:

1

AddType application/x-httpd-php .php

Y cambiarla por:

1

AddType application/x-httpd-php .php .css

A continuacion reiniciamos el servidor apache para que los cambios surjan efecto.

Despues de esto en nuestra hoja de estilos debemos añadir esta cabecera de php para indicar que el contenido del archivo es un css, para ello en la primera linea de nuestro css hay que usar este codigo:

1

<?php Header ("Content-type: text/css");?>

Con estos pasos ya podemos usar codigo php dentro de nuestro archivo css.

La segunda manera es hacerlo sin tocar nada en el servidor, usando el archivo .htaccess, para ellos editamos el .htaccess y añadimos la siguiente linea:

1

AddType application/x-httpd-php .css

Solo nos faltaria como en el caso anterior añadir en la primera linea de nuestro css el siguiente codigo:

1

<?php Header ("Content-type: text/css");?>

Yo prefiero usar la segunda manera, ya que no hay que tocar nada en el servidor y si el servidor tiene muchas paginas webs abria que editar todos los archivos css de todas las paginas que es un engorro.

Por ejemplo si tenemos este archivo css en esta ruta \style\style.css entrariamos a la carpeta style y dentro de ella creariamos el archivo .htaccess con el codigo:

1

AddType application/x-httpd-php .php

A continuacion editariamos nuestro style.css y en la primera linea añadiriamos:

1

<?php Header ("Content-type: text/css");?>

Y despues de esta linea ya añadiriamos nuestro estilo y quedaria nuesto style.css tal que asi.

1
2
3
4
5
6
7
8
9
10
11
12

<?php Header ("Content-type: text/css");?>
* {
	padding: 0;
	margin: 0;
}
 
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background: #fff url(images/bg.gif) repeat-x;
color:#666;
}